javascript - 以编程方式缩放 Highcharts 图表

Question

在this JSFiddle demo我有 2 个 Highcharts 折线图。当其中一个图表缩放时，另一个图表应在同一区域放大。执行此操作的代码是

xAxis: {
    events: {
        afterSetExtremes: function (event) {
            var index = document.getElementById('container2').dataset.highchartsChart;
            var chartPartner = Highcharts.charts[index];
            chartPartner.xAxis[0].setExtremes(event.min, event.max);
            chartPartner.showResetZoom();
        }
    },
},

其中 container2 是另一个图表呈现到的 DOM 元素的 ID。这种行为几乎可以正常工作，但有几个小问题:

• 放大后，用于选择缩放区域的灰色阴影区域在 Firefox 中不会消失(我没有测试过其他浏览器)
• 尽管我调用了 chartPartner.showResetZoom();
，但“重置缩放”按钮并未出现在另一个图表中

Answer 1

您的问题是您在无限循环中调用了 setExtremes，因为您告诉“afterSetExtremes”事件触发另一个“afterSetExtremes”事件。您可以通过使用状态变量轻松避免这种情况。

这就是我介绍这个的原因:

var updating = false;

并将事件的最后一部分更改为:

if (!updating) {
    updating = true;
    chartPartner.xAxis[0].setExtremes(event.min, event.max);
    chartPartner.showResetZoom();
}

JSFiddle:http://jsfiddle.net/qq4wnyqo/1/

编辑:原始 JSFiddle 甚至产生了控制台错误“超出最大调用堆栈大小”。下次您可能想寻找类似的东西。

编辑:您仍然需要找到一种解决方案来隐藏使用后的“重置缩放”按钮。