Geometry 几何标记基类，主要负责数据到图形属性的映射以及绘制逻辑。

子类

↳ Point

↳ Path

↳ Edge

↳ Heatmap

↳ Interval

↳ Polygon

↳ Schema

创建方式

  1. const line1 = chart.line();
  2. const line2 = chart.line({
  3.   connectNulls: false,
  4. });
  5. const interval1 = view.interval();
  6. const interval2 = view.interval({
  7.   theme: {}
  8. });

参数:

说明：以下为通用属性，各个几何标记拥有不同的配置属性，将在各自章节列出。

• sortable? : boolean

是否对数据进行排序。

• theme? : object

主题配置。

• visible? : boolean

是否可见。

方法

adjust

▸ adjust(adjustCfg): Geometry

Parameters:

参数名 类型 描述
adjustCfg string | string[] | object | object[] 数据调整配置。
1. 可以是字符串：’dodge’
2. 也可以进行组合，如 [‘dodge’, ‘stack’]
3. 也可以设置为对象： { type: ‘dodge’ }
4. 组合形态也可以使用对象数组：[{type: ‘dodge’}, {type: ‘stack’}]

设置数据调整方式。G2 目前内置了四种类型：

  1. dodge
  2. stack
  3. symmetric
  4. jitter

Tip

  • 对于 ‘dodge’ 类型，可以额外进行如下属性的配置:
  1. geometry.adjust('dodge', {
  2.   marginRatio: 0, // 取 0 到 1 范围的值（相对于每个柱子宽度），用于控制一个分组中柱子之间的间距
  3.   dodgeBy: 'x', // 该属性只对 'dodge' 类型生效，声明以哪个数据字段为分组依据
  4. });
  • 对于 ‘stack’ 类型，可以额外进行如下属性的配置:
  1. geometry.adjust('stack', {
  2.   reverseOrder: false, // 用于控制是否对数据进行反序操作
  3. });

example

  1. geometry.adjust('stack');
  3. geometry.adjust({
  4.   type: 'stack',
  5.   reverseOrder: false,
  6. });
  8. // 组合使用 adjust
  9. geometry.adjust([ 'stack', 'dodge' ]);
  11. geometry.adjust([
  12.   { type: 'stack' },
  13.   { type: 'dodge', dodgeBy: 'x' },
  14. ]);

animate

▸ animate(cfg): Geometry

Geometry 动画配置。

  • animate(false) 关闭动画。
  • animate(true) 开启动画，默认开启。

我们将动画分为四个场景：

  1. appear: 图表第一次加载时的入场动画；
  2. enter: 图表绘制完成，发生更新后，产生的新图形的进场动画；
  3. update: 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画；
  4. leave: 图表绘制完成，数据发生变更后，被销毁图形的销毁动画。

example

  1. animate({
  2.   enter: {
  3.     duration: 1000, // enter 动画执行时间
  4.   },
  5.   leave: false, // 关闭 leave 销毁动画
  6. });

Parameters:

参数名 类型 描述
cfg object | boolean 动画配置

