[英]Vue-ChartJS datasets push not updating chart
我正在使用 Vue-ChartJS 在我的网页上显示图表。 因此,当我使用推送功能更新数据集时,图表不会更新(据说它应该更新视图)。 使用直接设置反应变量正在更新图表(如this.transaction = Object
)。 当前的 ChartComponent 是这样工作的,但我想从 API 获取数据并将其添加到视图中。
LineChart.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderChart(this.chartData, this.options)
}
}
ChartComponent.vue (使用直接设置)
<template>
<div class="card">
<div class="card-header">
Статистика
<div class="float-right">
<form method="POST" class="form-inline">
<div class="form-group mx-sm-2 mb-2">
<button type="button" v-on:click="updateChart('week')" class="btn btn-primary">Седмица</button>
</div>
<div class="form-group mx-sm-2 mb-2">
<button type="button" v-on:click="updateChart('month')" class="btn btn-primary">Месец</button>
</div>
<div class="form-group mx-sm-2 mb-2">
<button type="button" v-on:click="updateChart('year')" class="btn btn-primary">Година</button>
</div>
<div class="form-group mx-sm-2 mb-2">
<label for="custom_from" class="mx-sm-2">От:</label>
<input id="custom_form" type="date" class="form-control" />
</div>
<div class="form-group mx-sm-2 mb-2">
<label for="custom_to" class="mx-sm-2">До:</label>
<input id="custom_to" type="date" class="form-control" />
</div>
</form>
</div>
</div>
<div class="card-body p-0">
<div class="p-4">
<line-chart :options="options" :chart-data="transactions"></line-chart>
</div>
</div>
</div>
</template>
import LineChart from './LineChart.js'
export default {
components: {
LineChart
},
data () {
return {
transactions: {},
options: {
maintainAspectRatio: false,
responsive: true,
legend: {
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
this.transactions = {
labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
datasets: [{
label: 'Users',
data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
backgroundColor: 'rgba(66, 165, 245, 0.5)',
borderColor: '#2196F3',
borderWidth: 1
}]
}
},
updateChart (period) {
console.log('Chart updated for period: ' + period);
this.transactions = {
labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
datasets: [{
label: 'Users',
data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
backgroundColor: 'rgba(66, 165, 245, 0.5)',
borderColor: '#2196F3',
borderWidth: 1
}, {
label: 'Users',
data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
backgroundColor: 'rgba(66, 165, 245, 0.5)',
borderColor: '#2196F3',
borderWidth: 1
}]
}
console.log(this.transactions)
}
},
}
ChartComponent.vue (使用推送功能)
import LineChart from './LineChart.js'
export default {
components: {
LineChart
},
data () {
return {
transactions: {},
options: {
maintainAspectRatio: false,
responsive: true,
legend: {
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
this.transactions = {
labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
datasets: [{
label: 'Users',
data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
backgroundColor: 'rgba(66, 165, 245, 0.5)',
borderColor: '#2196F3',
borderWidth: 1
}]
}
},
updateChart (period) {
console.log('Chart updated for period: ' + period);
this.transactions.datasets.push({
label: 'Users',
data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
backgroundColor: 'rgba(66, 165, 245, 0.5)',
borderColor: '#2196F3',
borderWidth: 1
});
console.log(this.transactions)
}
},
}
可能是Vue 反应性问题。 您需要更新对this.transactions
的引用以使 Vue 具有响应性
updateChart(period) {
console.log('Chart updated for period: ' + period);
this.transactions.datasets.push({
label: 'Users',
data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
backgroundColor: 'rgba(66, 165, 245, 0.5)',
borderColor: '#2196F3',
borderWidth: 1
});
this.transactions = JSON.parse(JSON.stringify(this.transactions))
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.