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

确实是因为没有为网格线传递选项。我下面的示例假设您已经设置了我没有设置的选项。

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

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

并在图表呈现后填充数据。由于 chart.js 不是反应式的，因此您的图表是空的。

解决方案：

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

Answer 3

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

chartjs-vue 图表是空的

chartjs-vue charts are empty

javascript

vue.js

chart.js

vue-chartjs