以编程方式缩放 Highcharts 图表答案

【问题标题】：zoom a Highcharts chart programmatically以编程方式缩放 Highcharts 图表
【发布时间】：2014-10-16 16:08:43
【问题描述】：

在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();，但“重置缩放”按钮并未出现在其他图表中

【问题讨论】：

标签： javascript highcharts

【解决方案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 甚至产生了一个控制台错误“超出了最大调用堆栈大小”。下次您可能想寻找类似的东西。

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

【讨论】：