Skip to content

チャートライブラリの使い方(7)「グラフを動かす」

by : 2017/04/25

hifiveのチャートライブラリの使い方を紹介します。今回はグラフを移動させるデモです。

ベースはチャートライブラリの使い方(1)「基本編」 | hifive開発者ブログのグラフになります。

実行しているところは下記の通りです。こちらのURLにてサンプルを試せます。

HTMLのボタンを追加

HTMLを次のように修正します。進む、戻るのボタンを追加します。

ダミーデータ生成部分を修正

任意のデータ数生成できるように修正します。これは実運用時には不要でしょう。

進むボタンを押した時の処理

進むボタンを押した時には、グラフを1つ進めます。その際、一番右端かどうかの判定を行って、端であればデータを追加します。

戻るボタンを押した時の処理

戻るボタンを押した時にはグラフを一つ戻します。この時、左端であればグラフは動きません。


注意点としてはデータを追加する際にデータ系列名(name)を初期表示時と同じにしておくということです。

例えばこの進むボタンを押した時の処理をsetIntervalで繰り返すようにすると刻々と描画が更新されるグラフができあがります。

ぜひサンプルをお試しください

banner_02

From → hifive

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

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