使用chartjs时出错

时间:2018-06-12 15:39:13

标签: vue.js chart.js

我试图在vuejs中使用chartjs构建一个图表。我有一个名为donut.js的文件,我在其中声明了我的图表的功能:

import { Doughnut, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
 extends: Doughnut,
 mixins: [reactiveProp],
 props: ['chartData'],
 mounted () {
 this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: 
 false})
 }
}

我有一个文件,它是我获取数据和颜色的包装器。

template>
  <div class="small">
    <p>{{ labelValues }}</p>
    <p>{{ dataValues }}</p>
    <DonutChart :chartData="datacollection"></DonutChart>
  </div>
</template>

<script>
  import DonutChart from '../js/donut.js'
  // import { Doughnut } from 'vue-chartjs'
  // const { reactiveProp } = mixins
  export default {
    props:{
      labelValues: Array,
      dataValues:Array,
    },
    components: {
      DonutChart
    },
    data () {
      return {
        datacollection: null,
        setcolors_one:['#e6fff5','#ccffeb','#b3ffe0','#99ffd6','#80ffcc','#66ffc2','#4dffb8','#33ffad','#1affa3','#00ff99','#00e68a','#00cc7a'],
        setcolors_two:['#e6f2ff','#cce6ff','#b3d9ff','#99ccff','#80bfff','#66b3ff','#4da6ff','#3399ff','#1a8cff','#0080ff','#0073e6','#0066cc'],
        label_values:this.labelValues,
        data_values:this.dataValues
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
        console.log("labels",this.labelValues,"datavalues",this.dataValues)
        this.datacollection.set = {
          labels: this.label_values,
          datasets: [
            {
                label: 'Data One',
                backgroundColor:this.chartColors(2),
                data: this.data_values
            }, 
          ]
        }
      },
      chartColors(labels_length){
        let colors_vector = []
          for(let i = 0; i < labels_length; i++){
            if(i % 2 === 0){
                colors_vector.push(this.setcolors_one[Math.floor((Math.random() * this.setcolors_one.length))])
            }else{
                colors_vector.push(this.setcolors_two[Math.floor((Math.random() * this.setcolors_two.length))])
            }
          }
        return colors_vector;
      }
    }
  }
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

我使用来自其他组件的v-bind发送信息,问题是数据没问题,我可以在包装器中获取它,但是图表永远不会出现。

0 个答案:

没有答案