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

数据在计算属性中可用（请参见屏幕截图），但不会呈现到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 chartjs”导入{Pie}
从“../store/mutationtypes”导入*作为类型
从“vuex”导入{MapGetter，mapActions}
导出默认饼图。扩展({
挂载（）{
statOrderStatus:this.$store.dispatch（'getStatisticsForOrderStatus'），
这是我的艺术({
标签：this.orderStatusChartKeys，
数据集：[
{
标签：'Ticketstatus'，
背景颜色：“#f87979”，
数据：this.orderStatusChartData
}
]
})
},
计算：{
…映射器（[“statOrderStatus”]），
orderStatusChartData（）{
让chartData=[]
this.statOrderStatus.forEach（函数（orderStatus）{
chartData.push（orderStatus.doc\u计数）
})      
返回图表数据
},
orderStatusChartKeys（）{
让chartKeys=[]
this.statOrderStatus.forEach（函数（orderStatus）{
chartKeys.push（orderStatus.key）
})      
返回图表键
}
}
})

VUE信息：（Chrome调试）

---

尝试创建计算属性以计算图表数据：

查看

chart.js

at

---

thanx@daniel-d:）我这里只有一个问题。。我将更新问题：用最新代码、错误消息和状态截图更新问题。。希望这有助于解决：）您正在尝试将饼图的数据设置为字符串值数组。您需要将其设置为数值数组：数据集：[{…数据：this.orderStatusChartData}。基本上，您只是将图表代码中的

orderStatusChartData

和

orderStatusChartKeys

混在一起。感谢您的回复@daniel-d:）但不幸的是，结果是一样的..屏幕截图（如问题中的链接）与现在完全一样：只有顶部的红色短条，没有图表…您可能认为可能缺少的任何其他内容？PS！我用演示数据尝试了它，并且显示正确..这可能是数据类型的问题吗？两者都应该是数组？我用[]和{}都尝试了在这方面也没有成功…我不知道Terje。

orderStatusChartData

在inspector中看起来不错。就我所知，它应该可以正常工作。

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

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