スポンサーリンク
スポンサーリンク

JSONみたいなデータを読み込んでグラフにする

まずは、サンプルコードの実行結果はこちら

今回紹介するのも複数の線グラフを表示するものですが、データセットの書き方が違います。今回はJSON形式のデータで線グラフを表示します。
下記は、前回の記事の配列データを、JSON形式にしたデータです。

var arrData = [
{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },
{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },
{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },
{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },
{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },
{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },
{ year : 2012, value1 : 8 , value2 : 23, value3 : 9 },
{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },
{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },
{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }
];

上記の場合は、arrData配列の要素番号を指定することができません。
サンプルコードのdrawGraph関数を修正します。
下記は、value1という名前の項目をグラフデータを表示します。

drawGraph( arrData,”value1″, “red” ,”linear”);

その場合、x()メソッド、y()メソッドに指定した関数に渡されるデータは下記の通りです。

{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },

オブジェクトとして渡されるので、d.value1と書いて、参照することができます。
drawGraph関数にはオブジェクトに加えて文字列もパラメーターとして渡されています。このときは、d[“value1”]のようにして、連動配列形式で指定しなければなりません。
ということは、d[ ]添字にdrawGraph関数にワタアされたパラメーターを指定すればデータの値を読み出せます。

return svgHeight – ( d[ itemName ] * scale ) – offsetY;

コメント

タイトルとURLをコピーしました