我之前也踩过这个坑！你给出的配置逻辑上没问题，但大概率是几个容易忽略的细节没做到位，我帮你梳理排查一下：

1. 必须引入并注册Annotation插件 #

Chart.js的Annotation功能不是核心内置模块，需要单独引入插件才能生效：

• 如果你用CDN引入，要在Chart.js之后添加这行代码：

  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@latest/dist/chartjs-plugin-annotation.min.js"></script>
  

• 如果用npm/yarn管理依赖，先安装插件：

  npm install chartjs-plugin-annotation --save
  

  然后在代码里注册插件（二选一即可）：

  // 全局注册：所有图表都能使用Annotation功能
  import Chart from 'chart.js/auto';
  import annotationPlugin from 'chartjs-plugin-annotation';
  Chart.register(annotationPlugin);
  
  // 单个图表注册：仅当前图表启用Annotation
  const chart = new Chart(ctx, {
    plugins: [annotationPlugin],
    // 你的其他图表配置...
  });
  

2. 检查scaleID是否匹配你的Y轴ID #

你配置里写的scaleID: 'y-axis-0'，但默认情况下Chart.js的单个Y轴ID是'y'——只有当你定义了多个Y轴时，第一个Y轴的ID才会是'y-axis-0'。

• 如果是默认单Y轴场景，把scaleID改成'y'试试；
• 如果确实有多个Y轴，确认目标轴的ID和你配置里的完全一致。

3. 完整可运行示例代码 #

给你一个可以直接测试的完整例子，对照看看自己的配置哪里遗漏了：

// 假设已经引入Chart.js和annotation插件
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y', // 默认单Y轴使用这个ID
        value: 5,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: false,
          content: 'Test label'
        }
      }]
    }
  },
  // 没全局注册插件的话，这里必须声明
  plugins: [annotationPlugin]
});

最后排查点 #

如果还是没效果，建议检查：

• 插件版本和Chart.js版本是否兼容（比如Chart.js v3+需要搭配annotation插件v2+版本）；
• 浏览器控制台有没有报错信息，顺着报错提示排查会更高效；
• 是否有其他图表插件和Annotation插件产生冲突。

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