如何在Chart JS折线图的指定标签数据点添加自定义注释？

核心方案：编写自定义Chart.js插件 #

无需依赖第三方注释插件，直接通过Chart.js的自定义插件机制，在指定数据点旁绘制固定文本注释，步骤如下：

1. 定位目标数据点：在插件的afterDraw钩子中，遍历图表标签数组，匹配目标时间（如2018-08）对应的索引，获取该数据点的像素坐标。
2. 绘制注释文本：利用Canvas API在数据点的指定位置（上方、右侧等）绘制自定义文本，可灵活调整样式和位置。

完整代码示例

// 自定义注释插件
const customPointAnnotation = {
  id: 'pointAnnotation',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    // 目标标签与注释文本
    const targetLabel = '2018-08';
    const annotationText = '重大事件在此';

    // 遍历标签，找到目标数据点
    chart.data.labels.forEach((label, index) => {
      if (label === targetLabel) {
        // 取第一个数据集，按需修改datasetIndex
        const datasetIndex = 0;
        const dataPoint = chart.getDatasetMeta(datasetIndex).data[index];
        const { x, y } = dataPoint;

        // 设置文本样式
        ctx.font = '14px sans-serif';
        ctx.fillStyle = '#e74c3c';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        // 在数据点上方20px处绘制文本，可调整偏移量
        ctx.fillText(annotationText, x, y - 20);
      }
    });
  }
};

// 注册插件
Chart.register(customPointAnnotation);

// 初始化折线图
new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['2018-07', '2018-08', '2018-09', '2018-10'],
    datasets: [{
      label: '业务数据',
      data: [12, 28, 18, 22],
      borderColor: '#3498db',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      x: { type: 'category' },
      y: { beginAtZero: true }
    }
  }
});

细节调整 #

• 若要给多个数据点加注释，可将targetLabel和annotationText改成数组循环处理。
• 文本位置可通过调整x/y的偏移量（如x + 30放在右侧）避免遮挡数据点。
• 样式可修改font、fillStyle等属性，匹配图表整体风格。

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