0

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

4

1 回答 1

0

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

this.$data._chart.update()

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

于 2019-02-20T09:02:29.110 回答