チャートライブラリの使い方(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
コメントは受け付けていません。