如何禁用数值折线图的xAxis十字准线吸附功能？

云原生阿岚

2026-7-4

解决ApexCharts十字准线吸附数据点的控制问题

在ApexCharts里，十字准线是否吸附到数据点，是通过xAxis/yAxis的crosshairs配置中的snap属性来控制的。默认情况下，数值型x轴的snap为true（自动吸附），而y轴默认是false（不吸附），这就是你看到x轴有吸附效果、y轴没有的原因。

具体配置方法：

开启y轴十字准线吸附：在yaxis.crosshairs里添加snap: true
禁用x轴十字准线吸附：在xaxis.crosshairs里添加snap: false

修改后的完整配置示例：

const chartOptions = {
  chart: {
    id: 'apex-line',
    type: 'line',
    toolbar: {
      tools: {
        selection: false,
        zoomin: false,
        zoomout: false
      }
    },
    zoom: {
      enabled: true,
      type: 'xy',
      autoScaleYaxis: true
    }
  },
  markers: {
    size: 4,
    hover: {
      sizeOffset: 6
    }
  },
  stroke: {
    curve: 'straight'
  },
  xaxis: {
    type: 'numeric',
    crosshairs: {
      show: true,
      position: 'back',
      // 可选：禁用x轴吸附，设为false即可
      snap: true, 
      stroke: {
        color: '#b6b6b6',
        width: 1,
        dashArray: 0
      }
    },
    tooltip: {
      enabled: true,
      offsetX: 0
    }
  },
  yaxis: {
    show: true,
    labels: {
      show: true,
      align: 'left'
    },
    crosshairs: {
      show: true,
      position: 'back',
      // 开启y轴十字准线吸附
      snap: true, 
      stroke: {
        color: '#b6b6b6',
        width: 1,
        dashArray: 0
      }
    },
    tooltip: {
      enabled: true,
      offsetX: 0
    }
  }
}