如何将highchart导航器和图形集中到结果集的一部分

Question

我通过php运行highchart，并通过php/sql提供highchart图形输入。不过，我很感兴趣的是能够将图形的视图集中(限制(到完整图形的一部分，例如在刷新后。

我主要使用折线图。例如，我经常生成30天的数据，然后使用缩放功能/导航器缩放到图形的各个部分。然后我点击一个"点"，我的问题是这会刷新我的浏览器，完成后我必须再次放大。

我的想法是，如果你能够存储一个cookie或类似的东西来识别焦点的图形视图(开始/结束(，并且你能够为定义缩放的highchart设置一个变量(例如结果集的开始/结束等(，那么我就能够解决我的挑战(因为我可以通过php生成highchart代码(。

好吧，我希望你能理解我的问题，我期待着收到大家的来信：(

干杯Nikolaj

Answer 1

您可以通过将图表x-axis极值保存在本地存储中或作为cookie来实现您的期望。加载图表时，检查cookie，如果存在，则设置x轴极值。查看下面发布的最低演示。

代码：

function saveExtremes(min, max) {
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = `minX=${min}; ${expires}`;
document.cookie = `maxX=${max}; ${expires}`;
}
function getExtremes() {
var cookies = document.cookie.split('; '),
min,
max;
cookies.forEach(function(cookie) {
if (cookie.indexOf('minX=') !== -1) {
min = +(cookie.replace('minX=', ''));
} else if (cookie.indexOf('maxX=') !== -1) {
max = +(cookie.replace('maxX=', ''));
}
});
return {
min,
max
}
}
var chart = Highcharts.chart('container', {
chart: {
events: {
load: function() {
var chart = this,
extremes = getExtremes(),
H = Highcharts;
if (H.defined(extremes.min) && H.defined(extremes.max)) {
chart.xAxis[0].setExtremes(extremes.min, extremes.max);
}
setTimeout(function() {
chart.xAxis[0].setExtremes(2, 5);
}, 2000);
}
}
},
series: [{
data: [
439,
525,
571,
696,
970,
119,
137,
154
]
}, {
data: [
234,
123,
444,
322,
543,
657
]
}],
});
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var extremes = chart.xAxis[0].getExtremes();
saveExtremes(extremes.min, extremes.max);
});

演示：

• https://jsfiddle.net/BlackLabel/06jmz5ve/1/