Angular 5中Chart.js onclick调用getElementsAtEvent返回空数组问题

嘿，我碰到过类似的问题，帮你梳理几个可能的原因和解决办法：

1. 事件绑定时机不对，this.chart可能还没初始化 #

看你的代码顺序，你先给canvas绑了点击事件，之后才创建Chart实例。虽然理论上代码执行完this.chart会被赋值，但在一些复杂场景下（比如组件异步渲染）可能出问题。更靠谱的做法是等Chart实例创建完成后再绑定事件，或者直接用Chart.js自带的onClick配置项，这也是官方推荐的方式。

2. getElementsAtEvent已经被弃用了 #

在Chart.js v2及以后的版本里，getElementsAtEvent已经被标记为弃用，官方推荐用getElementsAtEventForMode来获取点击区域的元素，这个方法的兼容性和准确性更好。

3. 图表渲染有语法错误 #

你的backgroundColor值少了一个闭合的右引号：

backgroundColor: 'rgba(54, 162, 235, 0.2'

得改成：

backgroundColor: 'rgba(54, 162, 235, 0.2)'

这个小错误可能导致图表渲染异常，点击区域无法被正确识别，自然就返回空数组了。

给你修正后的代码示例 #

方法一：用Chart.js内置的onClick配置（推荐） #

这种方式不需要自己处理canvas事件，Chart.js会帮你做好坐标转换：

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: ["Browser", "Game", "Word Processing", "Database", "Spreadsheet", "Multimedia"],
    datasets: [{
      label: 'number of applications related to',
      data: [24, 10, 30, 20, 46, 78],
      backgroundColor: 'rgba(54, 162, 235, 0.2)', // 修复引号问题
      borderColor: 'rgba(54, 162, 235, 1)',
      pointHoverBackgroundColor: 'red',
      borderWidth: 1
    }]
  },
  options: {
    title: {
      text: "Application Logs",
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    // 直接在配置里加点击事件
    onClick: (event, elements) => {
      if (elements.length > 0) {
        const clickedElement = elements[0];
        const datasetIndex = clickedElement._datasetIndex;
        const dataIndex = clickedElement._index;
        const clickedData = this.chart.data.datasets[datasetIndex].data[dataIndex];
        const clickedLabel = this.chart.data.labels[dataIndex];
        console.log(`点击了【${clickedLabel}】，对应数据：${clickedData}`);
      } else {
        console.log("点击了图表空白区域");
      }
    }
  }
});

方法二：坚持绑定canvas点击事件的修正版 #

如果一定要自己绑canvas事件，记得等Chart实例创建好再绑，并且用新的方法：

var canvas = this.el;
// 先创建Chart实例
this.chart = new Chart('canvas', { /* 上面的配置内容 */ });

// 实例创建完成后再绑定点击事件
canvas.onclick = (event) => {
  // 用getElementsAtEventForMode替代旧方法
  const elements = this.chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
  console.log(elements);
  if (elements.length > 0) {
    // 这里可以处理点击到的数据
  }
};

小提示 #

• getElementsAtEventForMode的参数分别是：事件对象、匹配模式（常用'nearest'表示找最近的元素）、配置项、是否使用全局坐标。
• 建议把Chart.js升级到最新版本，旧版本可能存在一些事件处理的bug。

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