Angular中Chart.js图表X轴下方区域点击事件失效问题

问题分析 #

Chart.js 默认仅在图表绘图区域（即数据点、线条覆盖的区域）触发onClick事件，X轴下方的标题、空白区域不在默认交互范围内；同时ng-charts封装的(chartClick)事件也仅监听绘图区的点击行为，导致该区域点击无响应。

解决步骤 #

1. 监听Canvas原生点击事件 #

放弃仅依赖Chart.js的onClick或ng-charts的(chartClick)，直接给canvas绑定原生点击事件，确保覆盖整个画布区域：

修改HTML代码：

<div style="width:700px; height: 250px;">
  <canvas id="myChart" style="width:400px; height: 200px;" #mychart
          (click)="handleCanvasClick($event)">
  </canvas>
</div>

2. 在组件中处理点击逻辑 #

在TS代码中，通过Chart.js的API计算点击位置是否属于X轴相关区域，并获取对应标签：

import { Chart, getRelativePosition } from 'chart.js';

// ... 组件其他代码

this.canvas = this.mychart.nativeElement;
this.ctx = this.canvas.getContext('2d');
// 将Chart实例保存为组件类属性，方便在点击事件中访问
this.subPerf = new Chart(this.ctx, {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
      label: 'My Dataset',
      backgroundColor: "rgba(255, 99, 132,0.4)",
      borderColor: "rgb(255, 99, 132)",
      fill: true,
      data: [10, 12, 6, 5, 11, 7, 9]
    }]
  },
  options: {
    responsive: true,
    scales: {
      // Chart.js 3.x中x轴ID默认是'x'，替换原代码的xAxis
      x: {
        grid: {
          display: false,
          drawBorder: false
        },
        title: {
          display: true,
          text: "ss",
        },
      },
      // Chart.js 3.x中y轴ID默认是'y'，替换原代码的yAxis
      y: {
        grid: {
          display: false,
          drawBorder: false,
        },
        title: {
          display: true,
          text: "jj",
        },
      },
    },
  }
});

// 处理canvas点击事件
handleCanvasClick(event: MouseEvent) {
  if (!this.subPerf) return;

  const canvasPosition = getRelativePosition(event, this.subPerf);
  const xScale = this.subPerf.scales.x;
  
  // 判断点击位置是否在X轴的垂直范围内（包括标签和标题区域）
  if (canvasPosition.y >= xScale.top && canvasPosition.y <= xScale.bottom) {
    // 获取对应的X轴标签索引
    const xIndex = xScale.getValueForPixel(canvasPosition.x);
    if (xIndex !== null && xIndex >= 0 && xIndex < this.subPerf.data.labels.length) {
      const clickedLabel = this.subPerf.data.labels[xIndex];
      console.log(`点击了X轴区域，对应标签：${clickedLabel}，索引：${xIndex}`);
      // 这里添加你的业务逻辑
    } else {
      console.log("点击了X轴空白区域");
    }
  }
}

3. 关键修正点 #

• Chart.js 3.x版本中，轴的配置键从xAxis/yAxis改为x/y，原代码的scales.xAxis会导致无法正确获取轴对象；
• 将Chart实例保存为组件类属性（this.subPerf），方便在点击事件中访问；
• 通过xScale.top和xScale.bottom判断点击位置是否落在X轴的垂直覆盖区域，包含标签、标题及下方空白。

验证效果 #

点击X轴下方的区域（标题或标签区域）时，控制台会输出对应的标签信息，说明点击事件已正常触发。

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