【问题标题】:Adding options to vue-chartjs seems not working向 vue-chartjs 添加选项似乎不起作用
【发布时间】:2017-07-10 02:49:59
【问题描述】:

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

任何帮助将不胜感激。

【问题讨论】:

    标签: chart.js vue-chartjs


    【解决方案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 这应该可以工作

    【讨论】:

      猜你喜欢
      • 2017-12-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-10-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多