chartjs-vue 图表为空

Question

我正在按照示例制作测试图表并呈现图表，但它是空白的，带有虚拟数据。我的第一个想法是可能没有为线条传递选项，但是对于其他所有类型的图表，它dataCollection就像没有被填充一样。我对 Vue 很陌生（几个小时）所以也许它与不更新状态有关？语言.jsimport { Line, mixins } from 'vue-chartjs'//const { reactiveProp } = mixinsexport default {  extends: Line,  //mixins: [reactiveProp],  props: ['options'],  mounted () {    // this.chartData is created in the mixin.    // If you want to pass options please create a local options object    this.renderChart(this.chartData, this.options)  }}StatsSection.vue<template><!-- Stats Section --><div class="stats-wrapper" style="margin: 15px 0; padding: 15px;">  <languages :chart-data="datacollection"></languages></div></template><script>import Languages from './charts/Languages.js'export default {  components: {    Languages  },  data() {    return {      datacollection: {}    }  },  mounted() {    this.fillData()  },  methods: {      fillData () {        this.datacollection = {          labels: [80, 12],          datasets: [            {              label: 'Data One',              backgroundColor: '#f87979',              data: [40, 60]            }, {              label: 'Data One',              backgroundColor: '#f87979',              data: [72, 43]            }          ]        }      }    }}</script>

Answer 1

这确实是因为没有为网格线传递任何选项。我下面的例子假设你已经在我没有的地方设置了你的选项。

语言.js

import {

  Bar,

  mixins

} from 'vue-chartjs'

export default {

  extends: Bar,

  mixins: [mixins.reactiveProp],

  props: ['chartData', 'options'],

  data() {

      return {

          options: { 

              scales: {

                  yAxes: [{

                      ticks: {

                          beginAtZero: true

                      },

                      gridLines: {

                          display: true

                      }

                  }],

                  xAxes: [{

                      gridLines: {

                          display: false

                      }

                  }]

              },

              legend: {

                  display: true

              },

              responsive: true,

              maintainAspectRatio: false

          }

      }

  },

  mounted() {

      this.renderChart(this.chartdata, this.options)

  }

}

Answer 2

在 StatsSection.vuefillData()中created(){..here...}而不是mounted(){}在 StatsSection.vue 中调用您的方法将解决您的问题。Created将在挂载之前调用，因此您的数据收集变量在第一次不会为空。