выбор перемещения графика HighStock на клавиатуре нажатие клавиши со стрелкой

Question

Мне нравится прокручивать график клавишей со стрелкой на клавиатуре. Я добавил событие, но оно не работает.

этот код я пробовал, но не работает

$(document).keydown(function (eventObject) {
    if(eventObject.keyCode == 37 || eventObject.keyCode == 39){
      $($('.highcharts-scrollbar-button')[0]).trigger( "click" );
    }
});

Это график, на котором мне нравится прокручивать область масштабирования клавишей со стрелкой на клавиатуре.

http://jsfiddle.net/z4kgsfnp/64/

Answer 1

Вы можете использовать setExtremes(), чтобы решить, что будет отображаться на графике в старших графиках. В сочетании с getExtremes() вы можете получить текущий масштаб и установить новую увеличенную область на основе этого. Как это:

$(document).keydown(function(eventObject) {
  let chart = $('#container').highcharts().xAxis[0]
  let extremes = chart.getExtremes()
  let zoomLevel = extremes.max - extremes.min
  if (eventObject.keyCode == 37 && extremes.max - zoomLevel > extremes.dataMin) {
    chart.setExtremes(extremes.min - zoomLevel, extremes.min)
  } else if (eventObject.keyCode == 39 && extremes.min + zoomLevel < extremes.dataMax) {
    chart.setExtremes(extremes.max, extremes.max + zoomLevel, extremes.min)
  }
});

$(function() {
  var delta = 0;
  $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
    // Create the chart
    $('#container').highcharts('StockChart', {
      chart: {
        events: {
          load: function() {
            // this is always constant after the chart is loaded
            delta = this.scroller.navigatorGroup.getBBox().height + 30;
          }
        }
      },

      rangeSelector: {
        selected: 1
      },

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

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

    });
  });

});
$(document).keydown(function(eventObject) {
  let chart = $('#container').highcharts().xAxis[0]
  let extremes = chart.getExtremes()
  let zoomLevel = extremes.max - extremes.min
  if (eventObject.keyCode == 37 && extremes.max - zoomLevel > extremes.dataMin) {
    chart.setExtremes(extremes.min - zoomLevel, extremes.min)
  } else if (eventObject.keyCode == 39 && extremes.min + zoomLevel < extremes.dataMax) {
    chart.setExtremes(extremes.max, extremes.max + zoomLevel, extremes.min)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="clip" style="height: 500px; overflow: hidden;">
  <div id="container" style="height: 500px; min-width: 500px"></div>
</div>

Пример работы JSFiddle: http://jsfiddle.net/ewolden/z4kgsfnp/88/