以編程方式放大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甚至還製作了控制檯錯誤「超出最大調用堆棧大小」。下次你可能想要尋找那樣的東西。

編輯：您仍然需要找到一個解決方案，在使用後隱藏「重置縮放」按鈕。