とりあえず描いてみる¶
最小限のグラフ¶
まずは最小限のグラフを作ってみましょう。
Highchartsのzipファイルを解凍して出てきた “index.htm” の隣に、 “test.html” というファイルを作成し、以下のような内容を記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script type="text/javascript" src="js/highcharts.js"></script>
</head>
<body>
<div id='container'></div>
<script type="text/javascript">
var chart;
function draw() {
// グラフオプションを指定
var options = {
// 出力先を指定
chart :{renderTo : "container"},
// データ系列を作成
series: [{name: "pi", data: [3,1,4,1,5]}]
}
// グラフを作成
chart = new Highcharts.Chart(options);
}
// ページがロードされた後に、グラフを出力する
document.body.onload = draw();
</script>
</body>
</html>
これで、プログラム中で指定した [3,1,4,1,5] を表示する折れ線グラフが出力されます。
Highcharts.Chart というクラスのインスタンスを作製し、その中にデータや設定を連想配列形式で突っ込むと、指定したHTML要素 (ここでは container というIDの``<div>``要素) にグラフが出力されます。 基本はこれだけです。
タイトルと軸ラベルを付ける¶
Highcharts.Chart() の引数 options には、データ以外にもさまざまな付加情報を入れることが出来ます。 デフォルトではグラフタイトルが「Chart title」となっていますが、 options に title という要素を加えればグラフタイトルが設定できます。
JavaScript部分を以下のように編集してみましょう。
var chart;
function draw() {
// グラフオプションを指定
var options = {
// 出力先を指定
chart :{renderTo : "container"},
// タイトルを指定
title : {text: "円周率をグラフにしたけど何も分からなかった"},
// x軸のラベルを指定
xAxis : {title: {text: "桁数"}},
// y軸のラベルを指定
yAxis : {title: {text: "数値"}},
// データ系列を作成
series: [{name: "pi", data: [3,1,4,1,5]}]
}
// グラフを作成
chart = new Highcharts.Chart(options);
}
// ページがロードされた後に、グラフを出力する
document.body.onload = draw();
これでグラフタイトルにx軸、y軸ラベルが指定できました。
複数のデータ系列を並べる¶
option['series'] の部分は配列形式になっており、複数のデータ系列を並べることが出来ます。こんなふうに。
var chart;
function draw() {
// グラフオプションを指定
var options = {
// 出力先を指定
chart :{renderTo : "container"},
// タイトルを指定
title : {text: "円周率とネイピア数を比較したけど何も分からなかった"},
// x軸のラベルを指定
xAxis : {title: {text: "桁数"}},
// y軸のラベルを指定
yAxis : {title: {text: "数値"}},
// データ系列を作成
series: [
{name: "pi", data: [3,1,4,1,5]},
{name: "nepier", data: [2,7,1,8,2]}
]
}
// グラフを作成
chart = new Highcharts.Chart(options);
}
// ページがロードされた後に、グラフを出力する
document.body.onload = draw();
外部ファイルのデータを読み込む(Ajaxを利用)¶
ここまではJavaScriptコード内にデータを書き込んでいましたが、これではあらかじめ用意したデータしか描写できません。 そんなものは画像でやれ、って話ですね。
そこで、Ajaxを使って外部ファイルを読み込んでグラフにしてみましょう。
まず外部データを用意します。以下のようなテキストを書いて、data.csv という名前で保存します。
3,1,4,1,5
これをHTMLファイルと同じ場所に置いて、jQueryのAjaxを使って読み込むと、以下のようになります。
var chart;
function draw() {
options = {
// 出力先を指定
chart :{renderTo : "container"},
// タイトルを指定
title : {text: "円周率をAjaxで読み込んだけど永遠に変わらない数だから意味なかった"},
// x軸のラベルを指定
xAxis : {title: {text: "桁数"}},
// y軸のラベルを指定
yAxis : {title: {text: "数値"}}
}
// Ajaxを使って data.csv を読み込み、contentに格納
jQuery.get("data.csv", function(content) {
// 読み込んだデータを","で区切って配列にする
content = content.split(",");
// それぞれの要素を数値に変換する
for(i=0; i<content.length; i++){
content[i] = Number(content[i]);
}
// optionsにデータを追加
options['series'] = [{name: "pi", data: content}];
// グラフを作成
chart = new Highcharts.Chart(options);
} );
}
// ページがロードされた後に、グラフを出力する
document.body.onload = draw();