chart.jsのradarchartが少しおかしくて、手を加えたメモ

HTML5のcanvasでグラフを描画するスクリプトとして紹介されていたChart.jsを使用してみました。

Chart.js

設置方法は簡単なので元サイトを見ていただくとして、ちょっと動作がおかしいところがあったので自分なりに改修して使用しました。そのメモです。

ちょっと使いたいコンテンツがあって早速レーダーチャートを使ってみたのですが、複数データを設定した場合に二つ目以降のデータの表示が1項目ずつずれていくようです。

動作不具合の具体例です。以下は添付のサンプルソースのデータ設定部分です。

上記ソースで描いた場合、下図の右のようなグラフになるはずなのですが、実際には左のようなグラフが描画されます。グレーが一つ目のデータ、ブルーが二つ目のデータですが、元のデータと比較するとグレーで描かれた一つ目のデータの項目と数値がずれていることがわかります。

fig1

さらに、3つ目以降に2つ目のデータを複製して追加すると、当然2つ目以降はぴたりと重なるはずが、順に1項目ずつずれて表示されます。

fig2

ソースを見てみたところ、描画をデータごとにループさせる際の回転の処理が少しおかしいようです。
そこで、Chart.jsの以下の点を修正しました。

余計な処理をコメントアウトします。

↓コメントアウト

最初のデータの時には回転させず、2データ目以降はループの開始時に回転させる処理をデータごとに回すループの最初に加えます。

正確に把握できてはいないのですが、デフォルトの処理だとキャンバス全体をまず一度回転させ、その後データの1項目ごとに回転させつつ描画をする、というのがおおまかな流れのようです。その最初の回転をfor文の外に置くと、チャート描画のfunctionが実行されるごとに一回キャンバスの回転が起こり、それが累積していくイメージになっているようでした。

そして二つ目以降のデータの描画は、キャンバスがまず回転していることを基準として項目ごとに回転させているので、大本の回転を止めてしまうと、マイナス方向に一回回転した位置で描画されてしまいます。

そこで大本の回転はコメントアウトして、各データごとに最初一回だけ回転するように処理を挟みました。また、最初のデータに関しては最初の一度の回転は必要ないようなので、一回目は回転が起こらないような判定を加えています。

以上です。