##■背景
レーダーチャートを作成する機会があり、実装したので参考にしていただけると幸いです。
##■レーダーチャートとは
レーダーチャートは、複数の項目がある変量を構成比に直すことなく正多角形上に表現したグラフ。中心を0とし各項目ごとに値が大きいほど外側になるよう表現する。
##■レーダーチャート実装
レーダーチャートを0から実装しようとすると、膨大な時間と労力がかかるので、今回は、chart.jsという JavaScript でグラフ(チャート)を描画するためのライブラリを使用しました。
chart.jsではレーダーチャートの他、折れ線グラフ、棒グラフ、円グラフ,散布図なども簡単に作成できます。
実装は至ってシンプル・・
①Chart.js読み込み
→CDNに公開されているjsファイルを読み込むことで、Chart.jsが使用可能となります。
②canvasの設置
→canvasの箇所にチャートが描画されます。
③グラフの設定
new Chart()によって設定により、どのようなグラフなのかなど設定できます。
##■グラフの設定解説
#####typeでは、レーダーチャートを描画したいので、radarを指定します。
type: 'radar',
data中に、labelsを設定すると、チャート周りにその設定したラベルが表示されます。
labels: ["りんご", "ぶどう", "ばなな", "めろん", "すいか"],
data中に、datasetsを設定することで、より詳細にカスタマイズが可能となります。
背景色,枠線の色,結合点の背景色,結合点の枠線の色などなど
また、datasets 内のdataの数は、labelsに合わせる必要があります。
data: [1, 4, 2, 4, 3]
・optionでは、 レスポンシブ指定やラベルなどのフォント設定、グラフメモリの設定が行なえます。
下記で、詳しく解説されていますので、参照してください。
https://tr.you84815.space/chartjs/configuration/elements.html
###コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>チャート</h1>
<canvas id="myChart"></canvas>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
//グラフの種類
type: 'radar',
//データの設定
data: {
//データ項目のラベル
labels: ["りんご", "ぶどう", "ばなな", "めろん", "すいか"],
//データセット
datasets: [{
label: "〇〇分析",
//背景色
backgroundColor: "rgba(51,255,51,0.5)",
//枠線の色
borderColor: "rgba(51,255,51,1)",
//結合点の背景色
pointBackgroundColor: "rgba(51,255,51,1)",
//結合点の枠線の色
pointBorderColor: "#fff",
//結合点の背景色（ホバ時）
pointHoverBackgroundColor: "#fff",
//結合点の枠線の色（ホバー時）
pointHoverBorderColor: "rgba(51,255,51,1)",
//結合点より外でマウスホバーを認識する範囲（ピクセル単位）
hitRadius: 5,
//グラフのデータ
data: [1, 4, 2, 4, 3]
}]
},
//オプションの設定
options: {
// レスポンシブ指定
responsive: true,
maintainAspectRatio: false,
scale: {
ticks: {
// 最小値の値を0指定
beginAtZero: true,
min: 0,
stepSize: 1,
// 最大値を指定
max: 5,
},
pointLabels: {
fontSize: 10
}
},
//ラベル非表示
legend: {
// display: false
fontSize: 10,
labels: {
// このフォント設定はグローバルプロパティを上書きします。
fontSize: 14,
}
}
}
});
</script>
###■描画されたグラフ
###■参考文献
https://tr.you84815.space/chartjs/configuration/elements.html
https://ja.wikipedia.org/wiki/%E3%83%AC%E3%83%BC%E3%83%80%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88