チャートライブラリの使い方(5)「動的に系列データを追加する」
hifiveのチャートライブラリの紹介です。今回は動的に系列データを追加する方法を紹介します。
現在、動的な系列データの追加は積み上げグラフの場合のみサポートされています。実際の動作は下の画像のようになります。
サンプルはこちらのURL にて確認できます。ベースはチャートライブラリの使い方(1)「基本編」 | hifive開発者ブログのグラフです。
ボタンを追加
まずHTMLにボタンを追加します。
<p> | |
<button id="add"> | |
データ系列追加 | |
</button> | |
</p> |
追加イベントを作成
追加時の処理ですが、これはシリーズデータを作成(配列)し、チャートコントローラの addSeries を実行します。配列であることに注意してください。
this._chartController.addSeries([this._createNewSeries()]); |
色の生成処理を追加
これはおまけですが、グラフの系列データの色をランダムで生成するようにしました。ランダムなカラーコードを生成 – 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); | |
} |
色コードを系列データの名前に適用しています。また、fillColor(塗りつぶしの色)に対しても別なランダムな色を適用しています。塗りつぶしについてはチャートライブラリの使い方(2)「データを塗りつぶす」 | hifive開発者ブログを参考にしてください。
これで完了です。後はボタンを押すだけで系列データが生成されてグラフが自動的に描画更新されます。
データを非同期で読み込んで描画する際にも利用できるでしょう。サンプルを参考の上、実装してみてください。
コメントは受け付けていません。