チャートライブラリの使い方(6)「グラフを拡大/縮小する」
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 // 変更 | |
}, |
HTMLを修正
HTMLを次のように修正します。拡大、および縮小ボタンを追加します。
<div id="chart" ></div> | |
<p> | |
<button id="expand"> | |
拡大 | |
</button> | |
<button id="shrink"> | |
縮小 | |
</button> | |
</p> |
ボタンを押した時のイベントを追加
ボタンを押した時のイベントを設定します。それぞれチャートコントローラの 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 | |
}); | |
}, |
これらの変更によってチャートの拡大/縮小が可能になります。大量のデータがある時に拡大して細かく分析したり、逆に縮小することでトレンドが分かりやすくなります。hifiveのチャートライブラリを使って、分かりやすいグラフを提供してください。
コメントは受け付けていません。