@antv/g2

constructor

constructor(context: IInteractionContext, cfg?: {});

property cfg

protected cfg: {};

• Action 配置

property cfgFields

protected cfgFields: string[];

• 配置项的字段，自动负值到 this 上

property context

context: IInteractionContext;

• 上下文对象

property name

name: any;

• Action 名字

method applyCfg

protected applyCfg: (cfg: any) => void;

• 设置配置项传入的值

  Parameter cfg

method destroy

destroy: () => void;

• Destroys action

method init

init: () => void;

• Inits action，提供给子类用于继承

constructor

constructor(props: ChartCfg);

property autoFit

autoFit: boolean;

• 是否自适应 DOM 容器宽高，默认为 false，需要用户手动指定宽高

property ele

ele: HTMLElement;

• Chart 的 DOM 容器

property height

height: number;

• 图表高度

property localRefresh

localRefresh: boolean;

• 是否开启局部刷新

property renderer

renderer: 'canvas' | 'svg';

• 图表渲染引擎

property width

width: number;

• 图表宽度

method aria

aria: (ariaOption: AriaOption) => void;

• 设置 WAI-ARIA 无障碍标签。如何根据图形语法自动生成 arial 内容？

  Parameter ariaOption

method changeSize

changeSize: (width: number, height: number) => this;

• 改变图表大小，同时重新渲染。

  Parameter width

  图表宽度

  Parameter height

  图表高度

  Returns

method changeVisible

changeVisible: (visible: boolean) => this;

• 显示或隐藏图表

  Parameter visible

  是否可见，true 表示显示，false 表示隐藏

  Returns

method clear

clear: () => void;

• 清空图表，同时清除掉 aria 配置

method destroy

destroy: () => void;

• 销毁图表，同时解绑事件，销毁创建的 G.Canvas 实例。

  Returns

  void

method forceFit

forceFit: () => void;

• 自动根据容器大小 resize 画布

constructor

constructor(view: View);

property components

protected components: ComponentOption[];

• 所有的 component

property name

readonly name: string;

property option

protected option: {};

• option 配置，不同组件有自己不同的配置结构

property view

protected view: View;

property visible

visible: boolean;

• 是否可见

method changeVisible

changeVisible: (visible: boolean) => void;

• change visibility of component

  Parameter visible

method clear

clear: (includeOption?: boolean) => void;

• clear

  Parameter includeOption

  是否清空 option 配置项（used in annotation）

method destroy

destroy: () => void;

• destroy the component

method getComponents

getComponents: () => ComponentOption[];

• get all components

  Returns

  components array

method init

abstract init: () => any;

• init the component

method layout

abstract layout: () => any;

• do layout

method render

abstract render: () => any;

• render the components

method update

abstract update: () => any;

• 组件的更新逻辑 - 根据字段为标识，为每一个组件生成一个 id，放到 option 中 - 更新的时候按照 id 去做 diff，然后对同的做处理 - 创建增加的 - 更新已有的 - 销毁删除的

constructor

constructor(cfg: ElementCfg);

property animate

animate: boolean | AnimateOption;

• shape 的动画配置

property container

container: IGroup;

• shape 容器

property elementIndex

elementIndex: number;

• element 索引

property geometry

geometry: Geometry<ShapePoint>;

• element 对应的 Geometry 实例

property labelShape

labelShape: IGroup[];

• 保存 shape 对应的 label

property shape

shape: any;

• 最后创建的图形对象

property shapeFactory

shapeFactory: ShapeFactory;

• 用于创建各种 shape 的工厂对象

method changeVisible

changeVisible: (visible: boolean) => void;

• 显示或者隐藏 element。

  Parameter visible

  是否可见。

method clearStates

clearStates: () => void;

• 清空状量态，恢复至初始状态。

method destroy

destroy: () => void;

• 销毁 element 实例。

method draw

draw: (model: ShapeInfo, isUpdate?: boolean) => void;

• 绘制图形。

  Parameter model

  绘制数据。

  Parameter isUpdate

  可选，是否是更新发生后的绘制。

method getBBox

getBBox: () => BBox;

• 返回 Element 元素整体的 bbox，包含文本及文本连线（有的话）。

  Returns

  整体包围盒。

method getData

getData: () => Datum;

• 获取 Element 对应的原始数据。

  Returns

  原始数据。

method getModel

getModel: () => ShapeInfo;

• 获取 Element 对应的图形绘制数据。

  Returns

  图形绘制数据。

method getStates

getStates: () => string[];

• 获取当前 Element 上所有的状态。

  Returns

  当前 Element 上所有的状态数组。

method hasState

hasState: (stateName: string) => boolean;

• 查询当前 Element 上是否已设置 stateName 对应的状态。

  Parameter stateName

  状态名称。

  Returns

  true 表示存在，false 表示不存在。

