vue-chart.js：数据可用作计算属性，但未在图表中显示

Question

数据在计算属性中可用（参见屏幕截图），但不会渲染到PieChart控件中。

任何人都知道为什么？

代码：

<script>
import { Pie } from 'vue-chartjs'
import * as types from '../store/mutationtypes'
import { mapGetters, mapActions } from 'vuex'

export default Pie.extend({
  mounted () {
    statOrderStatus : this.$store.dispatch('getStatisticsForOrderStatus'),
    this.renderChart({
    labels: this.orderStatusChartKeys,
      datasets: [
        {
          label: 'Ticketstatus',
          backgroundColor: '#f87979',
          data: this.orderStatusChartData
        }
      ]
    })

  },
  computed: {
    ...mapGetters(["statOrderStatus"]),
    orderStatusChartData () {
      let chartData = []
      this.statOrderStatus.forEach(function(orderStatus) {
          chartData.push(orderStatus.doc_count)
      })      
      return chartData
    },
    orderStatusChartKeys () {
      let chartKeys = []
      this.statOrderStatus.forEach(function(orderStatus) {
          chartKeys.push(orderStatus.key)
      })      
      return chartKeys
    }
  }
})
</script>

VUE信息:( Chrome调试）

Answer 1

尝试创建一个计算属性来计算图表数据：

在https://www.webpackbin.com/bins/-KpNBtUKQ67-jSFRHtNe

处查看chart.js

datasets: [
        {
          label: 'Ticketstatus',
          backgroundColor: '#f87979',
          data: this.orderStatusChartData
        }

computed: {
    orderStatusChartData () {
      let chartData = []
      this.statOrderstatus.forEach(function(orderStatus) {
          chartData.push(orderStatus.doc_count)
      })      
      return chartData
    }