Skip to content

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

by : 2017/04/20

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

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

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

ボタンを追加

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

追加イベントを作成

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

色の生成処理を追加

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

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


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

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

banner_02

From → hifive

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

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