2017.08.15Tweet仕事でレーダーチャートをつかう案件があり、ライブラリを探していくつか検討しました。そんな中で一番設置や利用が簡単そうでカスタマイズが容易そうだったのがChart.jsでしたので紹介したいと思います。Chart.jsは、レーダーチャートの他にも、棒グラフ(Bar)、折れ線グラフ(Line)、円グラフ(Pie)など様々なチャートを描画することができるライブラリですが、このエントリーではレーダーチャートのみを扱います。今回はChart.jsのレーダーチャートがどの程度カスタマイズ可能なのかを測るものとして、公式サイトにあるサンプルをjQueryを使ってわかりやすく改変してみました。以下がその完成型になります。レーダーチャートを表示するだけでなく、そのデータをリアルタイムで変更できるようになっています。■準備まずheadの中でjQueryを読み込みます。Chart.jsはJavaScriptライブラリなのでjQueryの読み込みは必須ではありません。次にChart.jsを読み込みます。公式サイトから一式をダウンロードすることもできますが、多くのファイルの中で実際に使うのは1つのファイルだけなので今回はCDNに公開されているものを読み込みます。次にbodyの中にチャート描画用のcanvasと、各種検証用のボタンを用意します。ランダムデータデータセットの追加データセットの削除データの追加データの削除そしてチャートを描画するjavaScriptを書き込みます。難しくはありませんので詳く説明しませんが、コメントを頼りに解析できるようになっています。できるだけ多くオプションを指定してあるので、色々変えて検証してみてください。indexソースコードは自己責任により自由にお使いください。何らかの不利益が生じたとしても一切責任を負いません。