以编程方式放大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甚至还制作了控制台错误“超出最大调用堆栈大小”。下次你可能想要寻找那样的东西。

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