已注册的chartjs-plugin-annotation不生效，box标注无法渲染

开发者阿泽

2026-9-26

排查及修复方案

检查配置挂载位置
annotation插件配置必须放在图表配置的options.plugins节点下，不可直接作为顶级plugins属性传入，错误的挂载位置会导致插件无法读取配置，无法渲染标注。正确结构示例：

const chartConfig = {
  type: 'line', // 替换为你的图表类型
  data: {}, // 你的图表数据
  options: {
    plugins: {
      autocolors: false,
      annotation: {
        annotations: {
          // 你的四个box标注配置
        }
      }
    }
  }
}

补全标注的关联配置
chartjs-plugin-annotation 1.0.2版本下，box类型标注建议显式指定关联的轴ID和x轴范围，避免插件无法匹配轴范围导致标注宽度为0不显示：

box1: {
  type: 'box',
  xScaleID: 'x', // 对应你的x轴ID，默认值为x
  yScaleID: 'y', // 对应你的y轴ID，默认值为y
  xMin: 0, // 替换为你的x轴最小刻度值
  xMax: 10, // 替换为你的x轴最大刻度值，如要覆盖全x轴直接填对应极值即可
  yMin: 2,
  yMax: 4,
  backgroundColor: 'rgba(221, 29, 33, 0.3)',
  borderColor: 'rgba(0,0,0,0)',
}

剩下三个box配置按同样规则补全参数即可。

调整base64导出时机
标注绘制逻辑晚于图表主体绘制，直接在实例化后立刻调用toBase64Image()会出现标注未绘制就导出的问题，需监听图表动画完成事件后再执行导出：
```
const chart = new Chart(ctx, chartConfig);
chart.options.animation.onComplete = () => {
  const base64Str = chart.toBase64Image();
  // 处理导出后的base64逻辑
};
```
校验依赖版本
执行npm ls chartjs-plugin-annotation检查实际安装的插件版本是否为1.0.2，避免依赖锁文件变动导致隐式升级到和chart.js 3.6.0不兼容的版本。