径向轴
径向轴专门用于雷达图和极坐标面积图。这些轴覆盖图表区域,而不是位于边缘之一。Chart.js 默认包含一个径向轴。
可视组件
径向轴由可以单独配置的可视组件组成。这些组件是
角度线
轴的网格线绘制在图表区域上。它们从中心延伸到画布的边缘。在下面的示例中,它们是红色的。
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],
}]
};