今回は前回作った折れ線グラフに棒グラフを追加しようと思います。
前回作成した折れ線グラフはこんな感じです。（ソースは「HighchartsSample1.zip」を参照）
作りたいグラフはこんな感じの、折れ線グラフと棒グラフが混在したものです。
(1) 2番目のY軸の追加
2番目のY軸として、電力使用量をグラフの右側に表示します。javascriptのyAxis部分を変更します。
yAxis: [{
title: {
text: ‘節電率(%)’
}
}, {
title: {
text: ‘電力使用量(万KW)’,
style: {
color: ‘#89A54E’
}
},
opposite: true
}],
ポイントとしては、「opposite: true」の部分です。これを指定しないとグラフの右側にラベルが表示されません。
ブラウザで表示します。ちゃんと右側にラベルが表示されていますね。
(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は省略可能です。
ブラウザで表示してみます。棒グラフよりも折れ線グラフの方が前面に表示されていることが確認できます。
(3) tooltipの設定
tooltipの部分は何も変更していないので、tooltipが残念な状態になっています。3415%って…
マウスカーソルが乗った位置に応じてtooltipの表示を変更するようにします。
tooltip: {
formatter: function () {
return ‘<b>’ + this.series.name + ‘</b><br/>’ +
this.x + ‘時: ‘ + this.y +
(this.series.name == ‘前年比節電率‘ ? ‘%’ : ‘万KW’);
}
},
ブラウザで表示します。ちゃんとグラフに応じてtooltipが表示されています。
(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]]
}
ブラウザで表示します。(時のラベルが小数点つきに成っていることにはツッコマないでください）
これでHighchartsをつかってやってみようと思ったことは完了したので、このシリーズは一旦終了です。今回作成したサンプルはこちらにアップしておきます、「HighchartsSample2.zip」をダウンロードして下さい。
テスターですが何か？ 