Chart.js 2.9.4版本下chartjs-plugin-annotation插件配置异常问题咨询

排查步骤及修复方案 #

1. 修正scaleID配置错误
   你当前配置里scaleID: "yAxes"是错误的，插件无法匹配到对应的y轴刻度。Chart.js 2.x版本中，如果你没有给y轴自定义id，默认生成的第一个y轴id为y-axis-0，你可以直接替换scaleID的值，更稳妥的方式是主动给y轴设置自定义id避免匹配错误：

// 先给y轴加自定义id
scales: {
  yAxes: [
    {
      id: "custom-y-axis", // 新增自定义id，可随意命名
      scaleLabel: {
        // ...原有配置
      },
      ticks: {
        // ...原有配置
      },
      gridLines: {
        // ...原有配置
      },
    },
  ],
  // ...x轴原有配置
}

// annotation配置对应修改scaleID
annotation: {
  annotations: [
    {
      type: "line",
      mode: "horizontal",
      scaleID: "custom-y-axis", // 和你自定义的y轴id保持一致
      value: 2.62,
      borderColor: "red", // 先换成高对比度颜色测试，避免白色和背景色重合看不见
      borderWidth: 4,
    },
  ],
}

2. 确认annotation配置位置
   确保整个annotation配置块是放在new Chart()第二个参数的options根属性下，不要嵌套在其他配置项里。
3. 注册方式确认
   你当前用的Chart.plugins.register(annotationPlugin)注册方式完全符合0.5.7版本插件的要求，不需要调整，Chart.pluginService.register的写法本来就不适配该版本，不用尝试。

你当前的Chart.js 2.9.4和0.5.7版本的插件是官方推荐的配对版本，版本兼容性没有问题，按以上修改后即可正常显示注解线。

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