javascript - Chartjs-Vue 图表为空

Question

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

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

Languages.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

这是因为您正在安装的 Hook 中调用 fillData() 方法。 您的图表将使用空数据对象进行渲染。

数据在图表渲染后被填充。由于 Chart.js 不是响应式的，因此您有一个空图表。

解决方案:

• 将填充的数据对象传递到图表，而不是使用 fillData 方法
• 或者添加reactiveProp mixin