0

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

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

图表.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月&quot;, "1月&quot;, "2月&quot;, "3月&quot;, "4月&quot;, "5月&quot;, "6月&quot;, "7月&quot;, "8月&quot;, "9月&quot;, "10月&quot;, "11月&quot;],
            datasets: [{
              label: "月ごとの数&quot;,
              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>
4

1 回答 1

1

似乎chartjs 2.9.4中的注释库可能存在问题,请尝试降级到2.9.3

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

于 2021-01-21T14:16:46.620 回答