[解決済み] ホバーイベントをトリガーできないように、キャンバスからチャートをクリアするにはどうすればよいですか？

質問

Chartjsを使ってラインチャートを表示していますが、問題なく動作しています。

// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');

// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);

しかし、問題はChartのデータを変更しようとしたときに発生します。 私は、新しいデータ ポイントで Chart の新しいインスタンスを作成することによってグラフを更新し、それによってキャンバスを再初期化しました。

これは問題なく動作します。しかし、新しいグラフの上にカーソルを置くと、古いグラフに表示されているポイントに対応する特定の場所にたまたま行った場合、カーソル/ラベルはまだトリガーされ、突然古いグラフが表示されます。 マウスがその位置にある間は表示されたままで、その位置から離れると消えてしまいます。 古いチャートを表示させたくない。完全に削除したいのです。

新しいチャートをロードする前に、キャンバスと既存のチャートの両方をクリアしようとしました。 ようなものです。

targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);

と

chart.clear();

しかし、今のところどれもうまくいきません。 このようなことが起こらないようにする方法について、何かアイデアはありますか？

どのように解決するのですか？

私はこれで大きな問題を抱えました

まず、私は .clear() で、次に .destroy() で、チャート参照をnullに設定してみました。

最終的に問題を解決したのは <canvas> 要素を削除し、新しい <canvas> を親コンテナに再適用する。

私の具体的なコード（もちろん、これを行う方法はいくらでもあります）。

var resetCanvas = function(){
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph');
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height
  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};