Axis
坐标轴指二维空间中统计图表中的轴,它用来定义坐标系中数据在方向和值的映射关系的图表组件
引入
import { Linear, Arc, Helix } from '@antv/gui';
基本配置
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
title | false | AxisTitleCfg | 标题 |
|
line | false | AxisLineCfg | 轴线 |
|
ticks | TickDatum[] | 刻度数据 |
|
ticksThreshold | false | number | 刻度数量阈值 |
|
tickLine | false | AxisTickCfg | 刻度线配置 |
|
label | false | AxisLabelCfg | 标签文本配置 |
|
subTickLine | false | AxisSubTickCfg | 子刻度线配置 |
|
verticalFactor | -1 | 1 | 刻度与标签相对于轴线向量的位置。轴线为纵向时,-1 代表在向量左侧, 1 代表在向量右侧; 当轴线为横向时,-1 代表在轴线的上方,1 代表在轴线的下方; 当轴线为弧形时,-1 代表在轴线的内部,1 代表在轴线的外部 |
|
直线坐标轴
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
startPos | [number, number] | 轴线起点坐标 |
|
endPos | [number, number] | 轴线终点坐标 |
|
圆弧坐标轴
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
startAngle | number | 起始角,弧度、角度均可 |
|
endAngle | number | 结束角 |
|
radius | number | 半径 |
|
center | [number, number] | 圆心位置 |
|
螺旋坐标轴
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
a | number | 参数 a |
|
b | number | 参数 b |
|
startAngle | number | 起始角 |
|
endAngle | number | 结束角 |
|
precision | number | 精度,影响螺旋线的绘制 | 0.1 |
标题 AxisTitleCfg
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
content | string | 内容 |
|
style | TextProps | 样式 |
|
position | 'start' | 'center' | 'end' | 位置 | 'start' |
offset | [number, number] | 偏移量 | [0,0] |
rotate | number | 旋转角度 | 0 |
轴线 AxisLineCfg
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
style | LineProps | 线条样式 |
|
arrow | {start: MarkerCfg, end: MarkerCfg} | 轴线两端箭头 |
|
刻度线 AxisTickLineCfg
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
length | number | 长度 | 5 |
style | MixAttrs | 带状态的线条样式 |
|
offset | number | 在轴线方向的偏移量 | 0 |
appendTick | boolean | 末尾追加 tick,一般用于 label alignTick 为 false 的情况 | false |
标签 AxisLabelCfg
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
type | 'text' | 'number' | 'time' | 标签文本类型,会影响缩略策略 | text |
style | MixAttrs | 带状态的文本样式 |
|
alignTick | boolean | label 是否与 Tick 对齐 |
|
align | 'normal' | 'tangential' | 'radial' | 标签文本与轴线的对齐方式,normal-水平,tangential-切向 radial-径向 | 'normal' |
formatter | (tick: TickDatum) => string | 标签格式化 |
|
offset | [number, number] | 偏移量 |
|
overlapOrder | 'autoRotate' | 'autoEllipsis' | 'autoHide'[] | 处理 label 重叠的优先级 |
|
margin | [number, number, number, number] | 标签外边距,在进行自动避免重叠时的额外间隔 | [0, 0, 0, 0] |
autoRotate | boolean | 旋转度数,默认垂直或平行于刻度线 | true |
rotateRange | [number, number] | 自动旋转的范围 | [0, 90] |
rotate | number | 范围[-90, 90] 手动指定旋转角度,配置后自动旋转失效 |
|
autoHide | boolean | label 过多时隐藏部分 | true |
autoHideTickLine | boolean | 隐藏 label 时,同时隐藏掉其对应的 tickLine | true |
autoEllipsis | boolean | label 过长时缩略 | true |
ellipsisStep | number | string | 缩略步长,传入 string 时将计算其长度(下同) |
|
minLength | number | string | label 的最小长度 |
|
maxLength | number | string | label 的最大长度,无穷大表示不限制长度 | Infinity |
子刻度线 AxisSubTickLineCfg
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
length | number | 长度 | 2 |
count | number | 两个刻度之间的子刻度数 | 4 |
style | MixAttrs | 带状态的线条样式 |
|
offset | number | 在轴线方向的偏移量 | 0 |
数据 TickDatum
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
value | number | 范围 [0, 1], 表示在轴线上的位置 |
|
text | string | 显示的标签内容 | value |
state | 'default'|'active' | 状态 | 'default' |
id | string | id | index |