2017-01-09 99 views
0

我使用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 
       } 
      }); 

     } 

正如你从视频中可以看到,这个功能似乎以期望的方式工作,因为它正在更新数据并且数据已经过去了。任何想法为什么它保留旧数据以及新的?

回答

0

我认为你需要在用新数据绘制图表之前清除图表。这样,新图表只与更新后的数据一起绘制。从chart.js之文档:

.clear()

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

//将清除myLineChart绘制在 myLineChart.clear(); // =>返回 '这个' 为chainability

prototype methods

文档画布