如何在Angular 9的Chart.js柱状图中获取点击的数据集与标签值？

实现思路 #

利用Chart.js点击事件返回的active元素，通过datasetIndex和index定位到对应的数据集与数值：

• 数据集名称（如MBT）可从对应数据集的stack属性获取（初始化时已将stack设置为operatorName）
• 数值可从数据集的data数组中通过index提取

修改后的点击事件代码 #

/*On click logic */
chartClicked(event: any) {
  // 获取点击的第一个激活元素
  const activeElement = event.active[0];
  if (!activeElement) return;

  const { datasetIndex, index } = activeElement;
  // 获取对应的数据集
  const targetDataset = this.barChartData[datasetIndex];
  // 获取operatorName（即stack属性值）
  const operatorName = targetDataset.stack;
  // 获取对应数值
  const value = targetDataset.data[index];

  console.log('数据集名称:', operatorName);
  console.log('对应数值:', value);
  // 可添加后续业务逻辑处理
}

代码说明 #

• event.active是点击触发的元素数组，取第一个元素即可获取当前点击柱状条的信息
• datasetIndex对应barChartData中的数据集下标，index对应该数据集data数组中的数值下标
• 初始化数据集时已将stack字段设置为operatorName（如MBT、OTS），因此直接通过targetDataset.stack就能拿到目标数据集名称

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