レーダーチャートの使い方例

プラグインChart.jsを使用すると、割と簡単に、綺麗なグラフを描画することができる。
様々なグラフを作ることができるが、今回はレーダーチャートを例にしたいと思う。

公式ホームページ
https://www.chartjs.org/

• 折れ線グラフ
• 棒グラフ
• 円グラフ
• レーダーチャート
• 散布図

JSのライブラリを読み込む

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src="./Chart.js"></script>

JSコードの記述

$(function() {
	// チャートの枠組み
	var radarChartData = {
		labels: ["戦闘力", "解決率", "ボケ度", "ツッコミ度", "アブノーマル度"],
		datasets: [
			{
			// 透明を使いたいのでRGBAで色を再現→rgba(xxx,xxx,xxx,0.5):透過度50%
			//fillColor: "rgba(244,250,130,0.7)",	// チャート内の色
			fillColor: "rgba(244,0,0,0.7)",	// チャート内の色

			strokeColor: "#111111",	// チャートを囲む線の色
			pointColor: "#111111", 	// チャートの点の色
			pointStrokeColor: "#fff",	// 点を囲む線の色

			// 各項目の値
			data: [4,3,5,2,4]
			}
		]
	};

	// Canvas にレーダーチャートを描画
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var chart = new Chart(context);
	var rader = chart.Radar(radarChartData, {
		scaleShowLabels: true,  // 目盛を表示（true/false）
		pointLabelFontSize : 10, // ラベルのフォントサイズ

		//メモリの設定
		scaleOverride : true, // メモリの最大値を手動設定（true/false）
		scaleSteps : 5, // メモリの数
		scaleStartValue : 0, // メモリの最初の数
		scaleStepWidth : 1, // メモリの間隔
	});

});

レーダーチャート使用例

ヒルディブランド

かつて第七霊災迫るエオルゼアの地に、颯爽と現われた頼れる紳士。 旅の「事件屋」を名乗り、エオルゼア各地で次々と難事件を解決。 そして遂には、エオルゼアを救うため「勇者屋」となり、 落下しつつあった月の衛星「ダラガブ」を打ち砕くため、天へと旅立った。