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関数の実行ごとに新しいグラフを作成しているので、ホバーの問題を防ぐために、以前のグラフのインスタンスを破棄する必要があります。

ので達成するために、あなたは、単に...以下で

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); 
} 

をごUpdateChart機能を置き換えることができます。ここworking example on jsFiddle

です