如何通过编程方式在插件中获取数据集的单个数据点

要在Chart.js插件的afterDraw钩子中获取单个数据点，需要通过图表的**元数据（meta）**来访问渲染后的点元素——直接的data数组仅存储原始数据，视觉渲染相关的元素引用存在于元数据内。

基础示例（获取指定数据集和索引的点） #

假设你要获取第1个数据集（索引0）的第1个数据点（索引0），可以这样修改代码：

const pulsePoint = {
      id: 'pulsePoint',
      afterDraw: chart => {
        // 获取目标数据集的渲染元数据
        const datasetMeta = chart.getDatasetMeta(0);
        // 获取指定索引的数据点元素
        const point = datasetMeta.data[0];
        
        if (point) { // 先判断元素存在，避免报错
          point.borderColor = '#ffffff';
          // 使用'none'模式更新，避免触发重绘循环
          chart.update('none');
        }
      }
};

关键细节说明 #

• chart.getDatasetMeta(datasetIndex)：传入数据集的索引，返回该数据集的渲染元数据，包含所有数据点的Canvas/DOM元素引用。
• datasetMeta.data[pointIndex]：通过数据点的索引获取对应元素，该元素支持修改borderColor、backgroundColor等样式属性。
• 避免循环更新：直接调用chart.update()会再次触发afterDraw钩子导致无限循环，因此使用chart.update('none')仅更新样式而不触发完整重绘流程。

遍历所有数据点（可选） #

如果需要批量处理多个点，可以遍历数据集的元数据：

afterDraw: chart => {
  chart.data.datasets.forEach((dataset, datasetIndex) => {
    const meta = chart.getDatasetMeta(datasetIndex);
    meta.data.forEach((point, pointIndex) => {
      // 示例：给偶数索引的点修改边框色
      if (pointIndex % 2 === 0) {
        point.borderColor = '#ffffff';
      }
    });
  });
  chart.update('none');
}

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