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

Question

我想在我的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]所以我只得到了五分之二（目前数据对的总数）。谢谢您的帮助！

标签： javascriptvue.jsvuexvue-chartjs

Answer 1

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

this.$data._chart.update()

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