Chart.js 中不显示注释

问题描述

对不起，我的英语不好。
我正在尝试使用 vue-chartjs 和 chartjs-plugin-annotation 在图表中显示一条水平线。
图形出现并应用了选项，但水平线没有出现，因为注释中的设置不起作用。
如果有人知道如何解决这个问题，请告诉我。
版本和代码如下

Chart.js v2.9.4
chartjs-plugin-annotation v0.5.7

Chart.js

import { Bar } from 'vue-chartjs'
import chartjsPluginAnnotation from 'chartjs-plugin-annotation'
export default {
 extends: Bar,props: ["chartData","options"],mounted() {
  this.addplugin(chartjsPluginAnnotation),this.renderChart(this.chartData,this.options)
 }
}  

**Vue**
    <template>
     <Chart :chartData="chartItems" :options="chartOptions"/>
    </template>
    
    <script>
     import Chart from './Chart.js'
     export default {
      components: {
       Chart
      },data() {
       return {
        chartItems: {
            labels: ["12月","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月"],datasets: [{
              label: "月ごとの数",data: [9500,12000,19000,15000,9500,5000,10000,14000,8000,4500,7000],backgroundColor: 'lightblue'
            }]
          },chartOptions: {
            legend: {
              display: false
            },scales: {
              xAxes: [{
                display: true,gridLines: {
                  display:false
                }
              }],yAxes: [{
                display: true,id: 'y-axis-0',position: 'right',ticks: {
                  beginAtZero: true,maxTicksLimit: 5,userCallback: (label,index,labels) => label.toLocaleString()
                },}]
            },annotation: { 
              annotations: [{ 
               type: 'line',id: 'hLine',mode: 'horizontal',scaleID: 'y-axis-0',value: 9000,borderWidth: 2,borderColor: 'black' 
              }] 
            },tooltips: {
              enabled: false
            },animation: {
              duration: 0
            } 
          }
       }
      }
     }
    </script>

解决方法

看来chartjs 2.9.4的注解库可能有问题，请尝试降级到2.9.3

Git 问题：https://github.com/chartjs/chartjs-plugin-annotation/issues/276