テスターですが何か?

ホビープログラマ略してHPです

Highchartsを使ってみた(3) 複合グラフ

with 2 comments

今回は前回作った折れ線グラフに棒グラフを追加しようと思います。

前回作成した折れ線グラフはこんな感じです。(ソースは「HighchartsSample1.zip」を参照)

image

作りたいグラフはこんな感じの、折れ線グラフと棒グラフが混在したものです。

image

(1) 2番目のY軸の追加

2番目のY軸として、電力使用量をグラフの右側に表示します。javascriptのyAxis部分を変更します。

yAxis: [{

title: {

                text: 節電率(%)’

}

}, {

title: {

text: 電力使用量(KW)’,

style: {

color: ‘#89A54E’

}

},

opposite: true

}],

ポイントとしては、「opposite: true」の部分です。これを指定しないとグラフの右側にラベルが表示されません。

ブラウザで表示します。ちゃんと右側にラベルが表示されていますね。

image

(2) 値の設定

Series部分に値(電力使用量)を設定していきます。

series: [{

name: 電力使用量,

         color: ‘#89A54E’,

         type: ‘column’,

         yAxis: 1,

         data: [[0, 3415], [1, 3217], [2, 3055], [3, 2926], [4, 2857], [5, 2876], [6, 3015], [7, 3270], [8, 3616], [9, 3860], [10, 3903],

         [11, 3858], [12, 3804], [13, 3725], [14, 3623], [15, 3542], [16, 3675], [17, 4037], [18, 4135], [19, 4113], [20, 4051],

         [21, 3934], [22, 0.0], [23, 0.0]]

}, {

name: 前年比節電率,

         type: ‘line’,

         data: [[0, 11.4], [1, 10.8], [2, 9.6], [3, 8.6], [4, 7.5], [5, 5.3], [6, 2.2], [7, 0.2], [8, -3.5], [9, -4.8], [10, -4.1],

         [11, -5.0], [12, -2.7], [13, -6.7], [14, -9.5], [15, -9.5], [16, -7.8], [17, -3.2], [18, 1.0], [19, 3.6], [20, 4.2],

         [21, 4.0], [22, 0.0], [23, 0.0]]

}]

 

コードの解説です、既存の「前年比節電率」の前に「電力使用量」を追加しています。あとに記述したSeriesのほうが前面に表示されます。なので、このコードは棒グラフと折れ線グラフが重なった場合、折れ線グラフが前面に表示されるように意図して記述しています。また電力使用量は2番目のY軸に表示するので、yAxis:1を指定しています。前年比節電率のyAxis:0は省略可能です。

ブラウザで表示してみます。棒グラフよりも折れ線グラフの方が前面に表示されていることが確認できます。

image

(3) tooltipの設定

tooltipの部分は何も変更していないので、tooltipが残念な状態になっています。3415%って…

image

マウスカーソルが乗った位置に応じてtooltipの表示を変更するようにします。

tooltip: {

formatter: function () {

return ‘<b>’ + this.series.name + ‘</b><br/>’ +

                        this.x + : ‘ + this.y +

                          (this.series.name == 前年比節電率 ? ‘%’ : KW’);

}

},

ブラウザで表示します。ちゃんとグラフに応じてtooltipが表示されています。

image

image

(4) 2種類の棒グラフ

電力使用量に加えて、前年電力使用量の棒グラフも追加します。ここまでよんで来られた方はもうお分かりだと思いますが、Seriesに追加するだけです。

series: [{

name: 前年使用量,

         color: ‘yellow’,

         type: ‘column’,

         yAxis: 1,

         data: [[0, 3597], [1, 3395], [2, 3228], [3, 3107], [4, 3046], [5, 3102], [6, 3320], [7, 3657], [8, 4069], [9, 4353], [10, 4406],

         [11, 4399], [12, 4285], [13, 4308], [14, 4278], [15, 4262], [16, 4372], [17, 4506], [18, 4480], [19, 4391], [20, 4262],

         [21, 4077], [22, 0.0], [23, 0.0]]

}

 

ブラウザで表示します。(時のラベルが小数点つきに成っていることにはツッコマないでください)

image

これでHighchartsをつかってやってみようと思ったことは完了したので、このシリーズは一旦終了です。今回作成したサンプルはこちらにアップしておきます、「HighchartsSample2.zip」をダウンロードして下さい。

Written by david9142

2012年1月23日 @ 12:38 AM

カテゴリー: Highcharts

Tagged with , ,

コメント / トラックバック2件

Subscribe to comments with RSS.

  1. Highchartsは便利ですね。

    ちなみにXY軸に以下のオプションを指定すると小数点刻みではなくなります。
    xAxis: {allowDecimals: false}
    yAxis: {allowDecimals: false}

    テレヲ

    2012年4月19日 at 10:14 AM

  2. はじめましてこんにちは、
    Highchartsを使ってみようと思いこちらのページへたどり着きました。
    わかり易くとても参考になりました!

    次はテキストファイル(csv)からデータを取得…
    なんて事をやっていただくと嬉しいのですが…

    宜しくお願い致します。

    Ryo

    2012年6月22日 at 2:41 PM


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。