径向轴
¥Radial Axes
径向轴专门用于雷达和极地区域图类型。这些轴覆盖图表区域,而不是位于其中一个边缘上。Chart.js 中默认包含一个径向轴。
¥Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
视觉组件
¥Visual Components
径向轴由可以单独配置的视觉组件组成。这些组件是:
¥A radial axis is composed of visual components that can be individually configured. These components are:
角线
¥Angle Lines
轴的网格线绘制在图表区域上。它们从中心向画布边缘扩展。在下面的示例中,它们是红色的。
¥The grid lines for an axis are drawn on the chart area. They stretch out from the center towards the edge of the canvas. In the example below, they are red.
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],
}]
};
网格线
¥Grid Lines
轴的网格线绘制在图表区域上。在下面的示例中,它们是红色的。
¥The grid lines for an axis are drawn on the chart area. In the example below, they are red.
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],
}]
};
点标签
¥Point Labels
点标签指示每条角度线的值。在下面的示例中,它们是红色的。
¥The point labels indicate the value for each angle line. In the example below, they are red.
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],
}]
};
刻度
¥Ticks
刻度用于根据距离轴中心的距离来标记值。在下面的示例中,它们是红色的。
¥The ticks are used to label values based on how far they are from the center of the axis. In the example below, they are red.
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],
}]
};