# 线性径向轴

线性径向刻度用于绘制数值数据。顾名思义,线性插值用于确定一个值相对于轴中心的位置。

径向线性刻度提供了以下额外的配置选项。

# 配置选项

# 线性径向轴特定选项

命名空间: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 网格线的描边宽度。

可脚本化上下文在 选项 部分中进行了描述。

# 轴范围设置

鉴于轴范围设置的数量,了解它们如何相互作用非常重要。

suggestedMaxsuggestedMin 设置仅更改用于缩放轴的数据值。这些对于扩展轴范围同时保持自动拟合行为很有用。

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* 设置相反,minmax 设置为轴设置明确的端点。当这些设置后,一些数据点可能不可见。

# 步长

如果设置了该值,则刻度将按 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 (在新窗口中打开)
  1. 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 如果为真,则点标签居中。

可脚本化上下文在 选项 部分中进行了描述。

# 内部数据格式

在内部,线性径向刻度使用数字数据

上次更新: 2024/5/17 下午 12:33:38