# 线性径向轴
线性径向刻度用于绘制数值数据。顾名思义,线性插值用于确定一个值相对于轴中心的位置。
径向线性刻度提供了以下额外的配置选项。
# 配置选项
# 线性径向轴特定选项
命名空间:options.scales[scaleId]
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animate | 布尔值 | true | 是否从中心开始动画缩放图表 |
angleLines | 对象 | 角度线配置。 更多... | |
beginAtZero | 布尔值 | false | 如果为 true,则刻度将包含 0(如果尚未包含)。 |
pointLabels | 对象 | 点标签配置。 更多... | |
startAngle | 数字 | 0 | 刻度的起始角度。以度数表示,0 位于顶部。 |
# 所有轴的通用选项
命名空间:options.scales[scaleId]
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
type | 字符串 | 使用的刻度类型。自定义刻度可以创建并使用字符串键进行注册。这允许更改图表轴的类型。 | |
alignToPixels | 布尔值 | false | 将像素值对齐到设备像素。 |
backgroundColor | 颜色 | 刻度区域的背景颜色。 | |
display | 布尔值 |字符串 | true | 控制轴的全局可见性(true 时可见,false 时隐藏)。当 display: 'auto' 时,轴仅在至少一个关联的数据集可见时才可见。 |
grid | 对象 | 网格线配置。 更多... | |
min | 数字 | 用户定义的刻度最小值,覆盖数据中的最小值。 更多... | |
max | 数字 | 用户定义的刻度最大值,覆盖数据中的最大值。 更多... | |
reverse | 布尔值 | false | 反转刻度。 |
stacked | 布尔值 |字符串 | false | 数据是否应该堆叠。 更多... |
suggestedMax | 数字 | 计算最大数据值时使用的调整。 更多... | |
suggestedMin | 数字 | 计算最小数据值时使用的调整。 更多... | |
ticks | 对象 | 刻度配置。 更多... | |
weight | 数字 | 0 | 用于对轴进行排序的权重。权重越高,离图表区域越远。 |
# 刻度配置
# 线性径向轴特定刻度选项
命名空间:options.scales[scaleId].ticks
名称 | 类型 | 可脚本化 | 默认值 | 描述 |
---|---|---|---|---|
count | 数字 | 是 | 未定义 | 要生成的刻度数。如果指定,则会覆盖自动生成。 |
format | 对象 | 是 | 默认标签格式化程序使用的 Intl.NumberFormat (在新窗口中打开) 选项 | |
maxTicksLimit | 数字 | 是 | 11 | 要显示的刻度和网格线最大数量。 |
precision | 数字 | 是 | 如果定义了该值且未指定 stepSize ,则步长将四舍五入到指定的位数。 | |
stepSize | 数字 | 是 | 用户定义的刻度固定步长。 更多... |
# 所有轴的通用刻度选项
命名空间:options.scales[scaleId].ticks
名称 | 类型 | 可脚本化 | 默认值 | 描述 |
---|---|---|---|---|
backdropColor | 颜色 | 是 | 'rgba(255, 255, 255, 0.75)' | 标签背景色。 |
backdropPadding | 填充 | 2 | 标签背景的填充。 | |
callback | 函数 | 返回刻度值的字符串表示形式,如应该在图表上显示的那样。请参见 回调。 | ||
display | 布尔值 | true | 如果为 true,则显示刻度标签。 | |
color | 颜色 | 是 | Chart.defaults.color | 刻度颜色。 |
font | 字体 | 是 | Chart.defaults.font | 请参见 字体 |
major | 对象 | {} | 主要刻度配置. | |
padding | 数字 | 3 | 设置刻度标签相对于轴的偏移量 | |
showLabelBackdrop | 布尔值 | 是 | 径向刻度为 true ,否则为 false | 如果为 true,则在刻度标签后面绘制背景。 |
textStrokeColor | 颜色 | 是 | `` | 文本周围描边的颜色。 |
textStrokeWidth | 数字 | 是 | 0 | 文本周围描边的宽度。 |
z | 数字 | 0 | 刻度图层的 z 索引。当刻度绘制在图表区域上时很有用。值 <= 0 绘制在数据集下方,> 0 绘制在数据集上方。 |
可脚本化上下文在 选项 部分中进行了描述。
# 网格线配置
命名空间:options.scales[scaleId].grid
,它定义了轴网格线的选项。
名称 | 类型 | 可脚本化 | 可索引 | 默认值 | 描述 |
---|---|---|---|---|---|
borderDash | number[] | [] | 网格线上破折号的长度和间距。请参见 MDN (在新窗口中打开)。 | ||
borderDashOffset | 数字 | 是 | 0.0 | 线破折号的偏移量。请参见 MDN (在新窗口中打开)。 | |
circular | 布尔值 | false | 如果为 true,则网格线为圆形(仅在雷达和极地区域图表上)。 | ||
color | 颜色 | 是 | 是 | Chart.defaults.borderColor | 网格线的颜色。如果指定为数组,则第一种颜色应用于第一条网格线,第二种颜色应用于第二条网格线,依此类推。 |
display | 布尔值 | true | 如果为 false,则不要显示此轴的网格线。 | ||
lineWidth | 数字 | 是 | 是 | 1 | 网格线的描边宽度。 |
可脚本化上下文在 选项 部分中进行了描述。
# 轴范围设置
鉴于轴范围设置的数量,了解它们如何相互作用非常重要。
suggestedMax
和 suggestedMin
设置仅更改用于缩放轴的数据值。这些对于扩展轴范围同时保持自动拟合行为很有用。
let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
在此示例中,最大的正值为 50,但数据最大值扩展到 100。但是,由于最低数据值低于 suggestedMin
设置,因此它被忽略了。
let chart = new Chart(ctx, {
type: 'radar',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
r: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
});
与 suggested*
设置相反,min
和 max
设置为轴设置明确的端点。当这些设置后,一些数据点可能不可见。
# 步长
如果设置了该值,则刻度将按 stepSize
的倍数进行枚举,每个增量有一个刻度。如果未设置,则刻度会使用优美的数字算法自动进行标注。
此示例设置了一个图表,其 y 轴在 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5
处创建刻度。
let options = {
scales: {
r: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
# 角度线选项
以下选项用于配置从图表中心辐射到点标签的角度线。命名空间:options.scales[scaleId].angleLines
名称 | 类型 | 可脚本化 | 默认值 | 描述 |
---|---|---|---|---|
display | 布尔值 | true | 如果为 true,则显示角度线。 | |
color | 颜色 | 是 | Chart.defaults.borderColor | 角度线的颜色。 |
lineWidth | 数字 | 是 | 1 | 角度线的宽度。 |
borderDash | number[] | 是1 | [] | 角度线上破折号的长度和间距。请参见 MDN (在新窗口中打开)。 |
borderDashOffset | 数字 | 是 | 0.0 | 线破折号的偏移量。请参见 MDN (在新窗口中打开)。 |
borderDash
设置仅接受静态值或函数。不支持传递数组数组。
可脚本化上下文在 选项 部分中进行了描述。
# 点标签选项
以下选项用于配置显示在刻度周边的点标签。命名空间:options.scales[scaleId].pointLabels
名称 | 类型 | 可脚本化 | 默认值 | 描述 |
---|---|---|---|---|
backdropColor | 颜色 | true | 未定义 | 点标签的背景颜色。 |
backdropPadding | 填充 | 2 | 标签背景的填充。 | |
borderRadius | number |object | true | 0 | 点标签的圆角 |
display | 布尔值 |字符串 | true | 如果为真,则显示点标签。当display: 'auto' 时,如果标签与另一个标签重叠,则隐藏该标签。 | |
callback | 函数 | 回调函数,用于将数据标签转换为点标签。默认实现仅返回当前字符串。 | ||
color | 颜色 | 是 | Chart.defaults.color | 标签的颜色。 |
font | 字体 | 是 | Chart.defaults.font | 请参见 字体 |
padding | 数字 | 是 | 5 | 图表和点标签之间的填充。 |
centerPointLabels | 布尔值 | false | 如果为真,则点标签居中。 |
可脚本化上下文在 选项 部分中进行了描述。
# 内部数据格式
在内部,线性径向刻度使用数字数据