BLOG

【3系】Chart.jsでレーダーチャートを描画してみよう

2021/09/28

Chart.jsというJavaScriptのライブラリを使えば、簡単にサイト上にグラフを描画することができます。

Chart.jsで描画できるグラフは折れ線グラフ、棒グラフ、円グラフ、レーダーチャート、散布図など多岐に渡りますが、

今回はその中のレーダーチャートの描画の方法を紹介します。

Chart.jsの読み込み

Chart.jsを利用する主な方法には以下の3種類があります。

※今回ご紹介する方法は全て2021年9月現在の最新である3.5.1バージョンの場合の方法になります。
 別のバージョンではChart.jsの利用方法が異なる場合があります。

※それぞれの読み込み方法で、「chart.js」以外に「chart.min.js」も利用可能です。
 どちらも機能に違いはなく、「chart.min.js」は「chart.js」からスペースや改行をなくして
 ファイルを軽量化したものになります。

1CDNを利用する方法

CDNとは、「Content Delivery Network(コンテンツ配信ネットワーク)」の略で、

Webコンテンツ配信元のサーバー(オリジンサーバー)に直接アクセスしてダウンロードするのではなく、
オリジンサーバーからWebコンテンツのコピーを取得した複数の代理サーバー(キャッシュサーバー)のどれかからコンテンツをダウンロードする仕組みです。

キャッシュサーバーは世界中に配置されていて、自分に近い場所のキャッシュサーバーを自動で選択してアクセスするので、ダウンロードの高速化が実現できます。

CDNから読み込む場合は、自分のサーバー上にChart.jsを置かなくても利用することができます。

使い方はとても簡単で、以下のコードをChart.jsを利用したい箇所の直前やheadタグに記述するだけです。

2npmを利用してChart.jsをローカルにインストールする方法

npmbowerといったパッケージ管理システムを使って、Chart.jsをローカルにインストールすることもできます。

今回はnpmを使ったインストール方法をご紹介します。

npmを使ってChart.jsをインストールするには、コマンドプロンプトで以下のコードを実行します。

これでローカルのnode_modulesフォルダにインストールできたら、
chart.js/dist/chart.jsをサーバー上に置いて、scriptタグで読み込みます。

3GithubからChart.jsをダウンロードする方法

パッケージ管理システムを利用しない場合は、Githubからダウンロードします。

Chart.jsのGithubのページにアクセスし、

ページ下部のAssetsの「chart.js-3.5.1.tgz」をクリックしてダウンロードします。

「chart.js-3.5.1.tgz」をクリックしてダウンロード

「.tgz」という拡張子で圧縮されたファイルがダウンロードできました

「chart.js-3.5.1.tgz」は圧縮されたファイルで、解凍する必要があるので、
コマンドプロンプトで「chart.js-3.5.1.tgz」が置かれているディレクトリに移動し、

以下のコマンドで解凍します。

解凍に成功すると「package」フォルダができるので、

解凍されて「package」ができました

package/dist/chart.jsをサーバー上に置いて、scriptタグで読み込みます。

レーダーチャートの表示

Chart.jsの読み込みができたら、HTML上のグラフを表示したい箇所に以下のコードを記述します。
<canvas>はあまり見慣れないかもしれませんが、JavaScriptを使って図形を描画する時に使われるタグです。
(詳しくは<canvas>の公式リファレンスを参照)

※id,width,heightは好きな値を設定してください。

前述の通り、<canvas>にグラフを描画するためには、どんなグラフにするのかをJavaScriptファイル上に記述する必要があります。

JavaScriptファイル上に記述する内容は以下の通りです。

※"myRadarChart"は<canvas>のidと一致させてください。

「type: '○○'」はグラフの種類の指定で、
「type: 'radar'」でレーダーチャートを指定しています。

この値を変更することで折れ線グラフや棒グラフなども指定できます。
詳しくはChart.jsの公式リファレンスを参照してください。

次は[グラフのデータ][グラフのオプション]の中の記述の仕方を見ていきます。

グラフのデータ設定

グラフのデータは以下のように設定します。

この他にも、「hover○○」プロパティでホバー時の効果、「border○○」プロパティで枠線の設定、「point○○」プロパティで頂点の設定ができます。
詳しくはレーダーチャートのデータセットプロパティを参照してください。

グラフのオプション設定

Chart.jsの2系と3系で、optionsの設定方法が大きく変わっています。
Chart.jsについて過去に書かれたブログなどは、2系の場合の記述の仕方になっていることが多いので、
3系を読み込んでいるのに2系の記述をしてしまわないように気をつけてください。

Chart.jsで描画するレーダーチャートのサンプル

Chart.jsでレーダーチャートを描画すると以下のように表示されます。
ここではCDNを利用して描画しています。
ソースコードとデモページもあるので、そちらもぜひご覧ください!

ソースの表示

デモページ

まとめ

今回はChart.jsでレーダーチャートを作成する方法を紹介しました。

筆者がサイト制作でレーダーチャートを扱うことになった際、レーダーチャートについてピンポイントで詳しく紹介している記事があまりなかったので、自分が調べたことをまとめてみました。

ここで紹介した以外にも設定できる項目は色々あるので、詳しい情報を知りたい時はChart.js公式ドキュメントもぜひ参照してください。

最後までお読みいただきありがとうございました。

参考サイト

Chart.js公式ドキュメント
とほほのChart.js入門