chart.jsを使って一度グラフを描画した後にグラフの値を変えて再描画したすると、グラフ上をマウスオーバした時に再表示前のグラフが表示されてしまう事象が発生しました。対処に結構手こずったためこの時の対処法を紹介します。

事象

以下の流れでグラフを再表示した後にグラフの上をマウスオーバすると再表示前のグラフが表示されてしまいます。例えばボタン押下時にグラフを生成する処理を行う場合、2回ボタンを押下するとnew Chart()を2回実行することになりますが、この時に事象が発生します。

1. グラフを一度表示する
2. グラフの値を変えて再表示する

// ボタン押下時の処理の抜粋
// グラフの要素を変えて、以下を2回実行した
var ctx = $('#resultChart');
var chart = new Chart(ctx, {
  ...グラフの要素やオプションの指定
});

対処方法

どうやらcanvasを再利用する都度、グラフのインスタンスを破棄する必要があるようです。chart.jsのドキュメントのdestroyメソッドの説明に記載がありました。

.destroy()

Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js. This must be called before the canvas is reused for a new chart.

というわけで、chartをグローバル変数にして以下のようなコードでdestroyを呼ぶことにしたら解決しました。

var ctx = $('#resultChart');
// インスタンスがあれば破棄する
if( chart ){
 chart.destroy();
 }
chart = new Chart(ctx, {
 ...グラフの要素やオプションの指定
});