ムッシューの日記

2人の子供とのお出かけネタから趣味の釣りネタなど

chart.jsでグラフ再表示後にマウスカーソルを当てると変更前のグラフが表示される時の対処法


chart.jsを使って以下のことをした時に予期せぬ動きになってしまったため、その時の対処法です。

◆事象

以下の流れでグラフを再表示した後にマウスカーソルをグラフの上で動かすと、再表示前のグラフが表示されてしまう。

  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, {
 ...グラフの要素やオプションの指定
});

次へ 投稿

前へ 投稿

© 2017 ムッシューの日記

テーマの著者 Anders Norén