cfg 为对象类型时，其属性结构如下：

  1. {
  2.    /** chart 初始化渲染时的入场动画，false/null 表示关闭入场动画。 */
  3.   appear?: {
  4.     /** 动画缓动函数 */
  5.     easing?: string | (data) => string;;
  6.     /** 动画执行函数 */
  7.     animation?: string;
  8.     /** 动画执行时间 */
  9.     duration?: number | (data) => number;
  10.     /** 动画延迟时间 */
  11.     delay?: number | (data) => number;
  12.     /** 动画执行结束后的回调函数 */
  13.     callback?: () => any;
  14.   } | false | null;
  15.   /** chart 发生更新时，新增元素的入场动画，false/null 表示关闭入场动画。 */
  16.   enter?: {
  17.     /** 动画缓动函数 */
  18.     easing?: string | (data) => string;;
  19.     /** 动画执行函数 */
  20.     animation?: string;
  21.     /** 动画执行时间 */
  22.     duration?: number | (data) => number;
  23.     /** 动画延迟时间 */
  24.     delay?: number | (data) => number;
  25.     /** 动画执行结束后的回调函数 */
  26.     callback?: () => any;
  27.   } | false | null;
  28.   /** 更新动画配置，false/null 表示关闭更新动画。 */
  29.   update?: {
  30.     /** 动画缓动函数 */
  31.     easing?: string | (data) => string;;
  32.     /** 动画执行函数 */
  33.     animation?: string;
  34.     /** 动画执行时间 */
  35.     duration?: number | (data) => number;
  36.     /** 动画延迟时间 */
  37.     delay?: number | (data) => number;
  38.     /** 动画执行结束后的回调函数 */
  39.     callback?: () => any;
  40.   } | false | null;
  41.   /** 销毁动画配置，false/null 表示关闭销毁动画。 */
  42.   leave?: {
  43.     /** 动画缓动函数 */
  44.     easing?: string | (data) => string;;
  45.     /** 动画执行函数 */
  46.     animation?: string;
  47.     /** 动画执行时间 */
  48.     duration?: number | (data) => number;
  49.     /** 动画延迟时间 */
  50.     delay?: number | (data) => number;
  51.     /** 动画执行结束后的回调函数 */
  52.     callback?: () => any;
  53.   } | false | null;
  54. }

Returns: Geometry

changeVisible

▸ changeVisible(visible): void

显示或者隐藏 geometry。

Parameters:

参数名 类型 描述
visible boolean 显示或者隐藏几何标记

Returns: void

clear

▸ clear(): void

清空当前 Geometry，配置项仍保留，但是内部创建的对象全部清空。

color

▸ color(cfg): Geometry

配置 color 通道映射规则。

example

  1. // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
  2. geometry.color({
  3.   fields: [ 'x' ],
  4.   values: [ '#1890ff', '#5AD8A6' ],
  5. });

Parameters:

参数名 类型 描述
cfg object 映射规则，属性结构如下。 
  1. {
  2.   /** 映射的属性字段。 */
  3.   fields?: string[];
  4.   /** 回调函数。 */
  5.   callback?: (...args) => any;
  6.   /** 指定常量映射规则。 */
  7.   values?: any[];
  8. }

▸ color(field, cfg): Geometry

example

  1. // data
  2. // [
  3. //   { x: 'A', y: 10, color: 'red' },
  4. //   { x: 'B', y: 30, color: 'yellow' }
  5. // ]
  7. // 使用 '#1890ff' 颜色渲染图形
  8. geometry.color('#1890ff');
  10. // 根据 x 字段的数据值进行颜色的映射，这时候 G2 会在内部调用默认的回调函数，读取默认提供的颜色进行数据值到颜色值的映射。
  11. geometry.color('x');
  13. // 将 'x' 字段的数据值映射至指定的颜色值 colors（可以是字符串也可以是数组），此时用于通常映射分类数据
  14. geometry.color('x', [ '#1890ff', '#5AD8A6' ]);
  16. // 使用回调函数进行颜色值的自定义；可以使用多个字段使用、*号连接
  17. geometry.color('x', (xVal) => {
  18.   if (xVal === 'a') {
  19.     return 'red';
  20.   }
  21.   return 'blue';
  22. });
  24. // 指定颜色的渐变路径，用于映射连续的数据
  25. geometry.color('x', '#BAE7FF-#1890FF-#0050B3');

Parameters:

参数名 类型 描述
field string 参与颜色映射的数据字段，多个字段使用 ‘*’ 连接符进行连接。
cfg? string | string[] | (...args) => string 可选, color 映射规则。

Returns: Geometry

destroy

▸ destroy(): void

销毁 Geometry 实例。

Returns: void

getAdjust

▸ getAdjust(adjustType): Adjust‹›

根据 adjustType 调整类型获取 Adjust 实例。

Parameters:

参数名 类型
adjustType string

Returns: Adjust‹›

getAttribute

▸ getAttribute(name): Attribute

根据名字获取图形属性实例。

Parameters:

参数名 类型
name string

Returns: Attribute

getAttributeValues

▸ getAttributeValues(attr, obj): any[]

获取该数据发生图形映射后对应的 Attribute 图形空间数据。

Parameters:

