Vue-chart.js ：获取部分数据；图表显示不好答案

【问题标题】：Vue-chart.js : Getting partial data; chart not displaying wellVue-chart.js ：获取部分数据；图表显示不好
【发布时间】：2019-02-06 02:42:34
【问题描述】：

我想在我的Dashboard.vue 上绘制折线图。 x-axis 和 Y-axis 上的数据来自我的 vuex 商店。当我检查浏览器上的 Vue 插件时，我可以看到来自商店的数据正在被访问。这是我的LineChart.js 文件的版本（图表的逻辑所在的位置）。

import { Line } from 'vue-chartjs'
export default ({
extends: Line,
data() {
    return {
        xAxis: [],
        yAxis: [],
        title: "My activities"
    }
},beforeMount(){
        console.log('beforeMount')

},
computed: {
averageNumbers: function() {
    console.log('computed')
  return this.$store.getters.userData
},
daysItems: function(){
    return this.$store.getters.userDataXAxis
}
},
watch: { // watch changes here

averageNumbers: function(newValue) {
    console.log('watch')
  for (var i=0; i < newValue.length; i++){
    this.yAxis.push(newValue[i].val)

  }
},
daysItems: function(newVal){
    for (var i=0; i < newVal.length; i++){
        this.xAxis.push(newVal[i])    
      }
}
},
methods:{
renderLineChart: function() {
    this.renderChart({
        labels: this.xAxis,
        datasets: [
            { label: this.title, backgroundColor: '#dd4b39', data:      this.yAxis }
        ]
    },
        { responsive: true, maintainAspectRatio: false })

},

},

mounted() {
    console.log('mounted')
        this.renderLineChart();

}
})

我的图表显示如下（图片）：

正如你在图片上看到的，我有两个红点；这些是针对前两组数据的：[18 January and 63.5] 和[21 january and 23.9] 所以我只得到五分之二（目前数据对的总数）。感谢您的帮助！

【问题讨论】：

标签： javascript vue.js vuex vue-chartjs

【解决方案1】：

向 vuex 计算属性添加观察者并触发更新。

this.$data._chart.update()

也许你的图表在你的所有数据都存在之前就被渲染了。

【讨论】：