向vue-chartjs添加选项似乎不起作用

时间:2017-07-10 02:49:59

标签: chart.js vue-chartjs

我在我的项目中使用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]
        }
      ]
    })
  }
})

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:4)

使用以下内容尝试...

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
            }]
         }
      })
   }
})

not' vue-chartjs'亲,但AFAIK这应该工作