chartjs更新数据 vue_javascript - Vue-ChartJS数据集不推送更新图表 - SO中文参考 - www.soinside.com...

我正在使用Vue-ChartJS在我的网页上显示图表。因此，当我使用推送功能更新数据集时，图表不会更新(据说它应该更新视图)。使用直接设置到反应变量是更新图表(如this.transaction = Object)。当前ChartComponent的工作方式与此类似，但我希望从API获取数据并将其添加到视图中。

Linecartajasa

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(使用直接设置)

Статистика

Седмица

Месец

Година

От:

До:

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(使用push函数)

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)

}

},

}