チャートライブラリの使い方(3)「データを追加する」
前回のグラフの基本形を使って、今回はデータを追加する方法を紹介します。
実際に描画すると次のようになります。コードはこちらにあります。
3つのデータ系列を表示しています。
シリーズデータを追加する
元々シリーズは配列で与えていましたが、これを追加します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var series = [ | |
this._createNewSeries('blue'), | |
this._createNewSeries('red'), | |
this._createNewSeries('green') | |
]; |
引数としてグラフの色を変えるようにしています。 _createNewSeries
もこれに合わせて変更します。
データ系列の名前をユニークにする
大事なのは、nameプロパティをユニークにしておくということです。今回はnameプロパティに指定した色名を加えています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
_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
コメントは受け付けていません。