图表标注 - Annotations

阅读时间约 2 分钟

🏷️ 图形标注,Annotation,作为图表的辅助元素,主要用于在图表上标识额外的标记注解。

🎨 前往墨者学院 AntV 设计 | 标注 Annotation 查看设计指引

图表标注类型

annotation

G2Plot 提供了以下图形标注类型:

类型描述预览用法
arc辅助弧线,只在极坐标系下生效。常用于绘制仪表盘。image.png{ type: 'arc' } 
image辅助图片,在图表上添加辅助图片。image.png{ type: 'image' }
line辅助线(可带文本),例如表示平均值或者预期分布的直线。image.png{ type: 'line' }
text辅助文本,指定位置添加文本说明。image.png{ type: 'text' }
region辅助框,框选一段图区,设置背景、边框等。image.png{ type: 'region' }
regionFilter区域着色,将图表中位于矩形选区中的图形元素提取出来,重新着色。image.png{ type: 'regionFilter' }
dataMarker特殊数据点标注,多用于折线图和面积图。image.png{ type: 'dataMarker' }
dataRegion特殊数据区间标注,多用于折线图和面积图。image.png{ type: 'dataRegion' }

使用方式

标注是数组类型,可以设置多个。

annotations: [
  {
    type: 'text',
    position: ['median', 'median'],
    content: '辅助文本',
    style: {
      fill: 'red',
    },
  },
];s

配置项(AnnotationCfg

❗️ 代表 必选

属性类型描述用于
type ❗️string图形标注类型.
position ❗️object标注位置.
animateboolean是否进行动画.
autoAdjustboolean文本超出绘制区域时,是否自动调节文本方向.
startarray起始位置. line region
endarray结束位置. line region
srcstring图片路径. image
contentstring文本内容. text
lineLengthstringline 长度. text
containerstring自定义 HTML 图形标记的容器元素. html
htmlstring自定义的图形标记的 HTML 元素,可为 HTML DOM 字符串,或 HTML 元素,或 html 回调函数. html
alignXstringDOM 元素在 X 方向的对齐方式,用于 html. 可选值: 'left' | 'middle' | 'right' html
alignYstringDOM 元素在 Y 方向的对齐方式,用于 html. 可选值: 'left' | 'middle' | 'right' html
更多内容,查看下方的具体 api

配置项详解

type
required string

标注类型, text | line | image | region | dataMarker | dataRegion | regionFilter | shape | html.

position
required object

标注位置。

  • 第一种,object 使用图表 x, y 对应的原始数据例如:{ time: '2010-01-01', value: 200 };
  • 第二种,数组来配置位置 [ x, y ],根据数组中的值的存在以下几种形式: 1、对应数据源中的原始数据; 2、关键字:'min'、'max'、'median'、'start'、'end' 分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束; 3、x, y 都是百分比的形式,如 30%,在绘图区域定位(即坐标系内)。 1 和 2 两种类型的数据可以混用,但是使用百分比形式时 x 和 y 必须都是百分比形式。
  • 第三种,回调函数,可以动态得确定辅助元素的位置,应用于数据动态更新,辅助元素的位置根据数据变化的场景。
top
optional boolean default: false

是否绘制在 canvas 最上层,默认为 false, 即绘制在最下层。

animate
optional boolean

是否进行动画。

offsetX
optional number

x 方向的偏移量。

offsetY
optional number

y 方向的偏移量。

start
optional Array

起始位置,一般用于 line、region 等。

end
optional Array

结束位置,一般用于 line、region 等。

{
  type: 'line',
  start: ['min', 'median'],
  end: ['max', 'median'],
},
style
optional object

图形样式属性,参考绘图属性。

src
optional string

图片路径,用于 image 中。

content
optional string

文本内容,用于 text 中。

rotate
optional number

文本的旋转角度,弧度制。

maxLength
optional number

文文本的最大长度。

autoEllipsis
optional boolean

超出 maxLength 是否自动省略。

ellipsisPosition
optional head | middle | tail

文本截断的位置。

isVertical
optional boolean

文本在二维坐标系的显示位置,是沿着 x 轴显示 还是沿着 y 轴显示。

background
optional object

文字包围盒样式设置。

参数名类型默认值描述
styleobject-文本背景的样式, 参考绘图属性
paddingnumber | number[]-文本背景周围的留白
color
optional string

染色色值,一般用于 regionFilter。

apply
optional string[]

设定 regionFilter 只对特定 geometry 类型起作用,如 apply: ['area'],一般用于 regionFilter。

autoAdjust
optional boolean

文本超出绘制区域时,是否自动调节文本方向。

direction
optional upward | downward

朝向。

lineLength
optional number

line 长度,用于 dataRegion。

render
optional string

自定义标记的绘制 render 函数,其他 container 为标记绘制的父容器, view 为图形实例, helpers 为辅助函数,其他 parserPosition 可以用来计算数据点对应的坐标位置,用于 shape。

container
optional string | HTMLElement

自定义 HTML 图形标记的容器元素,用于 html

html
optional string | HTMLElement

自定义的图形标记的 HTML 元素,可为 HTML DOM 字符串,或 HTML 元素,或 html 回调函数,用于 html

alignX
optional 'left' | 'middle' | 'right'

DOM 元素在 X 方向的对齐方式,用于 html

alignY
optional left' | 'middle' | 'right'

DOM 元素在 Y 方向的对齐方式,用于 html