参数名 类型 描述
attr Attribute Attribute 图形属性实例。
obj object 需要进行映射的原始数据。

Returns: any[]

getDefaultValue

▸ getDefaultValue(attrName): any

获取图形属性默认的映射值。

Parameters:

参数名 类型
attrName string

Returns: any

getElementsBy

▸ getElementsBy(condition): Element[]

根据一定的规则查找 Geometry 的 Elements。

  1. getElementsBy((element) => {
  2.   const data = element.getData();
  4.   return data.a === 'a';
  5. });

Parameters:

▪ condition: function

定义查找规则的回调函数。

▸ (element: Element): boolean

Parameters:

参数名 类型
element Element

Returns: Element[]

getGroupAttributes

▸ getGroupAttributes(): Attribute[]

获取决定分组的图形属性实例。

Returns: Attribute[]

getGroupFields

▸ getGroupFields(): string[]

获取当前配置中的所有分组 & 分类的字段。

Returns: string[]

getGroupScales

▸ getGroupScales(): Scale[]

获取决定分组的图形属性对应的 scale 实例。

Returns: Scale[]

getShapes

▸ getShapes(): IGroup | IShape[]

获取该 Geometry 下所有生成的 shapes。

Returns: IGroup | IShape[]

getXScale

▸ getXScale(): Scale

获取 x 轴对应的 scale 实例。

Returns: Scale

getXYFields

▸ getXYFields(): string[]

获得图形的 x y 字段。

Returns: string[]

getYScale

▸ getYScale(): Scale

获取 y 轴对应的 scale 实例。

Returns: Scale

hide

▸ hide(): void

隐藏。

Returns: void

label

▸ label(cfg): Geometry

Geometry label 配置。

example

  1. // data: [ {x: 1, y: 2, z: 'a'}, {x: 2, y: 2, z: 'b'} ]
  2. // 在每个图形上显示 z 字段对应的数值
  3. label({
  4.   fields: [ 'z' ]
  5. });
  7. label(false); // 不展示 label
  9. // 在每个图形上显示 x 字段对应的数值，同时配置文本颜色为红色
  10. label('x', {
  11.   style: {
  12.     fill: 'red',
  13.   },
  14. })
  16. // 以 type 类型的 label 渲染每个图形上显示 x 字段对应的数值，同时格式化文本内容
  17. label('x', (xValue) => {
  18.   return {
  19.     content: xValue + '%',
  20.   };
  21. }, {
  22.   type: 'base' // 声明 label 类型
  23. })

Parameters:

参数名 类型
cfg object | false | string

当 cfg 为对象时，其属性结构如下：

  1. {
  2.   /** 映射的字段。 */
  3.   fields?: string[];
  4.   /** 回调函数。 */
  5.   callback?: (...args) => GeometryLabelCfg | null | undefined;;
  6.   cfg?: GeometryLabelCfg;
  7. }

