HighChartでZoomをした際に、y,x軸の範囲が動的にそれっぽい範囲をとるようにする
のがわからなかったので、
zoom後にデフォルトでResetボタンが出てくるが、それだけだとリセットした後の範囲が初期状態に戻らないので、別で関数が必要
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Zoom Example</title>
<!-- Highcharts CDN -->
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="height: 400px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// サンプルデータ
var data = [];
for (var i = 0; i < 100; i++) {
data.push(Math.sin(i * 0.1));
}
// 初期の横軸範囲
var initialXAxisRange = {
min: 0,
max: 100
};
// Highcharts チャートの設定
var chart = Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: {
events: {
afterSetExtremes: function (e) {
// ズーム後の最小と最大の横軸値
var min = e.min;
var max = e.max;
// ここに横軸範囲を動的に変更するための処理を追加します
// 例: 最小値と最大値の間を特定の範囲に制限する
if (max - min > 100) {
chart.xAxis[0].setExtremes(min, min + 100);
}
}
}
},
series: [{
data: data
}],
// Reset Zoom ボタンの設定
navigation: {
buttonOptions: {
theme: {
style: {
visibility: 'visible' // ボタンを最初は表示にする
}
}
}
},
// 初期の横軸範囲を設定
xAxis: {
min: initialXAxisRange.min,
max: initialXAxisRange.max
}
});
// リセットボタンが押されたときの処理
document.getElementById('resetButton').addEventListener('click', function () {
// 初期の横軸範囲に戻す
chart.xAxis[0].setExtremes(initialXAxisRange.min, initialXAxisRange.max);
});
});
</script>
<!-- リセットボタン -->
<button id="resetButton">Reset Zoom</button>
</body>
</html>
TickIntervalとかで一生懸命処理作ってしようとしたのに、minとmaxでなるんかーい
xAxis: {
events: {
afterSetExtremes: function (e) {
// ズーム後の最小と最大の横軸値
var min = e.min;
var max = e.max;
// ここに横軸範囲を動的に変更するための処理を追加します
// 例: 最小値と最大値の間を特定の範囲に制限する
if (max - min > 100) {
chart.xAxis[0].setExtremes(min, min + 100);
}
}
}
},
リセットボタンの処理
デフォルトでzoomの後にリセットボタンが出てくるが、そのままだと、初期状態の範囲に変更できないのでminとmaxを設定しておく
// リセットボタンが押されたときの処理
document.getElementById('resetButton').addEventListener('click', function () {
// 初期の横軸範囲に戻す
chart.xAxis[0].setExtremes(initialXAxisRange.min, initialXAxisRange.max);
});
});
<!-- リセットボタン -->
<button id="resetButton">Reset Zoom</button>