图形标注，Annotation，作为 G2 图表的辅助元素，主要用于在图表上标识额外的标记注解。之前的调用方法为 guide，将在 V4.1 移除。

chart.annotation().arc(option)

辅助弧线，只在极坐标系下生效。常用于绘制仪表盘。option 配置如下：

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

option.start

option.end

option.style

chart.annotation().image(option)

辅助图片，在图表上添加辅助图片。option 配置如下：

option.src

图片路径。

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

option.start

option.end

option.style

chart.annotation().line(option)

辅助线（可带文本），例如表示平均值或者预期分布的直线。option 配置如下：

option.text

文本配置定义。

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

option.start

option.end

option.style

chart.annotation().text(option)

辅助文本，指定位置添加文本说明。

option 配置如下：

option.content

显示的文本内容。

option.rotate

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

option.position

定位位置。

type AnnotationPosition =
  | [number | string, number | string]
  | Record<string, number | string>
  | AnnotationPositionCallback;

第一种，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 必须都是百分比形式。

第三种，回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景。

option.background

文字包围盒样式设置。EnhancedTextBackgroundCfg 配置如下：

option.maxLength

文本的最大长度。

option.autoEllipsis

超出 maxLength 是否自动省略。

option.isVertical

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

option.ellipsisPosition

文本截断的位置。

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

chart.annotation().region(option)

辅助框，框选一段图区，设置背景、边框等。option 配置如下：

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

option.start

option.end

option.style

chart.annotation().regionFilter(option)

区域着色，将图表中位于矩形选区中的图形元素提取出来，重新着色。option 配置如下：

option.color

染色色值。

option.apply

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

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

option.start

option.end

option.style

chart.annotation().dataMarker(option)

特殊数据点标注，多用于折线图和面积图。option 配置如下：

option.point

point 设置。点击 ShapeAttrs 查看详细样式配置。

option.line

line 设置。点击 ShapeAttrs 查看详细样式配置。

option.text

text 设置。

EnhancedTextCfg 配置如下：

EnhancedTextBackgroundCfg 配置如下：

option.autoAdjust

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

option.direction

朝向。

option.position

定位位置。

type AnnotationPosition =
  | [number | string, number | string]
  | Record<string, number | string>
  | AnnotationPositionCallback;

第一种，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 必须都是百分比形式。

第三种，回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景。

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

chart.annotation().dataRegion(option)

特殊数据区间标注，多用于折线图和面积图。option 配置如下：

option.lineLength

line 长度。

option.region

标注区间的配置。点击 ShapeAttrs 查看详细样式配置。

option.text

文本的配置。

EnhancedTextCfg 配置如下：

EnhancedTextBackgroundCfg 配置如下：

option.position

定位位置。

type AnnotationPosition =
  | [number | string, number | string]
  | Record<string, number | string>
  | AnnotationPositionCallback;

第一种，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 必须都是百分比形式。

第三种，回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景。

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

chart.annotation().shape(option)

自定义任意类型的图形标记，通过 option 中的 render 回调函数来在图表区域绘制自定义标记。option 配置如下：

option.render

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

option.top

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

option.animate

是否进行动画。

option.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

option.offsetX

x 方向的偏移量。

option.offsetY

y 方向的偏移量。

chart.annotation().html(option)

自定义任意 HTML 类型的图形标记，通过 option 中的 html 配置来在图表中使用 HTML DOM 元素来添加图形标记。option 配置如下：

option.container

可选，自定义 HTML 图形标记的容器元素

options.html

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

option.alignX

DOM 元素在 X 方向的对齐方式

option.alignY

DOM 元素在 Y 方向的对齐方式

option.offsetX

X 方向的偏移

option.offsetY

Y 方向的偏移