memorandum
thinking about creation

Chart.jsでレーダーチャートをつくる

Entry Date _ 2017.08.15
/
ModifiedDate _ 2017.08.15

chartjs.jpg

仕事でレーダーチャートをつかう案件があり、ライブラリを探していくつか検討しました。そんな中で一番設置や利用が簡単そうでカスタマイズが容易そうだったのがChart.jsでしたので紹介したいと思います。

Chart.jsは、レーダーチャートの他にも、棒グラフ(Bar)、折れ線グラフ(Line)、円グラフ(Pie)など様々なチャートを描画することができるライブラリですが、このエントリーではレーダーチャートのみを扱います。

公式サイトhttp://www.chartjs.org/

■完成型

今回はChart.jsのレーダーチャートがどの程度カスタマイズ可能なのかを測るものとして、公式サイトにあるサンプルをjQueryを使ってわかりやすく改変してみました。

以下がその完成型になります。レーダーチャートを表示するだけでなく、そのデータをリアルタイムで変更できるようになっています。

■準備

まずheadの中でjQueryを読み込みます。でも、Chart.jsはJavaScriptライブラリなのでjQueryの読み込みは必須ではありません。

次にChart.jsを読み込みます。公式サイトから一式をダウンロードすることもできますが、多くのファイルの中で実際に使うのは1つのファイルだけなので今回はCDNに公開されているものを読み込みます。

次にbodyの中にチャート描画用のcanvasと、各種検証用のボタンを用意します。


そしてチャートを描画するjavaScriptを書き込みます。難しくはありませんので詳く説明しませんが、コメントを頼りに解析できるようになっています。またできるだけ多くオプションを指定してあるので、色々変えて検証してみてください。


Category

memorandum index