コンテンツへスキップ

チャートライブラリの使い方(6)「グラフを拡大/縮小する」

by : 2017/04/25

hifiveのチャートライブラリの使い方を紹介します。今回はグラフの拡大表示、縮小表示の仕方です。

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

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

幅と高さをコントローラの変数へ移行

チャートの幅と高さを動的に変更するので、設定をコントローラの変数にします。これによりイベントから操作しやすくなります。


var pageController = {
__name: 'ui.chart.pageController',
:
_width: 600, // 追加
_height: 480, // 追加
__ready: function(context) {
:
this._chartController.draw({
chartSetting: {
width: this._width, // 変更
height: this._height // 変更
},

view raw

index.html

hosted with ❤ by GitHub

HTMLを修正

HTMLを次のように修正します。拡大、および縮小ボタンを追加します。


<div id="chart" ></div>
<p>
<button id="expand">
拡大
</button>
<button id="shrink">
縮小
</button>
</p>

view raw

index.js

hosted with ❤ by GitHub

ボタンを押した時のイベントを追加

ボタンを押した時のイベントを設定します。それぞれチャートコントローラの setChartSetting を実行します。拡大(#expand)の場合はサイズを2倍に、縮小(#shrink)の場合は1/2にして大きさを適用します。


"#expand click": function() {
this._setChartSetting(this._width *= 2, this._height *= 2);
},
"#shrink click": function() {
this._setChartSetting(this._width /= 2, this._height /= 2);
},
_setChartSetting: function(width, height) {
this._chartController.setChartSetting({
width: width,
height: height
});
},

view raw

index.js

hosted with ❤ by GitHub


これらの変更によってチャートの拡大/縮小が可能になります。大量のデータがある時に拡大して細かく分析したり、逆に縮小することでトレンドが分かりやすくなります。hifiveのチャートライブラリを使って、分かりやすいグラフを提供してください。

今回のデモ

banner_02

From → hifive

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

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