# 类别轴
如果使用全局配置,标签将从图表数据中包含的标签数组之一中绘制。如果只定义了 data.labels
,则将使用它。如果定义了 data.xLabels
并且轴是水平的,则将使用它。类似地,如果定义了 data.yLabels
并且轴是垂直的,则将使用此属性。同时使用 xLabels
和 yLabels
可以创建一个使用字符串作为 X 和 Y 轴的图表。
指定上述任何设置都会将 x 轴定义为 type: 'category'
,除非另有定义。为了更细粒度地控制类别标签,也可以在类别轴定义中添加 labels
。这样做不会应用全局默认值。
# 类别轴定义
全局
let chart = new Chart(ctx, {
type: ...
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: ...
}
});
作为轴定义的一部分
let chart = new Chart(ctx, {
type: ...
data: ...
options: {
scales: {
x: {
type: 'category',
labels: ['January', 'February', 'March', 'April', 'May', 'June']
}
}
}
});
# 配置选项
# 类别轴特定选项
命名空间: options.scales[scaleId]
名称 | 类型 | 描述 |
---|---|---|
min | string |number | 要显示的最小项。 更多... |
max | string |number | 要显示的最大项。 更多... |
labels | string[] |string[][] | 要显示的标签数组。当单个标签是字符串数组时,每个项目都会在新行上渲染。 |
# 所有笛卡尔坐标轴的通用选项
命名空间: options.scales[scaleId]
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
bounds | string | 'ticks' | 确定刻度范围。 更多... |
clip | boolean | true | 如果为 true,则将数据集绘制剪裁到刻度大小而不是图表区域 |
position | string | object | 轴的位置。 更多... | |
stack | string | 堆叠组。具有相同 position 和相同 stack 的轴将被堆叠。 | |
stackWeight | number | 1 | 刻度在堆叠组中的权重。用于确定组内为刻度分配的空间量。 |
axis | string | 这是哪种类型的轴。可能的值是:'x' 、'y' 。如果未设置,则从 ID 的第一个字符推断,该字符应为 'x' 或 'y' 。 | |
offset | boolean | false | 如果为 true,则会在两侧添加额外的空间,并且轴将按比例缩放以适应图表区域。默认情况下,对于条形图,此值设置为 true 。 |
title | object | 刻度标题配置。 更多... |
# 所有轴的通用选项
命名空间: options.scales[scaleId]
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
type | string | 正在使用的刻度类型。自定义刻度可以使用字符串键创建和注册。这允许更改图表轴的类型。 | |
alignToPixels | boolean | false | 将像素值对齐到设备像素。 |
backgroundColor | 颜色 | 刻度区域的背景颜色。 | |
border | object | 边框配置。 更多... | |
display | boolean |string | true | 控制轴的全局可见性(true 时可见,false 时隐藏)。当 display: 'auto' 时,轴仅在至少有一个关联的数据集可见时才可见。 |
grid | object | 网格线配置。 更多... | |
min | number | 用户定义的刻度最小值,覆盖来自数据的最小值。 更多... | |
max | number | 用户定义的刻度最大值,覆盖来自数据的最大值。 更多... | |
reverse | boolean | false | 反转刻度。 |
stacked | boolean |string | false | 数据是否应该堆叠。 更多... |
suggestedMax | number | 计算最大数据值时使用的调整。 更多... | |
suggestedMin | number | 计算最小数据值时使用的调整。 更多... | |
ticks | object | 刻度配置。 更多... | |
weight | number | 0 | 用于排序轴的权重。权重越高,离图表区域越远。 |
# 刻度配置
# 所有笛卡尔坐标轴的通用刻度选项
命名空间: options.scales[scaleId].ticks
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
align | string | 'center' | 沿着轴的刻度对齐方式。可以是 'start' 、'center' 、'end' 或 'inner' 。inner 对齐方式意味着对水平轴的第一个刻度使用 start 对齐,对最后一个刻度使用 end 对齐 |
crossAlign | string | 'near' | 垂直于轴的刻度对齐方式。可以是 'near' 、'center' 或 'far' 。请参阅 刻度对齐 |
sampleSize | number | ticks.length | 在决定可以显示多少个标签时要检查的刻度数量。设置较小的值会更快,但在标签长度变化很大时可能不太准确。 |
autoSkip | boolean | true | 如果为 true,则自动计算可以显示多少个标签并相应地隐藏标签。标签将在跳过任何标签之前旋转到 maxRotation 。关闭 autoSkip 以显示所有标签,无论如何。 |
autoSkipPadding | number | 3 | 启用 autoSkip 时,水平轴上刻度之间的填充。 |
includeBounds | boolean | true | 定义的 min 和 max 值是否应该作为刻度显示,即使它们不是“理想”的。 |
labelOffset | number | 0 | 以像素为单位的距离,用于将标签从刻度的中心点偏移(对于 x 轴,在 x 方向上,对于 y 轴,在 y 方向上)。注意:这可能会导致边缘的标签被画布边缘裁剪 |
maxRotation | number | 50 | 旋转以压缩标签时,刻度标签的最大旋转角度。注意:旋转只有在必要时才会发生。注意:仅适用于水平刻度。 |
minRotation | number | 0 | 刻度标签的最小旋转角度。注意:仅适用于水平刻度。 |
mirror | boolean | false | 将刻度标签翻转到轴周围,将标签显示在图表内部而不是外部。注意:仅适用于垂直刻度。 |
padding | number | 0 | 刻度标签和轴之间的填充。当设置在垂直轴上时,这将应用于水平 (X) 方向。当设置在水平轴上时,这将应用于垂直 (Y) 方向。 |
maxTicksLimit | number | 11 | 要显示的刻度和网格线的最大数量。 |
# 所有轴的通用刻度选项
命名空间: options.scales[scaleId].ticks
名称 | 类型 | 可脚本化 | 默认 | 描述 |
---|---|---|---|---|
backdropColor | 颜色 | 是 | 'rgba(255, 255, 255, 0.75)' | 标签背景的颜色。 |
backdropPadding | 填充 | 2 | 标签背景的填充。 | |
callback | function | 返回刻度值的字符串表示形式,它应该显示在图表上。请参阅 回调. | ||
display | boolean | true | 如果为 true,则显示刻度标签。 | |
color | 颜色 | 是 | Chart.defaults.color | 刻度的颜色。 |
font | 字体 | 是 | Chart.defaults.font | 请参阅 字体 |
major | object | {} | 主刻度配置. | |
padding | number | 3 | 设置刻度标签相对于轴的偏移量 | |
showLabelBackdrop | boolean | 是 | 对于径向刻度,true ,否则为 false | 如果为 true,则在刻度标签后面绘制背景。 |
textStrokeColor | 颜色 | 是 | `` | 文本周围笔划的颜色。 |
textStrokeWidth | number | 是 | 0 | 文本周围笔划的宽度。 |
z | number | 0 | 刻度层的 z 索引。在刻度绘制在图表区域上时很有用。值 <= 0 绘制在数据集下方,> 0 绘制在数据集上方。 |
# 最小值和最大值配置
对于 min
和 max
属性,该值必须是 labels
数组中的 string
或 numeric
值,作为该数组中标签的索引。在下面的示例中,x 轴将仅显示“三月”到“六月”。
let chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [10, 20, 30, 40, 50, 60]
}],
labels: ['January', 'February', 'March', 'April', 'May', 'June']
},
options: {
scales: {
x: {
min: 'March'
}
}
}
});
# 内部数据格式
内部类别刻度使用标签索引