Я хочу нарисовать линейную диаграмму на моем 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]
, поэтому я получаю только два из пяти (общее количество пар данных на данный момент).Спасибо за помощь!