Chart.jsを使ってレーダーチャートを表示するためのスクリプトサンプルです。
コピペして流用しやすいよう、データなど書き換えが必要な部分はスクリプトの最初のほうに変数としてまとめて書いています。
ここで掲載しているサンプルはChart.jsの v3.7.0 向けです。
v2.x.x系のようにメジャーバージョンが異なる場合、v.3系でもマイナーバージョンが異なる場合は正しく表示できないものもありますので注意。
目次
普通のレーダーチャート
複数の尺度でデータを比較したい場合に活用したいレーダーチャート。
typeにraderを指定するとレーダーチャートになります。
軸もxyでないので、scalesを設定する場合はscales.rに指定していきます。
スクロールできます
| 項目 | 概要 |
|---|---|
| borderColor | 線の色を指定する。 |
| backgroundColor | 棒グラフ内の塗りつぶしの色を指定する。 |
グラフのスクリプトを表示
<canvas id="myChart1" style="padding: 10px;"></canvas>
<script>
// 各軸のラベル
var rlabels = ["A", "B", "C", "D", "E", "F", "G"];
// １つ目の系列の情報を設定
var series01name = "データ１"; // 系列１の名前
var series01data = [ 15, 40, 30, 45, 30, 25, 20]; // 系列１データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name = "データ２";
var series02data = [ 35, 15, 45, 20, 45, 35, 25];
var series02bgcolor = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// ３つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大／最小／目盛りの間隔を設定
var rmax = 50; // グラフ縦軸の最大
var rmin = 0; // グラフ縦軸の最小
var rstep = 10; // グラフ縦軸の目盛り線を引く間隔
var ctx = document.getElementById("myChart1").getContext("2d");
var myChart1 = new Chart(ctx, {
type: "radar",
data: {
labels: rlabels,
datasets:[
{
label: series01name,
data: series01data,
backgroundColor: series01bgcolor,
borderColor: series01linecolor,
borderWidth: 1,
},
{
label: series02name,
data: series02data,
backgroundColor: series02bgcolor,
borderColor: series02linecolor,
borderWidth: 1,
}
// ３つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
scales: {
r: {
display: true,
suggestedMax: rmax,
suggestedMin: rmin,
ticks: {
stepSize: rstep,
},
}
}
}
});
</script>塗りつぶしなし／点線（破線）のレーダーチャート
レーダーチャートはデフォルトで塗りつぶしが有効になっているため、塗りつぶさない場合はfillの設定が必要です。
また、ほかのグラフ同様グラフ線の表示をカスタマイズすることができます。
レーダーチャート内を塗りつぶさない場合はfillにfalseを指定する必要があります。
また、ほかのグラフ同様borderDashを指定するとグラフ線を点線（破線）にすることができます。
スクロールできます
| 項目 | 概要 |
|---|---|
| borderDash | 対象のデータセットを点線（破線）で表示する。 |
グラフのスクリプトを表示
<canvas id="myChart2" style="padding: 10px;"></canvas>
<script>
// 各軸のラベル
var rlabels = ["A", "B", "C", "D", "E", "F", "G"];
// １つ目の系列の情報を設定
var series01name = "データ１"; // 系列１の名前
var series01data = [ 10, 40, 20, 45, 30, 25, 20]; // 系列１データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name = "データ２";
var series02data = [ 45, 15, 45, 20, 45, 35, 25];
var series02bgcolor = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// ３つ目の系列の情報を設定
var series03name = "データ３";
var series03data = [ 20, 25, 35, 30, 40, 20, 15];
var series03bgcolor = "rgba(132, 200, 255, 0.2)";
var series03linecolor = "rgba(132, 200, 255, 1.0)";
// ４つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大／最小／目盛りの間隔を設定
var rmax = 50; // グラフ縦軸の最大
var rmin = 0; // グラフ縦軸の最小
var rstep = 10; // グラフ縦軸の目盛り線を引く間隔
var ctx = document.getElementById("myChart2").getContext("2d");
var myChart2 = new Chart(ctx, {
type: "radar",
data: {
labels: rlabels,
datasets:[
{
label: series01name,
data: series01data,
backgroundColor: series01bgcolor,
borderColor: series01linecolor,
borderWidth: 1,
},
{
label: series02name,
data: series02data,
backgroundColor: series02bgcolor,
borderColor: series02linecolor,
borderWidth: 1,
fill: false,
},
{
label: series03name,
data: series03data,
backgroundColor: series03bgcolor,
borderColor: series03linecolor,
borderWidth: 1,
borderDash: [5, 5],
}
// ４つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
scales: {
r: {
display: true,
suggestedMax: rmax,
suggestedMin: rmin,
ticks: {
stepSize: rstep,
},
}
}
}
});
</script>
コメント