可以在Highcharts中用鼠标缩放

Question

是否可以像谷歌地球一样用鼠标放大高图？

有代码吗？

Answer 1

Highcharts鼠标滚轮缩放可以通过将Highmap作为模块包含在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>

Answer 2

现在看来这是可能的，请参阅下面xendi的答案

这是最初的答案。

---

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

Highchart网站上的缩放概念页面显示

使用鼠标指针，通过在图表中拖动一个矩形来执行缩放。与捏缩放不同，用户不能平移缩放后的区域，但必须缩小后再放大新区域。

在触摸设备上，用户可以通过捏图表区域进行缩放。在这些设备上，用户还可以通过用一根手指在图表上平移来移动缩放区域。

这些是你唯一的官方选择。有一个活跃的用户语音功能请求，但早在2011年（4年前）就提出了。我认为你运气不好。