``要素) にグラフが出力されます。基本はこれだけです。タイトルと軸ラベルを付ける ---------------------------------------- ``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`_