Chart.jsで再描画後にマウスオーバーすると表示がくずれる現象の対処方法 | JavaScript

Chart.jsで再描画後にマウスオーバーすると表示がくずれる現象の対処方法 | JavaScript
先日、リタイア後の資産額推移を計算する「リタイアシミュレーター」を下記の記事で公開しました。
このリタイアシミュレーターはJavaScript+PHPで作成し、
グラフの表示にはChart.jsを使用しました。

その際に、計算条件を変えてChart.jsでグラフを再描画した後に、
マウスオーバーすると表示がくずれる
(正確には前回の結果が表示される)といった不具合に遭遇しました。

この記事ではそのときの対処についてまとめます。
スポンサーリンク

再描画後にマウスオーバーすると表示がくずれる現象を回避する方法

そもそも再描画後にマウスオーバーすると表示がくずれる現象が発生する原因はなんなのでしょうか?
原因は前回のオブジェクトが残ってしまっていることです。

よって、対処方法は再描画前に一度クリアしてあげれば良いです。

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.

https://www.chartjs.org/docs/latest/developers/api.html
「 This must be called before the canvas is reused for a new chart. 」からも分かるように、
再描画時にはdestroyを呼んでやる必要があるようです。

サンプルコード

よってサンプルコードは以下のようになります。
$objChart = 0;

function hoge(...) {
  //データの準備など

  if($objChart != 0) $objChart.destroy();
  var ctx = document.getElementById('myChart');
  $objChart = new Chart(ctx, ChartDataSet);
}
スポンサーリンク

まとめ

この記事ではChart.jsで再描画後にマウスオーバーすると表示がくずれる現象の対処方法を紹介しました。

同じ現象で困っている方の参考になれば幸いです。
JavaScript
スポンサーリンク
一般広告: モバイルバッテリー
スポンサーリンク
Aresei-note
タイトルとURLをコピーしました