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

这确实是因为没有为网格线传递任何选项。我所遵循的示例假定您已经在我没有设置的位置设置了选项。

Languages.js

    uint8_t b;
    b = (uint8_t)a;

Answer 2

这是因为您正在挂接的钩子中调用fillData()方法。您的图表使用空数据对象呈现。

呈现图表后，数据将被填充。而且由于chart.js不是被动的，所以您有一个空图表。

解决方案：

而不是使用fillData方法将填充的数据对象传递给图表
或添加reactiveProp混合

Answer 3

在StatsSection中调用fillData()中的created(){..here...}方法而不是mounted(){}。vue将解决您的问题。 Created将在挂载之前被调用，因此您的datacollection变量在第一次时不会为null。

chartjs-vue图表为空

3 个答案: