1.6 坐标轴
优质
小牛编辑
129浏览
2023-12-01
坐标轴是图表的组成部分。它们用于确定数据如何映射到图表上的像素值。在笛卡尔图表中，有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
}
});
创建新的坐标轴
要创建新的坐标轴，请参考开发者文档.