在ChartJS中能否仅监听x轴标签的点击事件？

云上老周

2026-10-3

Chart.js 实现X轴标签专属点击事件的方案

是可以实现的，核心通过Chart.js内置的坐标判定能力即可完成，仅响应X轴标签区域的点击，不会触发其他区域的点击逻辑：

实现步骤

在图表配置的options参数中添加全局onClick回调
回调内先获取点击坐标对应的画布相对位置，再和X轴的渲染坐标范围做匹配，仅当点击落在X轴区域内时才执行后续逻辑
匹配成功后可直接获取点击对应的标签文本、索引等信息，用于后续业务逻辑开发

参考代码

const myChart = new Chart(canvasDom, {
  type: 'bar', // 按需替换为你的图表类型
  data: chartData, // 你的图表数据
  options: {
    onClick: (event) => {
      // 计算点击位置在画布内的相对坐标
      const clickPos = Chart.helpers.getRelativePosition(event, myChart);
      const xScale = myChart.scales.x;
      // 判定点击是否落在X轴的渲染范围内
      const isClickXAxis = 
        clickPos.x >= xScale.left && 
        clickPos.x <= xScale.right &&
        clickPos.y >= xScale.top &&
        clickPos.y <= xScale.bottom;
      if (isClickXAxis) {
        // 获取点击位置对应的标签索引和文本
        const labelIndex = xScale.getValueForPixel(clickPos.x);
        const clickedLabel = xScale.getLabelForValue(labelIndex);
        // 此处写入你自己的业务逻辑即可
        console.log('点击的X轴标签：', clickedLabel, '索引：', labelIndex);
      }
    }
  }
});