axis.zh.md

坐标轴指二维空间中统计图表中的轴，它用来定义坐标系中数据在方向和值的映射关系的图表组件

引入

import { Axis } from '@antv/gui';

配置项

基本配置

属性名	类型	描述	默认值
data	AxisDatum[]	数据	-
dataThreshold	number	数据上限，数据量超过该值时会进行下采样	100
showTitle	boolean	是否显示标题	true
showLine	boolean	是否显示轴线	true
showArrow	boolean	是否显示箭头	true
showTick	boolean	是否显示刻度线	true
showLabel	boolean	是否显示刻度值	true
showGrid	boolean	是否显示网格线	true
showTrunc	boolean	是否显示截断	false
animate	AnimationOption	动画配置	-

type AxisDatum = {
  id?: string;
  value: number;
  label?: string;
  [keys: string]: any;
};

直线坐标轴

属性名	类型	描述	默认值
type	linear	-	-
startPos	[number, number]	轴线起点坐标	-
endPos	[number, number]	轴线终点坐标	-

圆弧坐标轴

属性名	类型	描述	默认值
type	arc	-	-
startAngle	number	起始角，弧度、角度均可	-
endAngle	number	结束角	-
radius	number	半径	-
center	[number, number]	圆心位置	-

标题 AxisTitleStyleProps

属性名	类型	描述	默认值
position	Position	标题位置	lb
titleText	string | number | DisplayObject	标题	-
titleSpacing	number | numbers[]	标题到轴的距离	0
titleInset	number | numbers[]	标题内边距	0
title{Style}	StyleProps	标题样式，见 DisplayObjectStyleProps	-

type Position =
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'left-top'
  | 'top-left'
  | 'left-bottom'
  | 'bottom-left'
  | 'right-top'
  | 'top-right'
  | 'right-bottom'
  | 'bottom-right'
  | 'inner'
  | 't'
  | 'r'
  | 'l'
  | 'b'
  | 'lt'
  | 'tl'
  | 'rt'
  | 'tr'
  | 'lb'
  | 'bl'
  | 'rb'
  | 'br'
  | 'i';

轴线 AxisLineStyleProps

属性名	类型	描述	默认值
lineExtension	[number, number]	轴线两端扩展长度	[0,0]
lineArrow	DisplayObject	箭头图形	-
lineArrowOffset	number	箭头偏移量	15
lineArrowSize	number	箭头尺寸	10
line{Style}	StyleProps	轴线样式，见 DisplayObjectStyleProps	-
	-		-

刻度线 AxisTickStyleProps

属性名	类型	描述	默认值
tickLength	number	长度	5
tickFilter	(datum:AxisDatum, index:number, data:AxisDatum[])=>boolean	刻度线过滤	-
tickFormatter	(datum:AxisDatum, index:number, data:AxisDatum[], vector: [number,number])=>DisplayObject	刻度线格式化	false
tickDirection	position|negative	刻度线朝向	positive
tick{Style}	StyleProps | (datum:AxisDatum, index:number, data:AxisDatum[])=>StyleProps	刻度线样式，见 DisplayObjectStyleProps	-

刻度值 AxisLabelStyleProps

属性名	类型	描述	默认值
labelFilter	(datum:AxisDatum, index:number, data:AxisDatum[])=>boolean	刻度值过滤	-
labelFormatter	(datum:AxisDatum, index:number, data:AxisDatum[], vector: [number,number])=>DisplayObject	刻度值格式化	-
labelDirection	position|negative	刻度值朝向	positive
labelAlign	horizontal|parallel|prependicular	刻度值方向（保持水平、保持垂直、垂直于轴线）	parallel
labelSpacing	number	刻度值到刻度的距离	0
labelOverlap	LabelOverlapCfg[]	重叠时采取的策略	-
label{Style}	StyleProps | (datum:AxisDatum, index:number, data:AxisDatum[])=>StyleProps	刻度值样式，见 TextStyleProps	-

interface Overlap {
  /** 碰撞检测时添加额外的间距 */
  margin?: number[];
}
/** 重叠时对刻度值进行缩略 */
interface EllipsisOverlapCfg extends Overlap {
  type: 'ellipsis';
  /** 缩略符 */
  suffix?: string;
  /** 最小长度，刻度值小于该长度时，无论是否发生重叠均不再进行缩略处理 */
  minLength?: string | number;
  /** 最大长度，刻度值超过该长度时，无论是否发生重叠均会进行缩略处理 */
  maxLength?: string | number;
  /** 单次缩略步长，为文本时会测算其长度 */
  step?: string | number;
}
/** 重叠时对刻度值进行旋转 */
interface RotateOverlapCfg extends Overlap {
  type: 'rotate';
  /** 可选的旋转角度 */
  optionalAngles: number[];
  /** 若任何角度均无法避免重叠，则将其重置为初始角度 */
  recoverWhenFailed?: boolean;
}
/** 重叠时对刻度值进行隐藏 */
interface HideOverlapCfg extends Overlap {
  type: 'hide';
  /** 保证第一个刻度值不被隐藏 */
  keepHeader?: boolean;
  /** 保证最后一个刻度值不被隐藏 */
  keepTail?: boolean;
}

export type LabelOverlapCfg = EllipsisOverlapCfg | RotateOverlapCfg | HideOverlapCfg;

网格线 AxisGridStyleProps

属性名	类型	描述	默认值
gridFilter	(datum:AxisDatum, index:number, data:AxisDatum[])=>boolean	网格线过滤	-
gridDirection	position|negative	网格线朝向	-
gridLength	number	网格线长度	0
gridType	segment|surround	网格线类型，segment 适用于直角坐标系，surround 适用于极坐标系	segment
gridCenter	[number,number]	网格线中心点，仅在 gridType 为 surround 时生效	[0,0]
gridControlAngles	number[]	网格线控制点角度，仅在 gridType 为 surround 时生效	[0,0]
gridClosed	boolean	是否封闭相邻网格线区域	false
gridConnect	line|arc	网格线封闭类型，line 直线连接，arc 弧线连接	line
gridAreaFill	string|string[]	网格线区域填充	-
grid{Style}	StyleProps | (datum:AxisDatum, index:number, data:AxisDatum[])=>StyleProps	网格线样式，见 DisplayObjectStyleProps	-