method setState

setState: (stateName: string, stateStatus: boolean) => void;

• 设置 Element 的状态。

  目前 Element 开放三种状态： 1. active 2. selected 3. inactive

  这三种状态相互独立，可以进行叠加。

  这三种状态的样式可在 [[Theme]] 主题中或者通过 geometry.state() 接口进行配置。

  // 激活 active 状态
  setState('active', true);

  Parameter stateName

  状态名

  Parameter stateStatus

  是否开启状态

method update

update: (model: ShapeInfo) => void;

• 更新图形。

  Parameter model

  更新的绘制数据。

constructor

constructor(view: View, gEvent: GEvent, data?: Datum);

property clientX

readonly clientX: number;

• x 窗口坐标

property clientY

readonly clientY: number;

• y 窗口坐标

property data

data?: Datum;

• 原始数据

property event

readonly event: any;

• 获取对应的 dom 原生时间

property gEvent

gEvent: GEvent;

• 被包装的原生 G 事件

property target

readonly target: IShape;

• the real trigger shape of the event

property type

type: string;

• 事件类型

property view

view: View;

• 当前 target 归属的 view 实例

property x

readonly x: number;

• x 画布坐标

property y

readonly y: number;

• y 画布坐标

method clone

clone: () => Event;

• clone a new event with same attributes

  Returns

  [[Event]]

method fromData

static fromData: (view: View, type: string, data: Datum) => Event;

• 非交互产生的事件

  Parameter view

  Parameter type

  Parameter data

method toString

toString: () => string;

• event string

  Returns

  string

constructor

constructor(view: View, cfg: FacetCfg<FacetData>);

property cfg

protected cfg: FacetCfg<FacetData>;

• 分面的配置项

property container

container: IGroup;

• 分面容器

property destroyed

destroyed: boolean;

• 是否销毁

property facets

protected facets: F[];

• 分面之后的所有分面数据结构

property view

view: View;

• 分面所在的 view

method afterEachView

protected abstract afterEachView: (view: View, facet: F) => any;

• 处理 eachView 之后

  Parameter view

  Parameter facet

  Modifiers

  • @override

method beforeEachView

protected abstract beforeEachView: (view: View, facet: F) => any;

• 开始处理 eachView

  Parameter view

  Parameter facet

  Modifiers

  • @override

method clear

clear: () => void;

• 清空，clear 之后如果还需要使用，需要重新调用 init 初始化过程 一般在数据有变更的时候调用，重新进行数据的分面逻辑

method destroy

destroy: () => void;

• 销毁

method facetToView

protected facetToView: (facet: F) => View;

• 根据 facet 生成 view，可以给上层自定义使用

  Parameter facet

method generateFacets

protected abstract generateFacets: (data: Datum[]) => F[];

• 生成分面数据，包含布局

  Parameter data

  Modifiers

  • @override

method getDefaultCfg

protected getDefaultCfg: () => {
    eachView: any;
    showTitle: boolean;
    spacing: number[];
    padding: number;
    fields: any[];
};

method getDefaultTitleCfg

protected getDefaultTitleCfg: () => {
    style: { fontSize: number; fill: string; fontFamily: any };
};

• 默认的 title 样式，因为有的分面是 title，有的分面配置是 columnTitle、rowTitle

method getFacetDataFilter

protected getFacetDataFilter: (conditions: Condition[]) => FacetDataFilter;

• 获取分面数据

  Parameter conditions

method getFieldValues

protected getFieldValues: (data: Datum[], field: string) => string[];

• 获取这个字段对应的所有值，数组

  Parameter data

  数据

  Parameter field

  字段名 字段对应的值

method getRegion

protected getRegion: (
    rows: number,
    cols: number,
    xIndex: number,
    yIndex: number
) => Region;

• 获得每个分面的 region，平分区域

  Parameter rows

  row 总数

  Parameter cols

  col 总数

  Parameter xIndex

  x 方向 index

  Parameter yIndex

  y 方向 index

method getXAxisOption

protected abstract getXAxisOption: (
    x: string,
    axes: any,
    option: AxisCfg,
    facet: F
) => object;

• 获取 x 轴的配置

  Parameter x

  Parameter axes

  Parameter option

  Parameter facet

method getYAxisOption

protected abstract getYAxisOption: (
    y: string,
    axes: any,
    option: AxisCfg,
    facet: F
) => object;

• 获取 y 轴的配置

  Parameter y

  Parameter axes

  Parameter option

  Parameter facet

method init

init: () => void;

• 初始化过程

method processAxis

protected processAxis: (view: View, facet: F) => void;

• 处理 axis 的默认配置

  Parameter view

  Parameter facet

method render

render: () => void;

• 渲染分面，由上层 view 调用。包括： - 分面 view - 轴 - title

  子类可以复写，添加一些其他组件，比如滚动条等

