向vue-chartjs添加選項似乎不起作用

Question

我在我的項目中使用了vue-chartjs。我想實現的是添加與原始chartjs相同的選項，但不適用於我的情況。就像當我刪除/隱藏圖表標題並刪除y軸等時，我相信這是chartjs v2。請參閱以下示例代碼。

import { Line } from 'vue-chartjs' 
 
export default Line.extend({ 
 
    mounted() { 
 
    props: ['options'], 
 
    this.renderChart({ 
 
     labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], 
 
     options: { 
 
     legend: { //hides the legend 
 
      display: false, 
 
     }, 
 
     scales: { //hides the y axis 
 
      yAxes: [{ 
 
      display: false 
 
      }] 
 
     } 
 
     }, 
 
     datasets: [ 
 
     { 
 
      lineTension: 0, 
 
      borderWidth:1, 
 
      borderColor: '#F2A727', 
 
      pointBackgroundColor: '#F2A727', 
 
      backgroundColor: 'transparent', 
 
      data: [40, 20, 12, 39, 10, 30] 
 
     } 
 
     ] 
 
    }) 
 
    } 
 
})

任何幫助將非常感激。

Answer 1

嘗試使用以下...

import { Line } from 'vue-chartjs' 
export default Line.extend({ 
    props: ['data', 'options'], 
    mounted() { 
     this.renderChart({ 
     labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], 
     datasets: [{ 
      lineTension: 0, 
      borderWidth: 1, 
      borderColor: '#F2A727', 
      pointBackgroundColor: '#F2A727', 
      backgroundColor: 'transparent', 
      data: [40, 20, 12, 39, 10, 30] 
     }] 
     }, { 
     legend: { //hides the legend 
      display: false, 
     }, 
     scales: { //hides the y axis 
      yAxes: [{ 
       display: false 
      }] 
     } 
     }) 
    } 
}) 

^{不是 'VUE-chartjs' 親，但據我所知這應該工作}