# 线性轴

线性刻度用于绘制数值数据。它可以放置在 x 轴或 y 轴上。散点图类型会自动配置折线图,使其使用其中一个刻度作为 x 轴。顾名思义,线性插值用于确定值在轴上的位置。

# 配置选项

# 线性轴特定选项

命名空间: options.scales[scaleId]

名称 类型 描述
beginAtZero boolean 如果为 true,则刻度将包含 0(如果它尚未包含)。
grace number|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

名称 类型 可脚本化 默认值 描述
count number undefined 要生成的刻度数量。如果指定,这将覆盖自动生成。
format object 用于默认标签格式化程序的 Intl.NumberFormat (在新窗口中打开) 选项
precision number 如果定义且未指定 stepSize,则步长将四舍五入到小数点后这么多位。
stepSize number 用户定义的刻度固定步长。 更多...

# 所有笛卡尔坐标系轴的通用刻度选项

命名空间: 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 返回刻度值的字符串表示形式,应在图表上显示。参见 callback
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 绘制在上方。

# 步长

如果设置,则刻度将通过 stepSize 的倍数进行枚举,每个增量有一个刻度。如果未设置,则刻度将使用不错的数字算法自动标记。

此示例设置了一个图表,其中 y 轴在 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5 处创建刻度。

let options = {
    scales: {
        y: {
            max: 5,
            min: 0,
            ticks: {
                stepSize: 0.5
            }
        }
    }
};

# Grace

如果值为以 % 结尾的字符串,则将其视为百分比。如果是数字,则将其视为值。该值将添加到最大数据值中,并从最小数据值中减去。这将扩展刻度范围,就好像数据值比实际值更大一样。

const config = {
  type: 'bar',
  data,
  options: {
    scales: {
      y: {
        type: 'linear',
        grace: '5%'
      }
    },
    plugins: {
      legend: false
    }
  }
};

# 内部数据格式

线性刻度内部使用数值数据。

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