Chart.js 3.9.1

1. グラフの再表示

2. 値が変動する棒グラフ

次のグラフは、個人別のテストの得点を並べたものである。60点未満は不可判定なのでグラフの色を赤にしている。リストボックスからデータの並び順を撰択すると、その順序でデータをソートし、グラフを再表示する。

グラフを再表示する方法は２種類ある。１つ目は、再表示のたびに Chartオブジェクトを新たに作り直す方法、２つ目は、Chartオブジェクトのデータのみ更新する方法である。

データの並べ替えを行なった後、Chartオブジェクトを新たに作成し、グラフを再表示する。ただし直前に作成した Chartオブジェクトは、新しいオブジェクトの作成前に destroyメソッドで破棄しておかなくてはならない。そうしないとオブジェクトの作成が失敗する。

例えば、関数のスコープ内にローカルの変数を宣言し、何かしらのオブジェクトを保持しているとする。普通は、関数が終了すればローカル変数は消滅し、保持しているオブジェクトも廃棄される。ところが Chartオブジェクトだけは、ローカル変数が消滅してもメモリに残ったままとなり、それが新しいオブジェクトを作るときの障害になっているようだ。

エラーメッセージ

よって、既存のオブジェクトを削除することを可能とするために、オブジェクト変数（chart1）はグローバル変数として宣言しておき、アプリケーション実行中はオブジェクトへの参照を保持し続ける必要がある。

Chartオブジェクトの削除さえしておけば、グラフの再表示は単純な処理の繰り返しになる。

アプリケーション実行中は同一の Chartオブジェクトを利用する。元データの並べ替えを行なった後、Chartオブジェクトの dataプロパティに並べ替え後のデータを代入する。dataプロパティは元データを参照しているが、並べ替え後のデータを代入しなければ、更新されない。

そのあと Chartオブジェクトの updateメソッド実行する。

上記２つの方法で実装したグラフは、見た目ではっきりわかるくらい表示の仕方に差が出る。

(1)の方法では、毎回オブジェクトを作り直しているので、表示のたびに何もないところから全ての棒が現れて上にグンと伸びていく。

(2)の方法では、今表示しているグラフから差分だけ変化するので、ある棒は伸び、ある棒は縮むということになる。(1)ほどの大きな動きはない。 ただし、棒の色が赤から青またはその逆に変わるとき、棒が一瞬紫色に変わるのでで、ちょっと奇妙な感じになる。

結局は好みの問題でしょう。

１秒ごとにと値がランダムにする。名前「A」の値のみ色をつける。値が大きい順に並べる。

Java Scriptの setIntervalメソッドはタイマーの働きをする関数。指定した間隔で指定した関数を繰り返し呼ぶ。本例ではこれを利用して、値をランダムに生成し、降順にソート、グラフに表示するという処理を１秒間隔で実行している。

この処理は、上記「グラフの再表示」における「再表示のたびに Chartオブジェクトを作り直す」と同様な方法で実装している。

次のリンクで起動するグラフは、「Chartオブジェクトのデータのみ更新する」方法で実装したものである。グラフの表示の仕方が違うのがわかるだろう。