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，因为你告诉＆＃34; afterSetExtremes＆＃34;事件触发另一个＆＃34; afterSetExtremes＆＃34;事件。您可以通过使用状态变量来轻松防止这种情况。

这就是为什么我介绍这个：

var updating = false;

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

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

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

编辑：原来的JSFiddle甚至产生了一个控制台错误＆＃39;最大调用堆栈大小超过＆＃39;。下次你可能想找那样的东西。

修改：你仍然需要找到隐藏“重置缩放”的解决方案。他们被使用后的按钮。

以编程方式缩放Highcharts图表

1 个答案: