Chart.js 2.9.4的annotation插件在Vue项目中无法绘制标注线问题求助

安全阿岳

2026-10-5

问题排查与解决步骤

修正辅助线值的类型
你当前配置中辅助线value为字符串'15000'，Y轴为数值类型轴，字符串无法匹配刻度范围会导致辅助线不渲染，需改为数字类型15000。
调整插件注册位置
你目前在父业务组件中注册插件，vue-chartjs的Bar组件内部单独引用了Chart实例，可能存在插件未挂载到渲染图表所用实例的问题，需将插件注册逻辑移到BarChart组件内：

<script>
import { Bar } from "vue-chartjs";
import AnnotationPlugin from 'chartjs-plugin-annotation';
import Chart from 'chart.js';

// 组件内注册插件，保证和渲染用Chart实例绑定
Chart.plugins.register(AnnotationPlugin);

export default {
  extends: Bar,
  props: ["chartdata", "options"],
  mounted() {
    this.renderChart(this.chartdata, this.options);
  },
};
</script>

匹配轴ID配置
虽然Chart.js 2.x默认Y轴ID为y-axis-0，但保险起见可以手动给Y轴指定ID，确保和辅助线配置的scaleID完全匹配：

scales: {
  yAxes: [
    {
      id: 'y-axis-0', // 手动指定ID
      ticks: {
        beginAtZero: true,
      },
    },
  ],
}

移除错误的嵌套配置
你尝试过将annotation配置包裹在plugin对象中是错误的，该写法仅适用于Chart.js 3.x及以上版本，你当前使用的2.9.4版本插件配置直接放在options.annotation层级即可，无需嵌套。
处理动态数据更新
因为你通过API异步获取图表数据，vue-chartjs 3.5.1默认不会监听数据变化自动重绘，你可以选择两种方案处理：

给BarChart组件引入响应式混入：

import { Bar, mixins } from 'vue-chartjs'
export default {
  extends: Bar,
  mixins: [mixins.reactiveProp], // 加入响应式混入，自动监听chartdata变化重绘
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}