# 类别轴

如果使用全局配置,标签将从图表数据中包含的标签数组之一中绘制。如果只定义了 data.labels,则将使用它。如果定义了 data.xLabels 并且轴是水平的,则将使用它。类似地,如果定义了 data.yLabels 并且轴是垂直的,则将使用此属性。同时使用 xLabelsyLabels 可以创建一个使用字符串作为 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 定义的 minmax 值是否应该作为刻度显示,即使它们不是“理想”的。
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 绘制在数据集上方。

# 最小值和最大值配置

对于 minmax 属性,该值必须是 labels 数组中的 stringnumeric 值,作为该数组中标签的索引。在下面的示例中,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'
            }
        }
    }
});

# 内部数据格式

内部类别刻度使用标签索引

最后更新: 2024年5月17日,下午12:33:38