コンテンツへスキップ

チャートライブラリの使い方(5)「動的に系列データを追加する」

by : 2017/04/20

hifiveのチャートライブラリの紹介です。今回は動的に系列データを追加する方法を紹介します。

現在、動的な系列データの追加は積み上げグラフの場合のみサポートされています。実際の動作は下の画像のようになります。

サンプルはこちらのURL にて確認できます。ベースはチャートライブラリの使い方(1)「基本編」 | hifive開発者ブログのグラフです。

ボタンを追加

まずHTMLにボタンを追加します。


<p>
<button id="add">
データ系列追加
</button>
</p>

view raw

index.html

hosted with ❤ by GitHub

追加イベントを作成

追加時の処理ですが、これはシリーズデータを作成(配列)し、チャートコントローラの addSeries を実行します。配列であることに注意してください。


this._chartController.addSeries([this._createNewSeries()]);

view raw

index.js

hosted with ❤ by GitHub

色の生成処理を追加

これはおまけですが、グラフの系列データの色をランダムで生成するようにしました。ランダムなカラーコードを生成 – Qiitaを参考にさせてもらいました。


_createNewSeries: function() {
var data = createChartDummyData(400, 100); // ダミーデータを生成
// 系列定義
var color = GenerateColor();
return {
name: 'series_'+color,
type: 'stacked_line',
data: data,
propNames: {
y: 'val'
},
fillColor: "#" + GenerateColor(),
color: "#" + color
};
}
function GenerateColor() {
return Math.floor(Math.random()*16777215).toString(16);
}

view raw

index.js

hosted with ❤ by GitHub

色コードを系列データの名前に適用しています。また、fillColor(塗りつぶしの色)に対しても別なランダムな色を適用しています。塗りつぶしについてはチャートライブラリの使い方(2)「データを塗りつぶす」 | hifive開発者ブログを参考にしてください。


これで完了です。後はボタンを押すだけで系列データが生成されてグラフが自動的に描画更新されます。

データを非同期で読み込んで描画する際にも利用できるでしょう。サンプルを参考の上、実装してみてください。

banner_02

From → hifive

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

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