カテゴリー

キーワード

 
> highcharts.jsの使い方概要 J...

highcharts.jsの使い方概要 JavaScriptでグラフを描画【商用は有料】


2015 年 7 月 6 日 投稿    view: 9346
タグ:
このエントリーをはてなブックマークに追加

highchartsグラフ 概要

こんにちは、エンジニアの真田です。


また前回から少し空いてしまいました。


つい最近、グラフ描画で良いものがないか探していたときに、見た目が良くて細部までカスタムができるhighchartsに目が止まったので紹介します。



highcharts.jsの概要と使い方

今回はhighcharts.jsの説明と簡単な使い方を紹介します。


◆highchartsの特性 何ができるか?

5つに分けて紹介します。


1. JavaScriptで、Webページ上にグラフを描けます。

ただ単に描けるのではなく、『美しい』グラフが描けます。(ベクターデータでグラフ描画)


デモサイトはコチラです。


hightchart,jsのデモサイト


http://www.highcharts.com/demo


2. オプション次第で細部まで設定可能

様々なグラフを描ける上に、自分で細かい設定ができるという『痒いところに手が届く』仕様になっています。


3. 動作にはjQueryが必要

ソースに一行加えるだけですので、これはさほど問題ないかと。


4. IE6でも使える!

SVGを使っているのでHTML5対応のブラウザでないとダメかと思いきや、IEの場合はVMLを使って表示してくれるようです。(IE6以上で使用可能)


5. 商用は有料

残念ながら商用は有償です。仕事で使われる方はライセンスを購入してください。
私的利用なら無料だそうですので、個人ページで使われる方は是非導入をご検討ください。


◆導入の手順

ここから最新のバージョンをダウンロード。
http://www.highcharts.com/download


色々ファイルがありますが、ひとまず必要となるのは jsフォルダ内『highcharts.js』 だけです。


◆サンプルソース

以下のソースを保存し、ブラウザで実行してください。
jQueryのライブラリと今回導入するhighcharts.jsのパスは環境に合わせて書き換えて下さい。


<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- 以下の2行がhighchartsのために必要なインポート -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery/highchart/highcharts.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();

(function(j){
    j(function () {
        j('#container').highcharts({//ここから描画の実行内容

            title: {
                text: 'タイトル'
            },

            xAxis: {
                categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
                title: {
                    text: 'X軸'
                }
            },

            yAxis:{
                title: {
                    text: 'Y軸'
                }
            },

            series: [
                {
                    name: 'データ',
                    type: 'line',
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                }
            ]
        });
    });
})(j);

</script>
</head>
<body>
    <div id="container">
        <!--ここにグラフが描画される -->
    </div>
</body>
</html>

◆各パラメータについて少しだけ解説

サンプルソースの13行目以降が、グラフ描画の設定に関する部分です。


title
    文字通りグラフのタイトル。
    表示テキスト・表示位置やカラー・フォントなどが指定できます。


xAxis
    X軸の設定内容
    使用するデータ(categories:)の他に
    ラベルや目盛りの幅などが指定できます


yAxis:
    Y軸の設定内容
    X軸のものとほぼ同じ


series:
    グラフに用いるメイン部分
    type: の記述によってグラフの種類を変更できます
    data: は数字型の配列でこの数字をグラフとして描画します


◆パラメータの書き方

基本の書き方は


【パラメータ名】: 【設定内容】


です。


記述は内容に応じて数字、テキスト、配列、があります
設定内容の部分がさらに細かく分かれている場合、


【パラメータ名】: {
    【パラメータ名】: 【設定内容】
}


【パラメータ名】: {
    【パラメータ名】: {
        【パラメータ名】: 【設定内容】
    }
}


のように入れ子にして記述します。


また、次のパラメータが続く場合は後ろに『,』をつけます。
インデントを揃えておくとわかりやすくなります。


【パラメータA】: {
    【パラメータA_1】: {
        【パラメータA_1_1】: 【設定内容】
    },
    【パラメータA_2】: {
        【パラメータA_2_1】: 【設定内容】,
        【パラメータA_2_2】: 【設定内容】
    }
},

【パラメータB】: {
}


まとめ

highchartsの概要と簡単なソースを紹介しました。


今回紹介したのは最低限のソースですので、皆さんがイメージするグラフから見て、不足する部分が多々あると思います。


ですので、次回はさまざまな種類のグラフや、未登場のパラメータの使い方について詳しく紹介します。


よろしければ、またご覧ください。

 

 

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事