ApexCharts中如何禁用滚轮缩放功能？

你只需要在图表配置的chart.zoom选项中，禁用滚轮缩放的同时保持缩放功能整体开启，就能实现需求。

修改后的完整代码如下：

import ApexCharts from "apexcharts";

var options = {
  chart: {
    type: "line",
    zoom: {
      enabled: true, // 保留缩放功能
      type: 'x', // 仅针对X轴缩放，需同时缩放XY轴可改为'xy'
      wheel: {
        enabled: false // 禁用滚轮触发的缩放
      },
      toolbar: {
        enabled: true // 确保区域选择缩放的工具栏按钮正常显示
      }
    }
  },
  series: [
    {
      name: "sales",
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    },
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

关键配置说明 #

• zoom.enabled: true：开启图表的缩放功能，这是保留区域选择缩放的前提
• wheel.enabled: false：直接关闭滚轮触发的缩放行为
• type: 'x'：设置缩放的作用轴，这里指定为X轴，适合折线图的时间/分类轴缩放场景；如果需要同时缩放XY轴，可将值改为'xy'
• toolbar.enabled: true：确保图表顶部工具栏的区域选择按钮可见，用户点击后即可框选区域进行缩放

内容的提问来源于stack exchange，提问作者gespinha