ChartJS 4.3.0如何处理X轴的onClick点击事件？

ChartJS 4.x确实没有直接提供X轴专属的onClick配置项，但可以通过图表全局点击事件结合轴的像素位置计算来实现需求，具体操作如下：

• 监听图表全局点击事件
  初始化图表时，在options中配置onClick回调函数，该函数会接收点击事件对象和图表实例两个参数。

• 判断点击位置是否在X轴区域
  通过图表实例的scales.x（多轴场景替换为对应轴ID）获取X轴的像素范围：top、bottom、left、right，对比点击事件的clientX、clientY值，判断是否点击在X轴区域内。

• 获取点击对应的X轴刻度值
  使用chart.scales.x.getValueForPixel(event.clientX)方法，将点击的水平像素坐标转换为对应的X轴刻度值，进而执行自定义逻辑。

完整代码示例 #

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: '示例数据',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: '#36A2EB',
      tension: 0.1
    }]
  },
  options: {
    onClick: (event, elements, chart) => {
      const xAxis = chart.scales.x;
      // 判断点击位置是否处于X轴的垂直范围
      const isClickOnXAxis = event.clientY >= xAxis.top && event.clientY <= xAxis.bottom;
      
      if (isClickOnXAxis) {
        // 获取点击位置对应的X轴刻度值
        const clickedLabel = xAxis.getValueForPixel(event.clientX);
        // 执行自定义点击逻辑
        console.log('点击X轴刻度：', clickedLabel);
        alert(`点击了X轴刻度：${clickedLabel}`);
      }
    }
  }
});

补充说明 #

• 若图表存在多X轴（如scales.x1、scales.x2），只需将代码中的chart.scales.x替换为目标轴的ID即可。
• 若需要精准定位到X轴的单个标签而非整个轴区域，可以结合xAxis.getLabelForValue方法或遍历轴的labels数组，通过像素位置进一步匹配标签范围。

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