chartjs-vue 图表为空

Question

我正在按照示例制作测试图表并呈现图表，但它是空白的，带有虚拟数据。

我的第一个想法是可能没有为线条传递选项，但是对于其他所有类型的图表，它dataCollection就像没有被填充一样。我对 Vue 很陌生（几个小时）所以也许它与不更新状态有关？

语言.js

import { Line, mixins } from 'vue-chartjs'

//const { reactiveProp } = mixins

export 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

这确实是因为没有为网格线传递任何选项。我下面的例子假设你已经在我没有的地方设置了你的选项。语言.jsimport {&nbsp; Bar,&nbsp; mixins} from 'vue-chartjs'export default {&nbsp; extends: Bar,&nbsp; mixins: [mixins.reactiveProp],&nbsp; props: ['chartData', 'options'],&nbsp; data() {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gridLines: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gridLines: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; responsive: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maintainAspectRatio: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; &nbsp; this.renderChart(this.chartdata, this.options)&nbsp; }}

Answer 2

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