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

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

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

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

ボタンを追加

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

追加イベントを作成

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

色の生成処理を追加

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

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

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

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