坐标轴(Axes)

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

在径向图表中,如雷达图或极地面积图,有一个单一轴可以在角度和径向方向上映射点。这些被称为径向轴(radial axes)

2.0版本以上的Chart.js的刻度选项比1.0版本更强大,但也有些许不同。

  • 支持多 X轴 和 Y轴
  • 内置的标签auto-skip特性可以检测到重叠的刻度和标签,然后移除所有第n个标签以保持正常显示。
  • 支持缩放标题
  • 无需编写全新的图表类型即可扩展新的比例类型

通用配置

以下属性对Chart.js提供的所有坐标轴都是通用的

名称 类型 默认值 描述
display Boolean true 如果设置为false ,则该坐标轴从视图中隐藏。覆盖 gridLines.display, scaleLabel.display, and ticks.display.
callbacks Object 坐标轴生命周期的回调函数钩子 更多...
weight Number 0 坐标轴排序权重,数值越高离图标区域越远

回调

以下回调函数可用于更改更新过程中不同点处的比例参数

名称 参数 描述
beforeUpdate axis 在更新之前回调
beforeSetDimensions axis 在设置尺寸之前回调
afterSetDimensions axis 在设置尺寸之后回调
beforeDataLimits axis 在确定数据限制之前回调
afterDataLimits axis 在确定数据限制之后回调
beforeBuildTicks axis 在ticks创建之前回调
afterBuildTicks axis 在ticks创建之后回调。用于过滤ticks
beforeTickToLabelConversion axis 在把ticks转换为字符之前回调
afterTickToLabelConversion axis 在把ticks转换为字符之后回调
beforeCalculateTickRotation axis 在 tick rotation被确定之前回调
afterCalculateTickRotation axis 在 tick rotation被确定之后回调
beforeFit axis 在比例适合canvas前的回调
afterFit axis 在比例适合canvas后的回调
afterUpdate axis 更新结束后回调

更新坐标轴默认值

默认配置的刻度可以使用scale service更改。只需传入部分配置片段,和当前默认配置合并,形成新的配置。

例如,要为所有线性比例设置最小值0,您可以执行以下操作。在此之后创建的任何线性比例都具有最小值0。

Chart.scaleService.updateScaleDefaults("linear", {
    ticks: {
        min: 0
    }
});

创建新的坐标轴

要创建新的坐标轴,请参考开发者文档.

results matching ""

    No results matching ""