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"];
// 1つ目の系列の情報を設定
var series01name = "データ1"; // 系列1の名前
var series01data = [ 15, 40, 30, 45, 30, 25, 20]; // 系列1データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列1の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列1の線の色
// 2つ目の系列の情報を設定
var series02name = "データ2";
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)";
// 3つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大/最小/目盛りの間隔を設定
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,
}
// 3つ以上系列を描画する場合は上のセットを追加する
]
},
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"];
// 1つ目の系列の情報を設定
var series01name = "データ1"; // 系列1の名前
var series01data = [ 10, 40, 20, 45, 30, 25, 20]; // 系列1データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列1の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列1の線の色
// 2つ目の系列の情報を設定
var series02name = "データ2";
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)";
// 3つ目の系列の情報を設定
var series03name = "データ3";
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)";
// 4つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大/最小/目盛りの間隔を設定
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],
}
// 4つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
scales: {
r: {
display: true,
suggestedMax: rmax,
suggestedMin: rmin,
ticks: {
stepSize: rstep,
},
}
}
}
});
</script>
コメント