Vue-chart.js: получение частичных данных;диаграмма плохо отображается - PullRequest
0 голосов
/ 06 февраля 2019

Я хочу нарисовать линейную диаграмму на моем 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();

}
})

Моя диаграмма просто отображается следующим образом (изображение): Chart display

Как вы можете видеть на картинке, у меня есть две красные точки;это для двух первых наборов данных: [18 January and 63.5] & [21 january and 23.9], поэтому я получаю только два из пяти (общее количество пар данных на данный момент).Спасибо за помощь!

1 Ответ

0 голосов
/ 20 февраля 2019

Добавьте наблюдатель к вычисленным свойствам vuex и запустите обновление.

this.$data._chart.update()

Возможно, ваша диаграмма будет отрисована до того, как все ваши данные будут там.

...