ABOUTChart.jsでレーダーチャートを作成する方法2022.05.16TipsChart.jsを使用して、レーダーチャートを作成する方法の備忘録です。Chart.jsは、Webサイト上で簡単にグラフを作成することができるJavaScriptのライブラリです。レーダーチャートの他に、棒グラフ、円グラフ、折れ線グラフなども簡単に作成できます。Chart.jsChart.jsの読み込みChart.jsを使用するために、まずはCDNに公開されているjsファイルを読み込むため下記のコードをページ内に記入します。記入する箇所は<head>、<body>内どちらでもかまいません。src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>Chart.jsをダウンロードする方法Chart.jsをダウンロードして使用したい場合は、Githubからダウンロードできます。Github|Chart.jsページの下部にあるAssetsのtgzファイルをダウンロードして解凍して使用します。グラフのデータを設定する次に、表示するグラフのデータをJavaScriptで記述します。});</script>「type」では、グラフの種類を指定しています。‘radar’」を設定します。「data」では、表示するグラフのデータを設定します。「labels」にグラフの各項目を、「datasets」の「data」に各項目の値を設定しています。上の例では、「国語」の値が「2」、「算数」の値が「4」となります。<canvas>タグを設置するレーダーチャートを表示したい箇所に<canvas>タグを設置します。idの「myChart」の部分は、上記の「getElementById」で設定した値を使用します。id="myChart"></canvas>グラフのオプションを設定する表示したグラフは、オプションを設定することでグラフの目盛やデザインなどを変更することができます。上記で紹介したコードの書き方を踏まえたレーダーチャートのサンプルです。});</script></body></html>目盛を0〜5の値に変更し、間隔も調整しました。チャートグラフの部分は青色に変更しています。各項目の設定の詳細は下記にまとめています。グラフのタイトルラベルグラフの上に表示されているタイトルラベルを変更します。設定されていない場合は、「undefined」と表示されます。"期末試験成績"}]「datasets」の「label」で、表示されるラベルを変更できます。タイトルラベルを削除したい場合は、オプションの「legend」で非表示にできます。}}目盛デフォルトでは、データの値の最大値、最小値に合わせてグラフの目盛が自動で割り当てられます。グラフの目盛の値や幅は、オプションで指定できます。}}サイズグラフはレスポンシブに対応しており、自動でサイズが変わります。グラフのサイズを指定したい場合は、オプションでレスポンシブにならないように設定し、<canvas>タグに「width」や「height」など大きさを指定します。width="400"></canvas>チャートデザイン表示するチャートのデザインは「data」の「datasets」から変更できます。}]}「backgroundColor」、「borderColor」でグラフの背景色と枠線部分の色を変更しています。背景部分の透過を設定するため数値はRGBAを使用しています。透過する必要がなければ色名や16進コードなど他の表記も使用できます。破線のオフセットグラフデザイン表示するグラフのデザインは「scales」から変更できます。false」を設定することで、各パーツを非表示にすることもできます。そのほかに設定できる項目は、下記のレーダーチャートのページで確認できます。(日本語版)2つのデータを表示する複数のチャートを一つのグラフ上に表示する場合は、「datasets」内にグラフのデータを追加します。