圖js舊圖表數據沒有清除

Question

這個問題已被問了很多次，我經歷了其中的大部分，但沒有他們幫我找到了解決方案。

我使用for循環生成幾個條形圖作爲報告功能的一部分。

我正在使用Express Handlebars的node.js。

我的頁面看起來像：

<div class="row report-charts"> 
    <div class="col-md-12"> 
    {{#buildings}} 
     <div class="col-md-6"> 
      <h4>{{Name}}</h4> 
      <canvas id="{{idBuildings}}" width="200" height="80"></canvas> 
     </div> 
    {{/buildings}} 
    </div> 
</div> 

我的JS代碼如下所示：

$('.case-report-btn').click(function(){ 

     $.ajax({ 
      type: 'post', 
      url: '/reports/cases/filter', 
      data : { 
       StartDate : $('.start-ms-time-hidden').val(), 
       EndDate : $('.end-ms-time-hidden').val(), 
       ReportKey : $('.cases-filter-type').val() 
      }, 
      dataType: 'json', 
      success: function(res) { 
       $('.report-charts').show(); 
       for(key in res) { 
        var innerObj = res[key]; //gives the inner obj 
        var ctx = document.getElementById(key); //the idBuildings 
        var labels = []; 
        var data = []; 
        var buildingName = innerObj.Name; 
        for(innerKey in innerObj) { 
         if(innerKey != 'Name' && innerKey != 'Total') { 
          labels.push(innerKey); 
          data.push(innerObj[innerKey]); 
         } 
        } 

        var options = { 
         type: 'bar', 
         data: { 
          labels: labels, 
          datasets: [{ 
           label: buildingName, 
           data: data, 
           backgroundColor: 'rgba(255, 99, 132, 0.2)', 
           borderColor: 'rgba(255,99,132,1)', 
           borderWidth: 1 
          }] 
         }, 
         options: { 
          scales: { 
           yAxes: [{ 
            ticks: { 
             beginAtZero:true, 
             fixedStepSize: 1 
            } 
           }] 
          } 
         } 
        } 
        var myChart = new Chart(ctx, options); 
       } 
       $('#pleaseWaitDialog').modal('hide'); 
      }, 
      error: function(err) { 
       $('#pleaseWaitDialog').modal('hide'); 
       bootbox.alert('Error: ' + err); 
      } 
     }); 
    }); 

所以基本上，我使用for循環生成頁面上的多個圖表。在循環內部，我聲明瞭圖表變量，每次更改報表參數並按下按鈕時，都會生成新圖表。但是當我盤旋在它上面時，舊的仍然出現。

現在我不知道我應該把myChart.destroy()或myChart.clear()方法。我也嘗試在for循環之外移動myChart聲明，但它也沒有幫助。

有關如何處理此問題的任何建議？

Answer 1

我認爲有幾種方法可以做到這一點。如果圖表已經存在，您可以更新圖表數據。這裏有兩個功能可以使用：

function removeData(chart) { 
    chart.data.labels.pop(); 
    chart.data.datasets.forEach((dataset) => { 
     dataset.data.pop(); 
    }); 
    chart.update(); 
} 

function addData(chart, label, data) { 
    chart.data.labels.push(label); 
    chart.data.datasets.forEach((dataset) => { 
     dataset.data.push(data); 
    }); 
    chart.update(); 
} 

首先，您必須刪除所有數據，然後添加新數據。

如果你想銷燬圖表並重新創建它，你必須將你的變量保存爲全局變量。要做到這一點，你有喲聲明你的變量像window.myChart然後之前創建新的圖表，是這樣的：

if (window.myChart) window.myChart.destroy(); 
window.myChart = new Chart(ctx, options); 

的另一種方式，你可以嘗試是消除你的畫布，創造一個又一個。這樣的事情：

$('#your_canvas').remove(); 
$('#your_canvas_father').append('<canvas id="your_canvas"></canvas>');