とりあえず描いてみる
========================================
最小限のグラフ
--------------------
まずは最小限のグラフを作ってみましょう。
Highchartsのzipファイルを解凍して出てきた "index.htm" の隣に、 "test.html" というファイルを作成し、以下のような内容を記述します。
.. code-block:: html
.. image:: image/thumb_test1.png
:target: ./demo/test1.html
`【デモ】test1.html <./demo/test1.html>`_
これで、プログラム中で指定した [3,1,4,1,5] を表示する折れ線グラフが出力されます。
``Highcharts.Chart`` というクラスのインスタンスを作製し、その中にデータや設定を連想配列形式で突っ込むと、指定したHTML要素 (ここでは ``container`` というIDの````要素) にグラフが出力されます。
基本はこれだけです。
タイトルと軸ラベルを付ける
----------------------------------------
``Highcharts.Chart()`` の引数 ``options`` には、データ以外にもさまざまな付加情報を入れることが出来ます。
デフォルトではグラフタイトルが「Chart title」となっていますが、 ``options`` に ``title`` という要素を加えればグラフタイトルが設定できます。
JavaScript部分を以下のように編集してみましょう。
.. code-block:: 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();
`【デモ】test2.html <./demo/test2.html>`_
これでグラフタイトルにx軸、y軸ラベルが指定できました。
複数のデータ系列を並べる
--------------------------------------------------
``option['series']`` の部分は配列形式になっており、複数のデータ系列を並べることが出来ます。こんなふうに。
.. code-block:: 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]},
{name: "nepier", data: [2,7,1,8,2]}
]
}
// グラフを作成
chart = new Highcharts.Chart(options);
}
// ページがロードされた後に、グラフを出力する
document.body.onload = draw();
.. image:: image/thumb_test3.png
:target: ./demo/test3.html
`【デモ】test3.html <./demo/test3.html>`_
外部ファイルのデータを読み込む(Ajaxを利用)
--------------------------------------------------------------------------------
ここまではJavaScriptコード内にデータを書き込んでいましたが、これではあらかじめ用意したデータしか描写できません。
そんなものは画像でやれ、って話ですね。
そこで、Ajaxを使って外部ファイルを読み込んでグラフにしてみましょう。
まず外部データを用意します。以下のようなテキストを書いて、``data.csv`` という名前で保存します。
::
3,1,4,1,5
これをHTMLファイルと同じ場所に置いて、jQueryのAjaxを使って読み込むと、以下のようになります。
.. code-block:: javascript
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`_