Chart.js 坐标轴

轴是图表的组成部分。 它们用于确定数据如何映射到图表上的像素值。 在笛卡尔图表中,有 1 个或多个 X 轴和 1 个或多个 Y 轴将点映射到二维画布上。 这些轴被称为“笛卡尔轴”。

在径向图表(例如雷达图或极地区域图)中,有一个轴映射角度和径向方向上的点。 这些被称为“径向轴”。

Chart.js >v2.0 中的 scales 明显更强大,但也不同于 v1.0 中的 scales

  • 支持多个 X 和 Y 轴。
  • 内置标签自动跳过功能检测可能重叠的刻度和标签,并删除每第 n 个标签以保持正常显示。
  • 支持比例标题。
  • 无需编写全新的图表类型即可扩展新的刻度类型。

默认比例

笛卡尔图表的默认 scaleId 是“x”和“y”。 对于径向图表:'r'。 每个数据集都映射到它需要的每个轴(x、y 或 r)的比例。 数据集映射到的 scaleId 由 xAxisID、yAxisID 或 rAxisID 确定。 如果未指定轴的 ID,则使用该轴的第一个刻度。 如果没有找到轴的刻度,则会创建一个新的刻度。

下面是一些例子:

以下图表将具有“x”和“y”比例:

let chart = new Chart(ctx, {
  type: 'line'
});

下面的图表将有刻度“x”“myScale”

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      data: [1, 2, 3]
    }]
  },
  options: {
    scales: {
      myScale: {
        type: 'logarithmic',
        position: 'right', // `axis` is determined by the position as `'y'`
      }
    }
  }
});

下面的图表将具有刻度“xAxis”“yAxis”

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      yAxisID: 'yAxis'
    }]
  },
  options: {
    scales: {
      xAxis: {
        // The axis for this scale is determined from the first letter of the id as `'x'`
        // It is recommended to specify `position` and / or `axis` explicitly.
        type: 'time',
      }
    }
  }
});

以下图表将具有“r”比例:

let chart = new Chart(ctx, {
  type: 'radar'
});

以下图表将具有“myScale”比例:

let chart = new Chart(ctx, {
  type: 'radar',
  scales: {
    myScale: {
      axis: 'r'
    }
  }
});

常用配置

这些只是所有轴支持的常用选项。 有关该轴的所有可用选项,请参阅特定轴文档。

所有轴的通用选项

命名空间:options.scales[scaleId]

名称 类型 默认值 描述
type string 使用的规模类型。 可以使用字符串键创建和注册自定义比例。 这允许更改图表的轴类型。
alignToPixels boolean false 将像素值与设备像素对齐。
backgroundColor Color 刻度区域的背景颜色。
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 Tick 配置。
weight number 0 用于对轴进行排序的权重。 较高的权重离图表区域更远。

Tick 配置

这些只是所有轴支持的常用刻度选项。 有关该轴的所有可用刻度选项,请参阅特定轴文档。

所有轴的通用刻度选项

命名空间:options.scales[scaleId].ticks

名称 类型 可编写脚本 默认值 描述
backdropColor Color Yes 'rgba(255, 255, 255, 0.75)' 标签背景的颜色。
backdropPadding Padding 2 标签背景的填充。
callback function 返回应该在图表上显示的刻度值的字符串表示形式。 见回调。
display boolean true 如果为真,则显示刻度标签。
color Color Yes Chart.defaults.color 刻度线的颜色。
font Font Yes Chart.defaults.font 见字体
major object {} 主要刻度配置。
padding number 3 设置刻度标签相对于轴的偏移量
showLabelBackdrop boolean Yes 径向刻度为真,否则为假 如果为 true,请在刻度标签后面绘制背景。
textStrokeColor Color Yes `` 文本周围笔划的颜色。
textStrokeWidth number Yes 0 文本周围的笔画宽度。
z number 0 刻度层的 z-index。 在图表区域上绘制刻度时很有用。 <= 0 的值绘制在数据集下,> 0 绘制在顶部。

轴范围设置

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

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

let minDataValue = Math.min(mostNegativeValue, options.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.suggestedMax);

在此示例中,最大正值为 50,但数据最大值扩展为 100。但是,由于最低数据值低于建议的最小值设置,因此将其忽略。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            y: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

与建议的* 设置相反,最小和最大设置将明确的结束设置为轴。 设置这些后,某些数据点可能不可见。


堆叠

默认情况下,数据不堆叠。 如果值刻度的堆叠选项(水平图表上的 y 轴)为真,则分别堆叠正值和负值。 此外,可以为每个数据集定义一个堆栈选项,以进一步划分更多堆栈组......对于某些图表,我们可能希望将正值和负值堆叠在一起。 这可以通过指定stacked:'single'来实现。


回调

有许多配置回调可用于在更新过程中的不同点更改比例中的参数。 这些选项在轴选项的顶层提供。

命名空间:options.scales[scaleId]

名称 参数 描述
beforeUpdate axis 在更新过程开始之前调用的回调。
beforeSetDimensions axis 在设置维度之前运行的回调。
afterSetDimensions axis 在设置维度后运行的回调。
beforeDataLimits axis 在确定数据限制之前运行的回调。
afterDataLimits axis 在确定数据限制后运行的回调。
beforeBuildTicks axis 在创建 ticks 之前运行的回调。
afterBuildTicks axis 创建 ticks 后运行的回调。 用于过滤刻度。
beforeTickToLabelConversion axis 在刻度转换为字符串之前运行的回调。
afterTickToLabelConversion axis 在刻度转换为字符串之后运行的回调。
beforeCalculateLabelRotation axis 在刻度旋转之前运行的回调被确定。
afterCalculateLabelRotation axis 在刻度旋转后运行的回调被确定。
beforeFit axis 在比例适合画布之前运行的回调。
afterFit axis 在比例适合画布后运行的回调。
afterUpdate axis 在更新过程结束时运行的回调。

更新轴默认值

可以轻松更改轴的默认配置。 我们需要做的就是将新选项设置为 Chart.defaults.scales[type]

例如,要将所有线性刻度的最小值设置为 0,我们可以执行以下操作。 在此时间之后创建的任何线性比例现在都将具有最小值 0。

Chart.defaults.scales.linear.min = 0;

查看笔记

扫码一下
查看教程更方便