前回のエントリーではhighchatsの簡単な紹介で終わりました。今回のエントリーでは、実際にサンプル（簡単な折れ線グラフ）を作成したいと思います。highchartsのサイトのデモページにある「Basicline」を参考に作っていきます。
(1) highchartsのインストール
ダウンロードページから「Highcharts-X.X.X.zip」をダウンロードし、解凍します。改装してできた「highcharts.js」をWebページから参照しやすい場所に配置します。自分はVisual Studioを使ってASP.NETプロジェクトで作成するので、Scriptsフォルダに配置しました。
(2) 空白のグラフの表示
まずは空白のグラフ（枠のみ）を表示してみます。コードはこのようになります。グラフの表示場所を<div>タグで準備し、javascript内のrenderToで表示場所を指定します。グラフタイプはdefaultSeriesTypeで折れ線グラフ(line)を指定しています。
<!DOCTYPE html>
<html>
<head>
<title>Sample1</title>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
defaultSeriesType: ‘line’,
marginRight: 0,
marginBottom: 0
},
title: {
},
subtitle: {
},
xAxis: {
},
yAxis: {
},
tooltip: {
},
legend: {
},
series: [{
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
ブラウザで表示するとこのようになります。まだ何も指定していないので、そっけないのは仕方ないですね。
(3) タイトル、X軸、Y軸の指定
次に、グラフのタイトル・X軸・Y軸の指定を行なっていきます。まずはコードです(javascript部分のみを抜粋しています)
<script type="text/javascript">
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
defaultSeriesType: ‘line’,
marginRight: 130,
marginBottom: 30
},
title: {
text: ‘時刻別節電達成率‘
},
subtitle: {
text: ‘2011年XX月YY日‘
},
xAxis: {
title: {
text: ‘時‘
}
},
yAxis: {
title: {
text: ‘節電率(%)’
}
},
tooltip: {
},
legend: {
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘top’
},
series: [{
}]
});
});
</script>
ChartsControlの知識が役に立ちますね。xAxis, yAxis, legendの用語はどちらにも出てきますし。ポイントの解説です。
- chart
- marginRight, marginBottom: これを指定しないと右上のlegend(Series1の見出し)、X軸のラベルが表示されません。
- legend: 右上にある「Series1」の値見出しです。
ブラウザで表示させると以下のようになります。だんだんグラフっぽくなってきましたね。次はここに値を設定します。
(4) 値の設定
グラフの枠ができたので、値を設定していきます。空欄だったseriesの部分にXY軸の値を指定して埋めてきます。コードです。（長くなるのでseries部分のみを抜粋）
series: [{
name: ‘前年比節電率‘,
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]]
}]
コードが見づらいので解説すると、[]で囲んでXY軸の値を指定します。(例[0, 11.4])そしてカンマでつないでいきます。
ブラウザで表示します。キレイなグラフになりましたね。あともう一息変更を加えていきます。
(5) tooltipの設定
デフォルトでtooltipが設定されているため、グラフの部分にマウスカーソルを乗せると値が自動的に表示されます。ただ、このような表示ではちょっとアレなので、カスタマイズしていきます。
tooltip部分にformatterを指定して表示させたい文字列を設定します。
tooltip: {
formatter: function () {
return ‘<b>’ + this.series.name + ‘</b><br/>’ +
this.x + ‘時: ‘ + this.y + ‘%’;
}
そしてブラウザの表示です。ハイ、完璧です。
今回はここまでです、今回作成したソースはこちらにアップしておきます。「HighchartsSample1.zip」をダウンロードして下さい。
次回はもう少し複雑なグラフを作っていきます。
テスターですが何か？ 