我使用VueJS 2.0,Laravel 5.3和chart.js之chart.js之为AJAX调用之后保留旧数据
我打造的网页通过使AJAX请求与vue.js到Laravel获得数据并将其返回一个JSON对象(一些页面为不同的数据集创建多个AJAX调用)。在有问题的页面上,图表构建得很好,但是当用户更改页面更新的日期时,但chart.js仍然保留上一个日期的数据,这可以在将鼠标滚动到旧区域时看到。它是相同的
为了更好地解释这一点,我在这里有一个gif视频:http://recordit.co/reNXqjzjtr,你可以看到,它显示的数据从2017-01-08这是正确的日期选择,但将鼠标移动到中心时显示来自默认日期2017-01-09的旧数据。
使AJAX请求Laravel(PHP)功能:
fetchEvents: function (date = null) {
this.loading = true;
this.$http.get('data/daily/' + this.selectedDate).then(function (response) {
this.data = response.body;
this.selectedDate = this.data.date;
this.drawChart();
this.loading = false;
}, function (error) {
console.log(error);
});
},
这个函数然后调用darwChart():
drawChart: function() {
// code for Pie charts here, mostly the same as below
// Compare against past dates
var ctx3 = document.getElementById("previousDaysPolar");
var data = [this.data.nxt_summary.total_count,
this.data.total_previous_week.data,
this.data.total_previous_month.data,
this.data.total_previous_year.data];
var previousDays = new Chart(ctx3, {
type: 'polarArea',
data: {
labels: ['Selected Date: ' + this.data.date,
'Previous Week: ' + this.data.total_previous_week.date,
'Previous Month: ' + this.data.total_previous_month.date,
'Previous Year: ' + this.data.total_previous_year.date],
datasets: [{
label: 'Order types',
data: data,
backgroundColor: [
'rgba(96, 110, 103, 0.2)',
'rgba(202, 207, 0, 0.2)',
'rgba(191, 180, 143, 0.2)',
'rgba(242, 239, 233, 0.2)'
],
borderColor: [
'rgba(96, 110, 103, 1)',
'rgba(202, 207, 0, 1)',
'rgba(191, 180, 143, 1)',
'rgba(242, 239, 233, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
}
正如你从视频中可以看到,这个功能似乎以期望的方式工作,因为它正在更新数据并且数据已经过去了。任何想法为什么它保留旧数据以及新的?