GeometryLabelCfg 类型定义如下：

  1. {
  2.   /**
  3.    * 用于声明渲染的 label 类型。
  4.    * 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染。
  5.    */
  6.   type?: string;
  7.   /** 相对数据点的偏移距离。 */
  8.   offset?: number;
  9.   /** label 相对于数据点在 X 方向的偏移距离。 */
  10.   offsetX?: number;
  11.   /** label 相对于数据点在 Y 方向的偏移距离。 */
  12.   offsetY?: number;
  13.   /**
  14.    * 展示的文本内容，如果不声明则按照参与映射的第一字段的值进行显示。
  15.    * 当 content 为 IGroup 或者 IShape 类型时，请使用相对定位，即 x 和 y 坐标都设为 0，G2 内部会整体做最后的 label 进行定位的。
  16.    * 示例： https://g2.antv.vision/zh/examples/pie/basic#pie-custome-label
  17.    */
  18.   content?: string | IGroup | IShape | (data: Datum, mappingData: MappingDatum, index: number) => string | IShape | IGroup;
  19.   /** label 文本图形属性样式。 */
  20.   style?: LooseObject;
  21.   /** label 是否自动旋转，默认为 true。 */
  22.   autoRotate?: boolean;
  23.   /**
  24.    * 当且仅当 `autoRotate` 为 false 时生效，用于设置文本的旋转角度，**弧度制**。
  25.    */
  26.   rotate?: number;
  27.   /**
  28.    * 用于设置文本连接线的样式属性，null 表示不展示。
  29.    */
  30.   labelLine?: null | boolean | { style?: object };
  31.   /** 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭。 */
  32.   labelEmit?: boolean;
  33.   /**
  34.    * 文本布局类型，支持多种布局函数组合使用。
  35.    *
  36.    * 目前提供了三种：'overlap'，'fixedOverlap'，'limitInShape'：
  37.    * 1. overlap: label 防遮挡，为了防止 label 之间相互覆盖，通过尝试向**四周偏移**来剔除放不下的 label。
  38.    * 2. fixed-overlap: 不改变 label 位置的情况下对相互重叠的 label 进行调整。
  39.    * 3. limit-in-shape: 剔除 shape 容纳不了的 label。
  40.    *
  41.    * @example
  42.    * ```ts
  43.    * layout: {
  44.    *   type: 'overlap',
  45.    * },
  46.    *

/ layout?: { /** label 布局类型。 / type: string; / 各个布局函数开放给用户的配置。 */ cfg?: LooseObject; } | { / label 布局类型。 / type: string; /** 各个布局函数开放给用户的配置。 / cfg?: LooseObject; }[]; /**

  • 仅当 geometry 为 interval 时生效，指定当前 label 与当前图形的相对位置。 / position?: | ((data: Datum, mappingData: MappingDatum, index: number) => ‘top’ | ‘bottom’ | ‘middle’ | ‘left’ | ‘right’) | ‘top’ | ‘bottom’ | ‘middle’ | ‘left’ | ‘right’; /** 动画配置。 / animate?: { / chart 初始化渲染时的入场动画，false/null 表示关闭入场动画。 */ appear?: AnimateCfg | false | null; / chart 发生更新时，新增元素的入场动画，false/null 表示关闭入场动画。 / enter?: AnimateCfg | false | null; /** 更新动画配置，false/null 表示关闭更新动画。 / update?: AnimateCfg | false | null; /* 销毁动画配置，false/null 表示关闭销毁动画。 / leave?: AnimateCfg | false | null; } | false | null; } ```

AnimateCfg 配置结构如下：

  1. {
  2.   /** 动画缓动函数 */
  3.   readonly easing?: string | (data: Datum) => string;
  4.   /** 动画执行函数 */
  5.   readonly animation?: string;
  6.   /** 动画执行时间 */
  7.   readonly duration?: number | (data: Datum) => number;
  8.   /** 动画延迟时间 */
  9.   readonly delay?: number | (data: Datum) => number;
  10.   /** 动画执行结束后的回调函数 */
  11.   readonly callback?: () => any;
  12. }

Returns: Geometry

label

▸ label(field, secondParam): Geometry

Parameters:

参数名 类型
field string
secondParam GeometryLabelCfg] | `(…args) => GeometryLabelCfg null undefined`

Returns: Geometry

▸ label(field, secondParam, thirdParam): Geometry

Parameters:

参数名 类型
field string
secondParam `(…args) => GeometryLabelCfg null undefined`
thirdParam GeometryLabelCfg

Returns: Geometry

position

▸ position(cfg): Geometry

配置 position 通道映射规则。

example

  1. // 数据结构: [{ x: 'A', y: 10, color: 'red' }]
  2. geometry.position('x*y');
  3. geometry.position([ 'x', 'y' ]);
  4. geometry.position({
  5.   fields: [ 'x', 'y' ],
  6. });

Parameters:

参数名 类型 描述
cfg string | string[] | object 映射规则

cfg 为对象时，对象结构如下：

  1. {
  2.   /** 映射的属性字段。 */
  3.   fields?: string[];
  4. }

Returns: Geometry

shape

▸ shape(cfg): Geometry

配置 shape 通道映射规则。

example

  1. // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
  2. geometry.shape({
  3.   fields: [ 'x' ],
  4. });

Parameters:

参数名 类型 描述
cfg object 映射规则配置。

