我正在使用Vue.js和Chart.js绘制一些图表.每次调用该函数时generateChart()
,图表都不会自动更新.当我检查数据时generateChart()
,它们是正确的,但图表并不代表那些.
有趣的事实:当我调整窗口大小时,图表正在更新.
我正在做什么有什么问题?
每次打电话时如何更新图表object
?
我觉得这将是一些与相关的array
和generateChart()
变化的检测警告,但我不知道该怎么做.
https://codepen.io/anon/pen/bWRVKB?editors=1010
export default{
data (){
const self = this;
return {
dataChart : {
labels : [],
datasets: [{
label: 'label',
backgroundColor: '#FC2525',
data: [0, 1, 2, 3, 4],
}]
}
}
}
generateChart() {
this.dataChart['labels'] = [];
this.dataChart['datasets'] = [];
... compute datasets and formattedLabels
this.dataChart['labels'] = formattedLabels;
this.dataChart['datasets'] = datasets;
}
LineChart.js
import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveProp],
props: ["options"],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
azs06..
24
对图表数据使用计算属性.而不是调用this.renderChart
值班包装在一个方法和重复使用方法上mounted
和watch
.
Vue.component("line-chart", {
extends: VueChartJs.Line,
props: ["data", "options"],
mounted() {
this.renderLineChart();
},
computed: {
chartData: function() {
return this.data;
}
},
methods: {
renderLineChart: function() {
this.renderChart(
{
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: this.chartData
}
]
},
{ responsive: true, maintainAspectRatio: false }
);
}
},
watch: {
data: function() {
this._chart.destroy();
//this.renderChart(this.data, this.options);
this.renderLineChart();
}
}
});
var vm = new Vue({
el: ".app",
data: {
message: "Hello World",
dataChart: [10, 39, 10, 40, 39, 0, 0],
test: [4, 4, 4, 4, 4, 4]
},
methods: {
changeData: function() {
this.dataChart = [6, 6, 3, 5, 5, 6];
}
}
});
{{ dataChart }}
您还可以将选项设置为计算属性,如果选项不会更改,则可以设置默认道具.https://vuejs.org/v2/guide/components.html#Prop-Validation
这是一个工作的codepen https://codepen.io/azs06/pen/KmqyaN?editors=1010
1> azs06..:
对图表数据使用计算属性.而不是调用this.renderChart
值班包装在一个方法和重复使用方法上mounted
和watch
.
Vue.component("line-chart", {
extends: VueChartJs.Line,
props: ["data", "options"],
mounted() {
this.renderLineChart();
},
computed: {
chartData: function() {
return this.data;
}
},
methods: {
renderLineChart: function() {
this.renderChart(
{
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: this.chartData
}
]
},
{ responsive: true, maintainAspectRatio: false }
);
}
},
watch: {
data: function() {
this._chart.destroy();
//this.renderChart(this.data, this.options);
this.renderLineChart();
}
}
});
var vm = new Vue({
el: ".app",
data: {
message: "Hello World",
dataChart: [10, 39, 10, 40, 39, 0, 0],
test: [4, 4, 4, 4, 4, 4]
},
methods: {
changeData: function() {
this.dataChart = [6, 6, 3, 5, 5, 6];
}
}
});
{{ dataChart }}