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

by moongift : 2017/04/25

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

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

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

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

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

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

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

From → hifive

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