zoom a Highcharts chart programatically

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, что другая диаграмма оказанной. Это поведение почти работает, но есть несколько небольших проблем:

• После увеличения в, серой зоне затенения, который используется, чтобы выбрать область для увеличения не исчезает в 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/

Edit: Оригинальный JSFiddle даже произвел Ошибка консоли «Максимальный размер стека вызовов». В следующий раз вы, вероятно, захотите найти такие вещи.

Редактировать: вам по-прежнему необходимо найти решение для скрытия кнопок 'reset zoom' после их использования.