cfg 为对象的属性结构如下：

  1. {
  2.   /** 映射的属性字段。 */
  3.   fields?: string[];
  4.   /** 回调函数。 */
  5.   callback?: (...args) => any;
  6.   /** 指定常量映射规则。 */
  7.   values?: any[];
  8. }

Returns: Geometry

▸ shape(field, cfg): Geometry

example

  1. // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
  3. // 指定常量，将所有数据值映射到固定的 shape
  4. geometry.shape('circle');
  6. // 将指定的字段映射到内置的 shapes 数组中
  7. geometry.shape('x');
  9. // 将指定的字段映射到指定的 shapes 数组中
  10. geometry.shape('x', [ 'circle', 'diamond', 'square' ]);
  12. // 使用回调函数获取 shape，用于个性化的 shape 定制，可以根据单个或者多个字段确定
  13. geometry.shape('x', (xVal) => {
  14.   if (xVal === 'a') {
  15.     return 'circle';
  16.   }
  17.   return 'diamond';
  18. });

Parameters:

参数名 类型 描述
field string 参与 shape 映射的数据字段，多个字段使用 ‘*’ 连接符进行连接。
cfg? string[] | `(…args) => string any[]` Optional, shape 映射规则。

Returns: Geometry

show

▸ show(): void

显示。

Returns: void

size

▸ size(cfg): Geometry

配置 size 通道映射规则。

example

  1. // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
  2. geometry.size({
  3.   values: [ 10 ],
  4. })

Parameters:

参数名 类型 描述
field object 映射规则。

cfg 为对象的属性结构如下：

  1. {
  2.   /** 映射的属性字段。 */
  3.   fields?: string[];
  4.   /** 回调函数。 */
  5.   callback?: (...args) => any;
  6.   /** 指定常量映射规则。 */
  7.   values?: any[];
  8. }

Returns: Geometry

▸ size(field, cfg): Geometry

example

  1. // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
  3. // 直接指定像素大小
  4. geometry.size(10);
  6. // 指定映射到 size 的字段，使用内置的默认大小范围为 [1, 10]
  7. geometry.size('x');
  9. // 指定映射到 size 字段外，还提供了 size 的最大值和最小值范围
  10. geometry.size('x', [ 5, 30 ]);
  12. // 使用回调函数映射 size，用于个性化的 size 定制，可以使用多个字段进行映射
  13. geometry.size('x', (xVal) => {
  14.   if (xVal === 'a') {
  15.     return 10;
  16.   }
  17.   return 5;
  18. });

Parameters:

参数名 类型 描述
field number | string 参与 size 映射的数据字段，多个字段使用 ‘*’ 连接符进行连接。
cfg? [number, number] | (...args) => number Optional, size 映射规则

Returns: Geometry

state

▸ state(cfg): Geometry

设置状态对应的样式。

example

  1. chart.interval().state({
  2.   selected: {
  3.     animate: { duration: 100, easing: 'easeLinear' },
  4.     style: {
  5.       lineWidth: 2,
  6.       stroke: '#000',
  7.     },
  8.   },
  9. });

如果图形 shape 是由多个 shape 组成，即为一个 G.Group 对象，那么针对 group 中的每个 shape，我们需要使用下列方式进行状态样式设置：
如果我们为 group 中的每个 shape 设置了 ‘name’ 属性(shape.set(‘name’, ‘xx’))，则以 ‘name’ 作为 key，否则默认以索引值（即 shape 的 添加顺序）为 key。

  1. chart.interval().shape('groupShape').state({
  2.   selected: {
  3.     style: {
  4.       0: { lineWidth: 2 },
  5.       1: { fillOpacity: 1 },
  6.     }
  7.   }
  8. });

Parameters:

参数名 类型 描述
cfg object 状态样式

cfg 对象的属性结构如下：

  1. {
  2.   /** 默认状态样式。 */
  3.   default?: {
  4.     /** 状态样式配置。 */
  5.     style?: object | (element: Element) => LooseObject;
  6.   };
  7.   /** active 状态配置。 */
  8.   active?: {
  9.     /** 状态样式配置。 */
  10.     style?: object | (element: Element) => LooseObject;
  11.   };
  12.   /** inactive 状态配置。 */
  13.   inactive?: {
  14.     /** 状态样式配置。 */
  15.     style?: object | (element: Element) => LooseObject;
  16.   };
  17.   /** selected 状态配置。 */
  18.   selected?: {
  19.     /** 状态样式配置。 */
  20.     style?: object | (element: Element) => LooseObject;
  21.   };
  22. }

