移动设备上的 Highchart（触摸可缩小和放大）- 折线图

Question

我正在尝试在移动设备的折线图中应用 ZoomIn 和 ZoomOut。目标是单击图表的区域，第一次单击放大，第二次单击缩小。顺序永远是这个。

我已经看到了文档/示例，但我找不到解决这种情况的方法。

我已经在 chart: 属性

中尝试使用此属性

pinchType : 'y',
zoomType: 'none'

我尝试了 zoomtype 但行为不是我所期望的。我想要点击放大图表的这个特定区域。我不想用两根手指缩放。

{
    chart: {
        pinchType : 'x'
    },
    legend: {
        itemStyle: {
            color: '#fff'
        }
    },
    plotOptions: {
        series: {
            animation: {
                duration: 2000
            }
        }
    },
    xAxis: {
        tickInterval: 1
    },
    series: [
        {
            type: 'spline',
            color : '#fff'
        },
        {
            dashStyle: 'longdash',
            color: '#b3be77'
        }
    ],
}

只需单击即可放大和缩小

Answer 1

默认情况下，此功能未在 Highcharts 中实现，但您可以通过在单击图表区域时添加自定义逻辑轻松实现。

第一次点击区域时使用axis.setExtremes()方式放大。第二次点击时使用chart.zoomOut()方式缩小图表。检查下面发布的演示和代码。

代码：

  chart: {
    events: {
      load: function() {
        this.clickedOnce = false;
      },
      click: function(e) {
        const chart = this,
          yAxis = chart.yAxis[0],
          xAxis = chart.xAxis[0];

        let x,
          y,
          rangeX,
          rangeY;

        if (!chart.clickedOnce) {
          x = xAxis.toValue(e.chartX);
          y = yAxis.toValue(e.chartY);
          rangeX = xAxis.max - xAxis.min;
          rangeY = yAxis.max - yAxis.min;

          xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
          yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
          chart.redraw();

          chart.clickedOnce = true;
        } else {
          chart.zoomOut();
          chart.clickedOnce = false;
        }
      }
    }
  }

演示：

https://jsfiddle.net/BlackLabel/fxm812k4/

API参考：

使用 customEvents 插件（参见：https://github.com/blacklabel/custom_events）并在整个图表区域添加 plotBand，您可以注册点击和双击事件的回调。使用这种方法，您可以放大点击事件并缩小双击（不适用于移动设备）。

演示：

https://jsfiddle.net/BlackLabel/6tpb5q2z/

Answer 2

是的，通过将此逻辑添加到 plotOptions.series.events.click 回调函数可以轻松实现第二个挑战：

  chart: {
    events: {
      load: function() {
        this.clickedOnce = false;
      },
      click: function() {
        const chart = this;

        if (chart.clickedOnce) {
            chart.zoomOut();
          chart.clickedOnce = false;
        }
      }
    }
  },
  plotOptions: {
    series: {
      events: {
        click: function(e) {
          const chart = this.chart,
            yAxis = chart.yAxis[0],
            xAxis = chart.xAxis[0];

          let x,
            y,
            rangeX,
            rangeY;

          if (!chart.clickedOnce) {
            x = xAxis.toValue(e.chartX);
            y = yAxis.toValue(e.chartY);
            rangeX = xAxis.max - xAxis.min;
            rangeY = yAxis.max - yAxis.min;

            xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
            yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
            chart.redraw();

            chart.clickedOnce = true;
          } else {
            chart.zoomOut();
            chart.clickedOnce = false;
          }
        }
      }
    }
  }

演示：

移动设备上的 Highchart（触摸可缩小和放大）- 折线图

Highchart on mobile (Touch to zoom out and zoom in) - LineChart

javascript

mobile

zooming

highcharts