Question

我正在使用VueJS 2.0，Laravel 5.3和Chart.JS

我通过使用vue.js向Laravel发出AJAX请求以获取数据来构建页面，并返回一个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
                }
            });

        }

从视频中可以看出，此功能似乎正在发挥作用，因为它正在更新数据并且数据已经过了图表。任何想法为什么它保留旧数据以及新数据？

Answer 1

我认为您需要在使用新数据绘制图表之前清除图表。这样，新图表仅使用更新的数据绘制。来自chart.js docs：

.clear()

将清除图表画布。在动画帧之间广泛使用，但您可能会发现它很有用。

//将清除绘制myLineChart的画布   myLineChart.clear();   // =＆gt;返回＆＃39;这个＆＃39;可链接性

请参阅prototype methods

的文档

Chart.Js在AJAX调用后保留旧数据

1 个答案: