コンテンツへスキップ

チャートライブラリの使い方(3)「データを追加する」

by : 2017/04/19

前回のグラフの基本形を使って、今回はデータを追加する方法を紹介します。

実際に描画すると次のようになります。コードはこちらにあります。

3つのデータ系列を表示しています。

シリーズデータを追加する

元々シリーズは配列で与えていましたが、これを追加します。


var series = [
this._createNewSeries('blue'),
this._createNewSeries('red'),
this._createNewSeries('green')
];

view raw

index.js

hosted with ❤ by GitHub

引数としてグラフの色を変えるようにしています。 _createNewSeries もこれに合わせて変更します。

データ系列の名前をユニークにする

大事なのは、nameプロパティをユニークにしておくということです。今回はnameプロパティに指定した色名を加えています。


_createNewSeries: function(color) {
var data = createChartDummyData(400, 100); // ダミーデータを生成
// 系列定義
return {
name: 'series_'+color,
type: 'line',
data: data,
propNames: {
y: 'val'
},
color: color
};
}

view raw

index.js

hosted with ❤ by GitHub

後はcolorプロパティに対して色を指定するだけです。

これだけで複数のデータをグラフに描画できるようになります。


nameプロパティをユニークにすることさえ注意すればhifiveのチャートライブラリを簡単に使いこなせるでしょう。ぜひサンプルで確認してください。

banner_02

From → hifive

One Comment

Trackbacks & Pingbacks

  1. チャートライブラリの使い方(4)「積み上げグラフを作る」 | hifive開発者ブログ

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。