チャートライブラリの使い方（6）「グラフを拡大/縮小する」
hifiveのチャートライブラリの使い方を紹介します。今回はグラフの拡大表示、縮小表示の仕方です。
ベースはチャートライブラリの使い方（1）「基本編」 | hifive開発者ブログのグラフになります。
実行しているところは下記の通りです。こちらのURLにてサンプルを試せます。
幅と高さをコントローラの変数へ移行
チャートの幅と高さを動的に変更するので、設定をコントローラの変数にします。これによりイベントから操作しやすくなります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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を次のように修正します。拡大、および縮小ボタンを追加します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="chart" ></div> | |
| <p> | |
| <button id="expand"> | |
| 拡大 | |
| </button> | |
| <button id="shrink"> | |
| 縮小 | |
| </button> | |
| </p> |
ボタンを押した時のイベントを追加
ボタンを押した時のイベントを設定します。それぞれチャートコントローラの setChartSetting を実行します。拡大（#expand）の場合はサイズを2倍に、縮小（#shrink）の場合は1/2にして大きさを適用します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "#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のチャートライブラリを使って、分かりやすいグラフを提供してください。
hifive開発者ブログ 
コメントは受け付けていません。