当前位置: 首页 > 文档资料 > Chart.js 开发文档 >

1.6.2.1 线性(linear

优质
小牛编辑
125浏览
2023-12-01

线性刻度用于绘制数字数据。顾名思义,线性插值用于确定值与轴中心的关系。

以下附加配置选项由径向线性刻度提供。

配置选项

该轴具有ticks,angle lines(从中心向外显示在雷达图中的线),pointLabels(雷达图中边缘附近的标签)的配置属性。下面文档定义了这些部分中的每个属性。

名称类型描述
angleLinesObject角度线配置 更多...
gridLinesObject网格线配置 更多...
pointLabelsObject点标签配置 更多...
ticksObject刻度配置 更多...

刻度选项

以下选项由线性刻度提供。它们都位于ticks子选项中。该坐标轴支持常见的刻度配置选项。

名称类型默认值描述
backdropColorColor'rgba(255, 255, 255, 0.75)'标签背景色
backdropPaddingXNumber2水平填充的背景标签
backdropPaddingYNumber2垂直填充的背景标签
beginAtZeroBooleanfalse如果为true,当刻度不包含0的时候,自动包含
minNumber用户定义的最小刻度,覆盖数据的最小值更多...
maxNumber用户定义的最大刻度,覆盖数据的最大值更多...
maxTicksLimitNumber11要显示的最大刻度和网格线数量
stepSizeNumber用户定义的比例尺的固定步长 更多...
suggestedMaxNumber计算最大数据值时使用的调整更多...
suggestedMinNumber计算最小数据值时使用的调整更多...
showLabelBackdropBooleantrue如果为true,则在刻度标签后面绘制背景

坐标轴范围设置

考虑到轴范围设置的数量,理解它们如何相互作用是很重要的。

建议的最大和建议的最小设置仅更改用于缩放轴的数据值。这些对于扩展轴的范围同时保持自动贴合行为很有用。

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: {
        scale: {
            ticks: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

suggested*设置相反,minmax设置显式结束于坐标轴。设置这些属性时,某些数据点可能不可见。

步长

如果设置的话,则刻度标记将以stepSize的倍数枚举增加刻度。如果未设置,则使用nice numbers算法自动标记。

本示例使用y轴设置图表,创建0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5的刻度。

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

角度线选项

以下选项用于配置从图表中心向点标签辐射的角度线。它们可以在angleLines子选项中找到。请注意,这些选项仅适用于angleLines.display为true的情况。

名称类型默认值描述
displayBooleantrue如果为true,则显示角度线
colorColorrgba(0, 0, 0, 0.1)角度线颜色
lineWidthNumber1角度线宽度

点标签选项

以下选项用于配置刻度边界上显示的点标签。它们可以在pointLabels子选项中找到。请注意,这些选项仅适用于pointLabels.display为true的情况。

名称类型默认值描述
callbackFunction将数据标签转换为点标签的回调函数。默认只返回当前字符串
fontColorColor'#666'点标签的字体颜色
fontFamilyString"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"渲染标签时使用的字体
fontSizeNumber10字体大小(以像素为单位)
fontStyleString'normal'渲染点标签时使用的字体样式