簡體   English   中英

Chart.js 中不顯示注釋

[英]Annotations are not displayed in 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, 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

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM