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

Answer 1

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

UIImagePickerControllerOriginalImage

也许您的图表在所有数据都存在之前就已呈现。