はじめに
Highchartsは商用利用では有償になりますが、様々なパターンがあらかじめ用意されており、
簡単にグラフを描くことが出来ます。
今回、Highchartsの機能であるZoomを使った際に、Zoom後のX軸の値を取得したかったのですが、
ちょっと手間取ってしまったので参考までに記載しておきます。
（もっと簡単な取り方があるような気がしますが...）
LINE(線)グラフを描く
下記のような記述で簡単にグラフが描画できます。
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="graph"></div>
<script>
Highcharts.chart('graph', {
chart: {
type: 'line'
},
title: {
text: 'TEST LINE'
},
xAxis: {
categories: ['201801', '201802', '201803', '201804', '201805', '201806', '201807', '201808', '201809', '201810']
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'TEST1',
data: [2000,2040,1910,2030,2070,2230,2410,2070,1980,1910]
}, {
name: 'TEST2',
data: [2860,3110,2770,1870,1730,1440,1750,1910,2140,2560]
}]
});
</script>
</body>
</html>
Zoomの設定
下記の1行追記することでZoomが有効になります。
(今回はx軸を対象)
<script>
Highcharts.chart('graph', {
chart: {
type: 'line',
zoomType: 'x' // ← ココ
},
title: {
text: 'TEST LINE'
},
xAxis: {
※ 上記例は範囲を選択すると 201805 - 201810の区間にズームされる
eventsの設定
Zoom後のX軸の値を取得するためtickPositionsを取得しticksのlabel.textStrの値を
下記の2イベントで取得して見てみる。chart.eventsマニュアル
- events.selectionの場合（初めはこれで取れると思ってた...）
Highcharts.chart('graph', {
chart: {
type: 'line',
zoomType: 'x',
events: {
selection: function(e){
console.log(e);
var aTicksP = e.target.xAxis[0].tickPositions;
var aTicksV = e.target.xAxis[0].ticks;
for(let i in aTicksP) {
console.log(aTicksV[aTicksP[i]].label.textStr);
}
}
}
},
title: {
結果：
選択範囲外のX軸値もすべて返ってきてしまったのでNG
- events.redrawの場合
Highcharts.chart('graph', {
chart: {
type: 'line',
zoomType: 'x',
events: {
redraw: function(e){
console.log(e);
var aTicksP = e.target.xAxis[0].tickPositions;
var aTicksV = e.target.xAxis[0].ticks;
for(let i in aTicksP) {
console.log(aTicksV[aTicksP[i]].label.textStr);
}
}
}
},
title: {
結果：
範囲内の値が返ってきたのでひとまずよしっ！
まとめ
selectionイベントでは、アクション時点の値が取れるみたいですね。
また、Highchartsでグラフの範囲選択が出来るのはいろいろ使い道がありそうです。