简体   繁体   中英

Annotations are not displayed in Chart.js

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

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>

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM