highcharts обработчик событий для StockChart

Question

Я смотрел http://api.highcharts.com/highstock#chart.events. Я хочу, чтобы обработчик события регистрировал событие, когда есть изменение в диапазоне дат. Это изменение даты должно быть зафиксировано для всех изменений даты. Напр. когда нажата кнопка в диапазоне «Выбор» или когда дата вводится с помощью выбора даты или любого другого изменения на графике из-за изменения диапазона дат. Мне нужен Highcharts.dateFormat ('% Y-% m-% d', event.xAxis [0] .min) и Highcharts.dateFormat ('% Y-% m-% d', event.xAxis [0] .max), которые должны быть переданы обработчику событий. Это должно показать дополнительный график с новым диапазоном дат, который был выбран. С уважением Джозеф

Answer 1

Вы можете использовать load события на графике, а затем определить обработчик для rangeSelector кнопок:

chart : { 
      events: { 
       load: function() { 
        var chart = this; 
        var buttons = this.rangeSelector.buttons; 

        buttons[0].on('click', function (e) { 
         alert(Highcharts.dateFormat('%Y-%m-%d',chart.xAxis[0].min)); 
         alert(Highcharts.dateFormat('%Y-%m-%d',chart.xAxis[0].max)); 
        }); 
       } 
      } 
     } 

Это для первой кнопки на rangeSelector: DEMO

You затем можно добавить обработчики для всех кнопок

EDIT:

Как Sebastian Bochan сказал, вы можете использовать afterSetExtremes и setExtremes события, он проверяет каждое действие, которое изменяет диапазон в таблице, включая entering a date or dragging the cursor to select a date range.

Но нижняя сторона - это когда вы используете навигатор dragging, поскольку он не дожидается, пока вы отпустите кнопку мыши и не запустите событие для каждой смены точки в диапазоне. Если вы не против этого, то это будет отличным решением для вас: DEMO

Answer 2

Вы можете поймать setExtremes/afterSetExtremes

Answer 3

Спасибо за ответ на мой вопрос я пытался отправить входы на второй диаграмме, что Я был на моем месте вместе с StockChart на той же странице. Мне нужна координата оси x, которую я даю в качестве элементов формы для моего второго графика, если что-то изменилось в выборе даты в StockChart. В качестве моего решения я использовал следующий код.

chart: { 
          events: { 
           redraw: function (e) { 
            fromDateStockChart=Highcharts.dateFormat('%Y-%m-%d',this.xAxis[0].min); 
            toDateStockChart=Highcharts.dateFormat('%Y-%m-%d',this.xAxis[0].max); 
            /*console.log('fromDateStockChart='+fromDateStockChart 
              +' toDateStockChart'+toDateStockChart);*/ 
              form = document.searchFilters; 
              form.date_from.value = fromDateStockChart; 
              form.date_to.value = toDateStockChart; 
           } 
          } 
         } 

С уважением Джозеф

Answer 4

Вы должны посмотреть этот пример http://jsfiddle.net/ag2a5q4w/1/

$('#container').highcharts('StockChart', { 

     xAxis : { 
      events: { 
       afterSetExtremes: function() { 
         alert(Highcharts.dateFormat('%Y-%m-%d',this.min)); 
         alert(Highcharts.dateFormat('%Y-%m-%d',this.max)); 
       } 
      } 
     }, 

     rangeSelector : { 
      selected : 1 
     }, 

     title : { 
      text : 'AAPL Stock Price' 
     }, 

     series : [{ 
      name : 'AAPL', 
      data : data, 
      tooltip: { 
       valueDecimals: 2 
      } 
     }] 
    })