坐标轴 - Axis

阅读时间约 1 分钟

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

🎨 前往墨者学院 AntV 设计 | 坐标轴 Axis 查看设计指引

构成元素

axis

使用方式

坐标轴通常有 xAxis, yAxis 两种,会根据具体 Plot 有所差异。

配置坐标轴有两种方式:

第一种,传入 false 设置隐藏坐标轴。

xAxis: false; // 隐藏 x 轴

第二种,传入 AxisCfg 对坐标轴进行整体配置。

xAxis: {
  text: 'x 轴标题'
}

配置属性 - AxisCfg

top
optional boolean default: false

是否渲染在画布顶层,防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡。

position
optional top | bottom | left | right

适用于直角坐标系,设置坐标轴的位置。

title
optional object

标题的配置项,null 表示不展示。

细分配置项名称类型功能描述
textstring坐标轴标题
positionstring轴标题的位置,默认:'center'。可选项: start, center, end
offsetnumber标题距离坐标轴的距离
spacingnumber标题距离坐标轴文本的距离
styleshapeStyle标题文本配置项
autoRotateboolean是否自动旋转

shapeStyle

属性名类型介绍
fillstring图形的填充色
rnumber用于 point, 代表图形的半径大小
fillOpacitynumber图形的填充透明度
strokestring图形的描边
lineWidthnumber图形描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber图形的整体透明度
shadowColorstring图形阴影颜色
strokeOpacitynumber图形边框透明度
shadowBlurnumber图形阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

关于 ShapeStyle 更加详细的文档参考 绘图属性

label

optional object

文本标签的配置项,null 表示不展示。

属性名类型介绍
typestring当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 inner|outer|spider
offsetnumberlabel 的偏移量
offsetXnumberlabel 相对于数据点在 X 方向的偏移距离
offsetYnumberlabel 相对于数据点在 Y 方向的偏移距离
contentstring | IGroup | IShape | GeometryLabelContentCallback展示的文本内容,如果不声明则按照参与映射的第一字段的值进行显示
styleShapeAttrslabel 文本图形属性样式
autoRotatestring是否自动旋转,默认 true
rotatenumber文本旋转角度
labelLinenull | boolean | LabelLineCfg用于设置文本连接线的样式属性,null 表示不展示。
labelEmitboolean只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout'overlap' | 'fixedOverlap' | 'limitInShape'文本布局类型,支持多种布局函数组合使用。
position'top' | 'bottom' | 'middle' | 'left' | 'right'指定当前 label 与当前图形的相对位置
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

LabelLineCfg 类型定义如下:(关于 ShapeAttrs 详细查看 ShapeAttrs 文档)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

示例代码:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    },
    rotate: true
  }
}
label
optional AxisLabelCfg | null

文本标签的配置项,null 表示不展示。AxisLabelCfg 配置如下:

参数名类型默认值描述
offsetnumber-label 的偏移量
rotatenumber-文本旋转角度
autoRotateboolean |avoidCallbacktrue是否自动旋转
autoHideboolean |avoidCallback | { type:string,cfg?:AxisLabelAutoHideCfg }false是否自动隐藏
autoEllipsisboolean |avoidCallback |stringfalse是否自动省略
formatter(text: string, item: ListItem, index: number) => anyfalse格式化函数
styleShapeAttrs-坐标轴刻度线的样式配置项

avoidCallback 类型定义如下:

type avoidCallback = (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean;

AxisLabelAutoHideCfg 类型定义如下:

interface AxisLabelAutoHideCfg {
  /** 最小间距配置 */
  minGap?: number;
}
verticalFactor
optional number

标记坐标轴 label 的方向,左侧为 1,右侧为 -1(仅适用于垂直方向的坐标轴)

verticalLimitLength
optional number

配置坐标轴垂直方向的最大限制长度,对文本自适应有很大影响。

grid
optional object

坐标轴网格线的配置项,null 表示不展示。

细分配置项名称类型功能描述
linelineStyle线的样式,
alternateColorstring|string[]两个栅格线间的填充色
closedboolean对于 circle 是否关闭 grid
alignTickboolean是否同刻度线对齐,如果值为 false,则会显示在两个刻度中间

网格线条样式的配置与 line 是一致的。

line
optional object

坐标轴线的配置项,null 表示不展示。

注意: 线条样式的完整配置是 { style: { stroke: '#ddd', ... } }, 如果配置线条样式不生效的时候,请检查一下。

属性名类型介绍
strokestring线的颜色
lineWidthnumber线宽
lineDash[number,number]虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
opacitynumber透明度
shadowColorstring阴影颜色
shadowBlurnumber高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例(设置 x 轴的 grid 网格线条样式):

{
  xAxis: {
    grid: {
      line: {
        style: {
          stroke: 'black',
          lineWidth: 2,
          lineDash: [4, 5],
          strokeOpacity: 0.7,
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          cursor: 'pointer'
        }
      }
    }
  }
}
tickLine
optional object

坐标轴刻度线的配置项,null 表示不展示。

细分配置项名称类型功能描述
styleShapeAttrs | ShapeAttrsCallback坐标轴刻度线的样式。
alignTickboolean坐标轴刻度线是否同 tick 对齐
lengthnumber坐标轴刻度线长度

关于 ShapeAttrs 详细查看 ShapeAttrs 文档。ShapeAttrsCallback 回调参数如下:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
subTickLine
optional object

坐标轴子刻度线的配置项,null 表示不展示。

细分配置项名称类型功能描述
styleShapeAttrs | ShapeAttrsCallback坐标轴子刻度线的样式。
countnumber子刻度个数
lengthnumber坐标轴子刻度线长度

关于 ShapeAttrs 详细查看 ShapeAttrs 文档。ShapeAttrsCallback 回调参数如下:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
nice
optional boolean default: true

是否美化。

min
optional number default: 0

坐标轴最小值。

max
optional number

坐标轴最大值。

minLimit
optional number

最小值限定。

maxLimit
optional number

最大值限定。

tickCount
optional number

期望的坐标轴刻度数量,非最终结果。

tickInterval
optional number

坐标轴刻度间隔。

tickMethod
optional string | Function default: false

指定 tick 计算方法,或自定义计算 tick 的方法,内置 tick 计算方法包括 cattime-catwilkinson-extendedr-prettytimetime-prettylogpowquantiled3-linear

animate
optional boolean default: true

动画开关,默认开启。

animateOption
optional object

动画参数配置。

interface ComponentAnimateCfg {
  /** 动画执行时间 */
  readonly duration?: number;
  /** 动画缓动函数 */
  readonly easing?: string;
  /** 动画延迟时间 */
  readonly delay?: number;
}
// 配置参考
{
  animateOption: {
    appear: ComponentAnimateCfg;
    update: ComponentAnimateCfg;
    enter: ComponentAnimateCfg;
    leave: ComponentAnimateCfg;
  }
}