チャートライブラリの使い方（3）「データを追加する」
前回のグラフの基本形を使って、今回はデータを追加する方法を紹介します。
実際に描画すると次のようになります。コードはこちらにあります。
3つのデータ系列を表示しています。
シリーズデータを追加する
元々シリーズは配列で与えていましたが、これを追加します。
| var series = [ | |
| this._createNewSeries('blue'), | |
| this._createNewSeries('red'), | |
| this._createNewSeries('green') | |
| ]; |
引数としてグラフの色を変えるようにしています。 _createNewSeries もこれに合わせて変更します。
データ系列の名前をユニークにする
大事なのは、nameプロパティをユニークにしておくということです。今回はnameプロパティに指定した色名を加えています。
| _createNewSeries: function(color) { | |
| var data = createChartDummyData(400, 100); // ダミーデータを生成 | |
| // 系列定義 | |
| return { | |
| name: 'series_'+color, | |
| type: 'line', | |
| data: data, | |
| propNames: { | |
| y: 'val' | |
| }, | |
| color: color | |
| }; | |
| } |
後はcolorプロパティに対して色を指定するだけです。
これだけで複数のデータをグラフに描画できるようになります。
nameプロパティをユニークにすることさえ注意すればhifiveのチャートライブラリを簡単に使いこなせるでしょう。ぜひサンプルで確認してください。
Trackbacks & Pingbacks
コメントは受け付けていません。