method update

update: () => void;

• 更新 facet

constructor

constructor(cfg: GeometryCfg);

• 创建 Geometry 实例。

  Parameter cfg

property adjustOption

protected adjustOption: AdjustOption[];

• adjust 配置项

property animateOption

animateOption: boolean | AnimateOption;

• animate 配置项

property attributeOption

protected attributeOption: Record<string, AttributeOption>;

• 图形属性映射配置

property attributes

attributes: Record<string, Attribute>;

• Attribute map

property beforeMappingData

protected beforeMappingData: Data[];

• 存储发生图形属性映射前的数据

property canvasRegion

canvasRegion: BBox;

• 画布区域，用于 label 布局。

property columnWidthRatio

protected columnWidthRatio: number;

• 一般柱状图宽度占比

property container

readonly container: IGroup;

• 图形绘制容器。

property coordinate

coordinate: Coordinate;

• Coordinate 坐标系实例。

property customOption

protected customOption: any;

• custom 自定义的配置项

property data

data: Data;

• 用户绘制数据。

property dataArray

dataArray: MappingDatum[][];

• 存储处理后的数据， + init() 及 updateData() 逻辑后, 结构为 Data[]； + paint() 逻辑后，结构为 MappingDatum[][]。

property defaultSize

protected defaultSize: number;

• 存储每个 shape 的默认 size，用于 Interval、Schema 几何标记

property dodgePadding

protected dodgePadding: number;

• 组内间距

property elements

elements: Element[];

• Element map

property elementsMap

elementsMap: Record<string, Element>;

• 使用 key-value 结构存储 Element，key 为每个 Element 实例对应的唯一 ID

property generatePoints

protected generatePoints: boolean;

• 是否生成多个点来绘制图形。

property intervalPadding

protected intervalPadding: number;

• 组间距

property isCoordinateChanged

protected isCoordinateChanged: boolean;

property labelOption

labelOption: false | LabelOption;

• 存储 label 配置信息。

property labelsContainer

readonly labelsContainer: IGroup;

• label 绘制容器。

property lastElementsMap

protected lastElementsMap: Record<string, Element>;

• 存储上一次渲染时的 element 映射表，用于更新逻辑

property maxColumnWidth

protected maxColumnWidth: number;

• 柱状图最大宽度

property minColumnWidth

protected minColumnWidth: number;

• 柱状图最小宽度

property multiplePieWidthRatio

protected multiplePieWidthRatio: number;

• 多层饼图/环图占比

property roseWidthRatio

protected roseWidthRatio: number;

• 玫瑰图占比

property scaleDefs

scaleDefs: Record<string, ScaleOption>;

• scale 定义，需要外部传入。

property scales

scales: Record<string, Scale>;

• 存储 geometry 需要的 scales，需要外部传入。

property shapeFactory

protected shapeFactory: ShapeFactory;

• 每个 Geometry 对应的 Shape 工厂实例，用于创建各个 Shape

property shapeType

readonly shapeType: string;

• ShapeFactory 对应的类型。

property sortable

sortable: boolean;

• 是否对数据进行排序，默认为 false。

property sortZIndex

sortZIndex?: boolean;

• 是否需要对 zIndex 进行 sort。因为耗时长，由具体场景自行决定

property stateOption

stateOption: StateOption;

• 状态量相关的配置项

property styleOption

protected styleOption: StyleOption;

• style 配置项

property theme

theme: LooseObject;

• 当前 Geometry 实例主题。

property tooltipOption

tooltipOption: boolean | GeometryTooltipOption;

• 存储 tooltip 配置信息。

property type

readonly type: string;

• Geometry 几何标记类型。

property useDeferredLabel

protected useDeferredLabel?: number;

property zIndexReversed

zIndexReversed?: boolean;

• elements 的 zIndex 默认按顺序提升，通过 zIndexReversed 可以反序，从而数据越前，层级越高

method adjust

adjust: (
    adjustCfg: string | string[] | AdjustOption | AdjustOption[]
) => Geometry;

• 设置数据调整方式。G2 目前内置了四种类型： 1. dodge 2. stack 3. symmetric 4. jitter

  **Tip** + 对于 'dodge' 类型，可以额外进行如下属性的配置:

  geometry.adjust('dodge', {
    marginRatio: 0, // 取 0 到 1 范围的值（相对于每个柱子宽度），用于控制一个分组中柱子之间的间距
    dodgeBy: 'x', // 该属性只对 'dodge' 类型生效，声明以哪个数据字段为分组依据
  });

  + 对于 'stack' 类型，可以额外进行如下属性的配置:

  geometry.adjust('stack', {
    reverseOrder: false, // 用于控制是否对数据进行反序操作
  });

  Parameter adjustCfg

  数据调整配置

  Returns

  Example 1

  geometry.adjust('stack');
  
  geometry.adjust({
    type: 'stack',
    reverseOrder: false,
  });
  
  // 组合使用 adjust
  geometry.adjust([ 'stack', 'dodge' ]);
  
  geometry.adjust([
    { type: 'stack' },
    { type: 'dodge', dodgeBy: 'x' },
  ]);

