chart.js - 向 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' pro 但 AFAIK 这应该可以}