コンテンツへスキップ

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

by : 2017/04/25

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

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

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

HTMLのボタンを追加

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

<div id="chart"></div>
<p>
<button id="go">
進む
</button>
<button id="back">
戻る
</button>
</p>

view raw
index.html
hosted with ❤ by GitHub

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

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

// size 変数を追加
function createChartDummyData(median, vibration, size) {
size = size || 200; // デフォルトは200
var ret = [];
for (var i = 0; i < size; i++) {
ret.push({
val: median + (Math.random() 0.5) * vibration * 2
});
}
return ret;
}

view raw
index.js
hosted with ❤ by GitHub

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

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

"#go click": function() {
var movedNum = this._chartController.go(1);
if (movedNum === 1) {
return;
}
// 追加データ生成
addData = [{name: 'series_1', data: createChartDummyData(400, 100, 1)[0]}];
// データ追加
this._chartController.addData(addData);
},

view raw
index.js
hosted with ❤ by GitHub

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

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

"#back click": function() {
this._chartController.back(1);
},

view raw
index.js
hosted with ❤ by GitHub


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

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

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

banner_02

From → hifive

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

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