注释未显示在Chart.js中 [英] Annotations are not displayed in Chart.js

问题描述

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

I'm sorry for my poor English.
I'm trying to display a horizontal line in a graph using vue-chartjs and chartjs-plugin-annotation.
The graph appears and the options are applied, but the horizontal line does not appear because the settings in the annotation are not working.
If anyone knows how to fix this, please let me know.
The version and code is as follows

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

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, 9500, 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

It seems like there might be problems with the annotations library in chartjs 2.9.4, try downgrading to 2.9.3

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

这篇关于注释未显示在Chart.js中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！