以编程方式缩放Highcharts图表

Question

在这个JSFiddle演示中，我有两个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"事件触发另一个"aftersetExtreme"事件。通过设置一个状态变量，可以很容易地防止这种情况发生。

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

var updating = false;

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

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

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

编辑：最初的JSFiddle甚至产生了控制台错误"超过了最大调用堆栈大小"。下次你可能想找这样的东西。

编辑：在使用"重置缩放"按钮后，您仍然需要找到隐藏这些按钮的解决方案。