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/

highstock图表在键盘上按箭头移动选择

1 个答案: