可以在 Highcharts 中用鼠标缩放吗？

Question

是否可以像在 Google 地球中那样用鼠标放大图表？

有代码吗？

Answer 1

现在看来这是可能的，参见。

这是原答案。

没有。不像你描述的那样。

With a mouse pointer, the zooming is performed by dragging out a rectangle in the chart. Unlike pinch zooming, the user can't pan the zoomed area, but has to zoom out then in again on a new area.

On touch devices, the user can zoom by pinching in the chart area. On these devices, the user may also move the zoomed area by panning with one finger across the chart.

这些是您仅有的官方选项。有一个活跃的 user voice feature request，但那是在 2011 年（4 年前）制作的。我觉得你运气不好。

Answer 2

Highcharts 鼠标滚轮缩放可以通过将 Highmaps 作为一个模块包含在 Highcharts 中来实现。

$(function() {
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {

    $('#container').highcharts({
      chart: {
        panning: true
      },
      mapNavigation: {
        enabled: true,
        enableButtons: false
      },
      title: {
        text: 'USD to EUR exchange rate over time'
      },
      subtitle: {
        text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: 'Exchange rate'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
            ]
          },
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },

      series: [{
        type: 'area',
        name: 'USD to EUR',
        data: data
      }]
    });
  });
});

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

可以在 Highcharts 中用鼠标缩放吗？

Is possible to zoom with mouse in Highcharts?

highcharts