放射軸
放射軸は、特にレーダーチャートとポーラーエリアチャートのタイプで使用されます。これらの軸は、端に配置されるのではなく、チャート領域に重ねて表示されます。Chart.jsには、デフォルトで1つの放射軸が含まれています。
視覚的な構成要素
放射軸は、個別に設定できる視覚的な構成要素で構成されています。これらの構成要素は次のとおりです。
角度線
軸のグリッド線は、チャート領域に描画されます。これらは、中心からキャンバスの端に向かって伸びています。下の例では、これらは赤色です。
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
angleLines: {
color: 'red'
}
}
}
}
};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
グリッド線
軸のグリッド線は、チャート領域に描画されます。下の例では、これらは赤色です。
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
grid: {
color: 'red'
}
}
}
}
};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
ポイントラベル
ポイントラベルは、各角度線の値を示します。下の例では、これらは赤色です。
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
pointLabels: {
color: 'red'
}
}
}
}
};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
目盛り
目盛りは、軸の中心からの距離に基づいて値をラベル付けするために使用されます。下の例では、これらは赤色です。
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
ticks: {
color: 'red'
}
}
}
}
};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};