javascript - 移动设备上的 Highchart(触摸缩小和放大)- LineChart

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

是的，通过将此逻辑添加到 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;
          }
        }
      }
    }
  }

演示:

• https://jsfiddle.net/BlackLabel/kotgea5n/
• https://jsfiddle.net/BlackLabel/s8w2xg3e/1/