chart.js v2更新圖表沒有全局變量

Question

我正在使用chart.js v2.5.0。

我想在不使用全局變量的情況下動態創建圖表。

例如，我想用類似的代碼如下： https://jsfiddle.net/DUKEiLL/sf57xw6b/

 function UpdateChart(ctrl) { 
     var config = $("#" + ctrl).data("ChartJs"); 
      config.data.datasets.forEach(function (dataset) { 
       dataset.data = dataset.data.map(function() { 
        return randomScalingFactor(); 
       }); 
      }); 

      var ctx = document.getElementById(ctrl).getContext("2d"); 
      var TempMyDoughnut = new Chart(ctx, config); 
      TempMyDoughnut.update(); 
    } 

但它不能正常工作：用戶按下「更新」按鈕時，並懸停在圖表上，以前的實例是突然顯示。

Answer 1

既然你正在創建UpdateChart函數的每次執行新的圖表，因此你就必須摧毀圖表任何以前的實例，以防止懸停問題。

要做到這樣，你可以簡單地用下面的更換你的UpdateChart功能...

function UpdateChart(ctrl) { 
    var config = $("#" + ctrl).data("ChartJs"); 
    config.data.datasets.forEach(function(dataset) { 
     dataset.data = dataset.data.map(function() { 
      return randomScalingFactor(); 
     }); 
    }); 

    // destroy previous instance of chart 
    var meta = config.data.datasets[0]._meta; 
    for (let i in meta) { 
     if (meta[i].controller) meta[i].controller.chart.destroy(); 
    } 

    var ctx = document.getElementById(ctrl).getContext("2d"); 
    var TempMyDoughnut = new Chart(ctx, config); 
} 

這裏是working example on jsFiddle