ajec's BLOG

「ちょっとだけ、誰かに教えたくなる」がコンセプト。

Chart.jsのVer2.0でオプションを使う方法。(レーダーチャート)

Chart.jsのVer2.0でオプションを使う方法。
何故かレーダーチャートの中心が数値の最小値になってしまうという問題に悩まされること8時間。

そもそもVer1.0とVer2.0でコマンドが異なるというのを知らず、片っ端から試すというダメっぷり。
最後の最後にたどり着いたのは、やはりここだった...
http://www.chartjs.org/docs/#radar-chart-chart-options
やっぱね、そうだよね。
マニュアルはしっかりと読もう。





オプションの設定方法はこちら。

options:{
	scale:{
		ticks:{
			beginAtZero:true,
			max:1000,
			min:0
		}																			
	}
}

コツ(?)はoptions、scale、ticksの順番で囲っていくこと。

完成はこちら。

<canvas id="myRadarChart"></canvas>
<script>
	var ctx = document.getElementById("myRadarChart").getContext("2d");
	var myRadarChart = new Chart(ctx, {
		type: 'radar',
		data: { 
			labels: ["攻撃力", "パワー", "敏捷性", "守備力", "闘争心", "体力", "総合力"],
			datasets: [{
				label: "戦闘力",
				backgroundColor: "rgba(20,0,198,0.2)",
				borderColor: "rgba(20,0,198,1)",
				pointBackgroundColor: "rgba(179,181,198,1)",
				pointBorderColor: "#fff",
				pointHoverBackgroundColor: "#fff",
				pointHoverBorderColor: "rgba(179,181,198,1)",
				data: [100,200,300,200,100,300,500]

			}]
		},
		options:{
			scale:{
				ticks:{
					beginAtZero:true,
					max:1000,
					min:0
				}																			
			}
		}

	});
</script>

また一つ賢くなった...。(ゲッソリ)





アクセスカウンター