work.log

元エンジニアの備忘録的ブログ

Highcharts のメモ書き

投稿:2012-04-25 22:21  更新:

jQuery プラグイン Highcharts の基本的な設定メモです。

1. Highcharts の設置方法

Highcharts公式サイト よりダウンロードしたファイルを js/ 以下にアップロードした場合を想定に書いています。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>

シンプルな使い方であれば、html ファイル等で jquery と highcharts.jsを読み込むだけで OK です。

もし、スキンを変えたいのであれば下記のようにお好みのものを指定します。

<script type="text/javascript" src="js/themes/gray.js"></script>

さらに、グラフのエクスポート機能も必用な場合は下記も読み込んでください。

<script type="text/javascript" src="js/modules/exporting.js"></script>

※ 画像形式でエクスポートする場合には別途 PHP 実行環境が必要になります。

2. Highcharts へのデータ受け渡し方法

Highcharts を表示させるには配列形式のデータが必用です。

配列であれば、ソースコードにベタ書きしても問題ないですが一度書いたソースを汎用的に使いたいので、ここでは JSON 形式で配列データを渡して表示させています。

JSON の中身はこんな感じで用意して、スクリプト内で 2 つの配列に分けて使っています。

[
["00:00",29],
["00:05",10],
["00:10",13],
["00:15",13]
]

3. Highcharts の各種パラメータ

renderTo の設定

chart: {
    renderTo: 'container',
},

renderTo: ‘<任意の ID>’ でグラフを表示させる ID を設定します。

html でグラフを表示させたい場所に <div id=”任意の ID”> ? </div> タグを使いこの ID を指定するとグラフが描画できます。

グラフタイトル名、クレジット表示の設定

title: {
    text: 'CPU History'
},

credits: {
    text: ''
},

title は見ての通りグラフに表示されるタイトル名を設定する箇所になります。

デフォルトでは右下に Highcharts の文言が挿入されますので、非表示もしくは別のものにしたい場合は credits を設定してやります。

グラフX軸の設定

xAxis: {
    categories: date,
    labels: {
        step: 60
    }
},

グラフの X 軸に表示するデータの指定です。

中の配列は 5 分毎の時間が入ってますが全部は表示しきれないので step で適当に間隔をあけてます。

細かいデータなんかは別ライブラリの Highstock を使ったほうが便利だったりもします。

グラフY軸の設定

yAxis: {
    min: 0,
    title: {
        text: '%'
    }
},

Y 軸の設定です。

最小値の指定だったりラベルの設定だったりをしてます。

グラフ凡例の設定

    legend: {

凡例を表示させたい場合に指定します。主に表示位置の設定箇所になります。

グラフツールチップの設定

    tooltip: {

マウスカーソルを当てた時にその位置の “時間、数値” 等の詳細情報を表示させたい場合に指定します。

グラフ描画オプションの設定

  plotOptions: {

グラフエリアの描画オプションです。

今回は area というスタイルを採用しているのですが、ここでグラデーションをかけてます。

グラフエリアの設定

series: [{
    type: 'area',
    name: 'cpu',
    data: cpu
}]

最後に、グラフエリアの設定です。type で表示させたいグラフ種類を指定します。

他にも数種類あるのでお好みで。基本なグラフだったら大体なんでも書けます。

Highcharts グラフタイプ一覧

area, areaspline, bar, column, line, pie, scatter, spline

参考: Highcharts 公式マニュアル

また、複数もしくは違う種類のデータを表示させたい場合は下記のようにすると同じグラフエリアに描画することができます。

series: [{
    type: 'area',
    name: 'cpu',
    data: cpu
},{
    type: 'line',
    name: 'cpu wait',
    data: wait
},{
    type: 'spline',
    name: 'avg',
    data: avg
}]

いろいろ端折ったメモですが Highcharts 基本的な使い方はこんな所です。