Chart JS 3.5.1版本如何在onHover事件中获取数据集数值

问题原因与解决方案 #

你遇到的两个报错均为Chart.js 3.x版本的API调整导致：

1. getElementAtEvent 是2.x版本的旧API，3.x版本已经完全移除该方法，因此调用时报错。
2. 官方示例运行报错是因为未正确获取图表实例或scale ID配置不匹配。

以下是3.5.1版本下onHover事件获取数据集数值的正确实现：

var context = document.getElementById('canvas').getContext('2d')

var options = {
  // onHover回调固定接收三个参数：事件对象、命中的元素数组、当前图表实例
  onHover: function(evt, activeElements, chartInstance) {
    // 数组非空说明当前悬浮命中了符合交互规则的数据点
    if (activeElements.length) {
      // 你配置了index交互模式，数组内会包含当前索引下所有数据集的对应元素
      activeElements.forEach(el => {
        // 分别获取数据集索引、数据索引
        const datasetIndex = el.datasetIndex;
        const dataIndex = el.index;
        // 拿到对应标签、数据集信息、数值
        const currentLabel = chartInstance.data.labels[dataIndex];
        const currentDataset = chartInstance.data.datasets[datasetIndex];
        const currentValue = currentDataset.data[dataIndex];

        // 此处可编写你的业务逻辑
        console.log('当前悬浮数据：', {
          标签: currentLabel,
          数据集名称: currentDataset.label,
          数值: currentValue
        });
      })
    }
  },
  interaction: {
    mode: 'index',
    intersect: false,
  },
  plugins: {
    legend: {
      display: false,
    }
  },
  responsive: true,
  maintainAspectRatio: false
}

var myChart = new Chart(context, {
  type: 'line',
  data: {
    labels: obj.labels,
    datasets: [...]
  },
  options: options
})

补充说明：如果只需要取单条数据的话，直接取activeElements[0]即可，无需遍历数组。

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