如何在ChartJS的点击事件中获取被点击饼图对应的标签与数值

报错原因 #

饼图属于极坐标类型图表，不存在笛卡尔坐标系下的x、y轴，你调用的e.chart.scales.x本身是未定义的空值，调用其方法自然触发类型错误。ChartJS内置的onClick回调已经提供了点击元素的直接入参，不需要自行计算坐标获取索引。

正确实现代码 #

你可以直接使用onClick回调默认的三个入参实现需求，无需额外依赖外部变量：

onClick: (e, activeElements, chartInstance) => {
  // 仅点击到饼图区块时执行逻辑
  if (activeElements.length === 0) return;

  const targetEl = activeElements[0];
  const dataIndex = targetEl.index;
  const datasetIndex = targetEl.datasetIndex;

  // 获取对应标签和数值
  const clickedLabel = chartInstance.data.labels[dataIndex];
  const clickedValue = chartInstance.data.datasets[datasetIndex].data[dataIndex];

  // 这里可以写你自己的业务逻辑
  console.log('标签：', clickedLabel, '数值：', clickedValue);
}

逻辑说明 #

• activeElements是点击触发时，命中的所有可交互图表元素集合，饼图场景下每次点击最多命中1个区块，数组长度为1，点击空白区域时数组为空
• 元素的index属性对应labels数组和数据集data数组的下标，datasetIndex对应你配置的datasets数组下标，单数据集场景下该值固定为0

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