Returns: this

style

▸ style(cfg): Geometry

图形样式配置。

example

  1. // 配置图形样式
  2. style({
  3.   lineWidth: 2,
  4.   stroke: '#1890ff',
  5. });
  7. // 根据具体的数据进行详细配置
  8. style({
  9.   fields: [ 'x', 'y' ], // 数据字段
  10.   callback: (xVal, yVal) => {
  11.     const style = { lineWidth: 2, stroke: '#1890ff' };
  12.     if (xVal === 'a') {
  13.       style.lineDash = [ 2, 2 ];
  14.     }
  15.     return style;
  16.   },
  17. });

Parameters:

参数名 类型 描述
cfg StyleOption | object 配置样式属性或者样式规则。

cfg 为 StyleOption 类型时，其属性结构如下：

  1. {
  2.   /** 映射的字段。 */
  3.   fields?: string[];
  4.   /** 回调函数。 */
  5.   callback?: (...args) => LooseObject;
  6.   /** 图形样式配置。 */
  7.   cfg?: LooseObject;
  8. }

Returns: Geometry

▸ style(field, styleFunc): Geometry

example

  1. style('x*y', (xVal, yVal) => {
  2.   const style = { lineWidth: 2, stroke: '#1890ff' };
  3.   if (xVal === 'a') {
  4.     style.lineDash = [ 2, 2 ];
  5.   }
  6.   return style;
  7. });

Parameters:

参数名 类型 描述
field string 数据字段或者样式配置规则。
styleFunc (...args) => LooseObject Optional, 样式配置回调函数。

Returns: Geometry

tooltip

▸ tooltip(cfg): Geometry

配置 Geometry 显示的 tooltip 内容。

tooltip(false) 代表关闭 tooltip。
tooltip(true) 代表开启 tooltip。

Geometry 默认允许 tooltip 展示，我们可以使用以下方法对 tooltip 的展示内容进行配置：

example

  1. // data: [{x: 'a', y: 10}]
  2. tooltip({
  3.   fields: [ 'x' ],
  4. });
  1. tooltip({
  2.   fields: [ 'x', 'y' ],
  3. });

tooltip() 方法同样支持数据映射及回调用法：

example

  1. chart.tooltip({
  2.   itemTpl: '<li>{x}: {y}</li>',
  3. });
  5. chart.line()
  6.   .position('x*y')
  7.   .tooltip({
  8.     fields: [ 'x', 'y' ],
  9.     callback: (x, y) => {
  10.       return {
  11.         x,
  12.         y,
  13.       };
  14.     },
  15.   });

其返回的值必须为对象，该值中的属性同 chart.tooltip() 的 itemTpl 模板相对应，返回的变量可用于 itemTpl 的字符串模板。

Parameters:

参数名 类型 描述
field GeometryTooltipOption | boolean tooltip 配置信息。

field 为 GeometryTooltipOption 类型时，其结构如下：

  1. {
  2.   /** 参与映射的字段。 */
  3.   fields: string[];
  4.   /** 回调函数。 */
  5.   callback?: (...args) => LooseObject;
  6. }

Returns: Geometry

▸ tooltip(field, cfg): Geometry

example

  1. // data: [{x: 'a', y: 10}]
  3. // 等同于 tooltip({ fields: [ 'x' ] })
  4. tooltip('x');
  6. // 等同于 tooltip({ fields: [ 'x', 'y' ] })
  7. tooltip('x*y');
  9. // 等同于 tooltip({ fields: [ 'x', 'y' ], callback: (x, y) => { x, y } })
  10. tooltip('x*y', (x, y) => {
  11.   return {
  12.     x,
  13.     y,
  14.   };
  15. });

Parameters:

参数名 类型 描述
field string 参与映射的字段。
cfg? (...args) => LooseObject Optional, 回调函数

Returns: Geometry