代码之家 › 专栏 › 技术社区 › claudios

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

vue-chartjs chart.js

4

claudios · 技术社区 · 7 年前

vue-chartjs 关于我的项目。我想要实现的是添加与原来相同的选项 chartjs

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 回复 | 直到 7 年前

1

7

É¢Êá´É´á´ 7 年前

尝试使用以下。。。

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这应该行得通}