後、私は私がデータを取得するにはLaravelにvue.jsとAJAX要求を行うことでページを作成し、それChart.Jsは、AJAX呼び出し
をLaravel 5.3、VueJS 2.0を使用してChart.JSてる古いデータを保持していますJSONオブジェクトを返します(一部のページでは、異なるデータセットに対して複数のAJAX呼び出しを行います)。問題のページでは、グラフは正常に作成されますが、ユーザーが日付を変更すると、ページは更新されますが、chart.jsは以前の日付のデータを保持します。その同じ
私はgifのビデオをここに持っています:http://recordit.co/reNXqjzjtrあなたが見ることができるように、2017-01-08のデータは選択された日付に合っていますが、デフォルトの日付2017-01-09の古いデータが表示されます。
Laravel(PHP)にAJAX要求を行うための機能:
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
}
});
}
あなたがビデオから見ることができるように、この関数は思わデータを更新しており、そのデータがグラフに過去であるため、期待どおりに動作するようにします。古いデータと新しいデータを保持する理由は何ですか?