2017-01-09 27 views
0

後、私は私がデータを取得するには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 
       } 
      }); 

     } 

あなたがビデオから見ることができるように、この関数は思わデータを更新しており、そのデータがグラフに過去であるため、期待どおりに動作するようにします。古いデータと新しいデータを保持する理由は何ですか?

答えて

0

新しいデータで描画する前に、グラフをクリアする必要があると思います。そうすれば、更新されたデータだけで新しいチャートが描画されます。 chart.jsドキュメントから:

.clear()

は、チャートのキャンバスをクリアします。アニメーションフレーム間で幅広く使用されていますが、役に立つかもしれません。

// myLineChartがprototype methods

のマニュアルを参照してくださいchainability

ため myLineChart.clear(); // =>戻り 'この' 上に描画されていることをキャンバスをクリアします