method adjustScale

protected adjustScale: () => void;

• 调整度量范围。主要针对发生层叠以及一些特殊需求的 Geometry，比如 Interval 下的柱状图 Y 轴默认从 0 开始。

method animate

animate: (cfg: AnimateOption | boolean) => Geometry;

• Geometry 动画配置。

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

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

  Parameter cfg

  动画配置

  Returns

  Example 1

  animate({
    enter: {
      duration: 1000, // enter 动画执行时间
    },
    leave: false, // 关闭 leave 销毁动画
  });

method changeVisible

changeVisible: (visible: boolean) => void;

• 显示或者隐藏 geometry。

  Parameter visible

method clear

clear: () => void;

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

  Modifiers

  • @override

method color

color: {
    (field: AttributeOption): Geometry;
    (
        field: string,
        cfg?: string | string[] | ColorAttrCallback
    ): Geometry<ShapePoint>;
};

• 配置 color 通道映射规则。

  Parameter field

  映射规则

  Returns

  Example 1

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

• Parameter field

  参与颜色映射的数据字段，多个字段使用 '*' 连接符进行连接。

  Parameter cfg

  Optional, color 映射规则。

  Returns

  Example 1

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

method createAttrOption

protected createAttrOption: (
    attrName: string,
    field: AttributeOption | string | number,
    cfg?: any
) => void;

method createElement

protected createElement: (
    mappingDatum: MappingDatum,
    index: number,
    isUpdate?: boolean
) => Element;

• 创建 Element 实例。

  Parameter mappingDatum

  Element 对应的绘制数据

  Parameter isUpdate

  是否处于更新阶段

  Returns

  element 返回创建的 Element 实例

method createShapePointsCfg

protected createShapePointsCfg: (obj: Datum) => S;

• 获取每个 Shape 对应的关键点数据。

  Parameter obj

  经过分组 -> 数字化 -> adjust 调整后的数据记录

  Returns

method customInfo

customInfo: (cfg: any) => this;

• 用于向 shape 中传入自定义的数据。目前可能仅仅可能用于在自定义 shape 的时候，像自定义 shape 中传入自定义的数据，方便实现自定义 shape 的配置能力。

  Parameter cfg

  Example 1

  chart.interval().customInfo({ yourData: 'hello, g2!' });

  然后在自定义 shape 的时候，可以拿到这个信息。

  registerShape('interval', 'your-shape', {
    draw(shapeInfo, container) {
      const { customInfo } = shapeInfo;
      console.log(customInfo); // will log { yourData: 'hello, g2!' }.
    }
  });

method destroy

destroy: () => void;

• 销毁 Geometry 实例。

method getAdjust

getAdjust: (adjustType: string) => Adjust;

• 获取对应的 adjust 实例

  Parameter adjustType

  Returns

method getAttribute

getAttribute: (name: string) => Attribute;

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

method getAttributeValues

getAttributeValues: (attr: Attribute, obj: Datum) => any[];

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

  Parameter attr

  Attribute 图形属性实例。

  Parameter obj

  需要进行映射的原始数据。

  Returns

method getCoordinate

getCoordinate: () => Coordinate;

• 获得 coordinate 实例

  Returns

method getData

getData: () => Data;

method getDefaultValue

getDefaultValue: (attrName: string) => any;

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

method getDrawCfg

protected getDrawCfg: (mappingDatum: MappingDatum) => ShapeInfo;

• 获取每条数据对应的图形绘制数据。

  Parameter mappingDatum

  映射后的数据

  Returns

  draw cfg

method getElementId

getElementId: (data: MappingDatum | MappingDatum[]) => any;

• 获取数据对应的唯一 id。

  Parameter data

  Element 对应的绘制数据

  Returns

method getElements

getElements: () => Element[];

• 获取 Geometry 的所有 Elements。

  getElements();

method getElementsBy

getElementsBy: (condition: (element: Element) => boolean) => Element[];

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

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

  Parameter condition

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

  Returns

method getFields

getFields: () => any[];

• 获得所有的字段

method getGroupAttributes

getGroupAttributes: () => Attribute[];

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

method getGroupFields

getGroupFields: () => string[];

• 获取当前配置中的所有分组 & 分类的字段。 fields string[]

method getGroupScales

getGroupScales: () => Scale[];

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

  Returns

method getLabelType

protected getLabelType: () => string;

• 获取渲染的 label 类型。

method getOffscreenGroup

getOffscreenGroup: () => IGroup;

• 获取虚拟 Group。

  Returns