@antv/g2

  • Version 4.1.17
  • Published
  • 11.2 MB
  • 15 dependencies
  • MIT license

Install

npm i @antv/g2
yarn add @antv/g2
pnpm add @antv/g2

Overview

the Grammar of Graphics in Javascript

Index

Variables

Functions

Classes

Interfaces

Enums

Namespaces

Variables

variable Util

const Util: {
getLegendItems: typeof getLegendItems;
translate: typeof translate;
rotate: typeof rotate;
zoom: typeof zoom;
transform: (m: number[], actions: any[][]) => number[];
getAngle: typeof getAngle;
getSectorPath: typeof getSectorPath;
polarToCartesian: typeof polarToCartesian;
getDelegationObject: typeof getDelegationObject;
getTooltipItems: typeof getTooltipItems;
};

    variable VERSION

    const VERSION: string;

      Functions

      function getActionClass

      getActionClass: (actionName: string) => ActionConstructor;
      • 根据 action 的 name 获取定义的类

        Parameter actionName

        action 的 name

      function getAnimation

      getAnimation: (type: string) => Animation;
      • 根据名称获取对应的动画执行函数

        Parameter type

        动画函数名称

      function getEngine

      getEngine: (name: string) => IG;
      • 通过名字获取渲染 engine

        Parameter name

        渲染引擎名字

        Returns

        G engine

      function getFacet

      getFacet: (type: string) => FacetCtor;
      • 根据 type 获取 facet 类

        Parameter type

        分面类型

      function getGeometryLabel

      getGeometryLabel: (type: string) => GeometryLabelConstructor;
      • 获取 type 对应的 [[GeometryLabel]] 类

        Parameter type

        Returns

      function getGeometryLabelLayout

      getGeometryLabelLayout: (type: string) => GeometryLabelsLayoutFn;
      • 获取 type 对应的 [[GeometryLabelsLayoutFn]] label 布局函数

        Parameter type

        布局函数名称

        Returns

      function getInteraction

      getInteraction: (name: string) => InteractionSteps | InteractionConstructor;
      • 根据交互行为名字获取对应的交互类

        Parameter name

        交互名字

        Returns

        交互类

      function getShapeFactory

      getShapeFactory: (factoryName: string) => ShapeFactory;
      • 获取 factoryName 对应的 shapeFactory

        Parameter factoryName

        Returns

        shape factory

      function getTheme

      getTheme: (theme?: string) => LooseObject;
      • 获取主题配置信息。

        Parameter theme

        主题名

      function registerAction

      registerAction: (
      actionName: string,
      ActionClass: ActionConstructor,
      cfg?: LooseObject
      ) => void;
      • 注册 Action

        Parameter actionName

        action 的名称

        Parameter ActionClass

        继承自 action 的类

      function registerAnimation

      registerAnimation: (type: string, animation: Animation) => void;
      • 注册动画执行函数

        Parameter type

        动画执行函数名称

        Parameter animation

        动画执行函数

      function registerComponentController

      registerComponentController: (name: string, plugin: ControllerCtor) => void;
      • 全局注册组件。

        Parameter name

        组件名称

        Parameter plugin

        注册的组件类

        Returns

        void

      function registerEngine

      registerEngine: (name: string, engine: IG) => void;
      • 注册渲染引擎

        Parameter name

        Parameter engine

      function registerFacet

      registerFacet: (type: string, ctor: FacetCtor) => void;
      • 注册一个 Facet 类

        Parameter type

        分面类型

        Parameter ctor

        分面类

      function registerGeometry

      registerGeometry: (name: string, Ctor: any) => void;
      • 注册 geometry 组件

        Parameter name

        Parameter Ctor

        Returns

        Geometry

      function registerGeometryLabel

      registerGeometryLabel: (type: string, ctor: GeometryLabelConstructor) => void;
      • 注册定义的 GeometryLabel 类

        Parameter type

        GeometryLabel 类型名称

        Parameter ctor

        GeometryLabel 类

      function registerGeometryLabelLayout

      registerGeometryLabelLayout: (
      type: string,
      layoutFn: GeometryLabelsLayoutFn
      ) => void;
      • 注册定义的 label 布局函数

        Parameter type

        label 布局函数名称

        Parameter layoutFn

        label 布局函数

      function registerInteraction

      registerInteraction: (
      name: string,
      interaction: InteractionSteps | InteractionConstructor
      ) => void;
      • 注册交互行为

        Parameter name

        交互行为名字

        Parameter interaction

        交互类

      function registerShape

      registerShape: (
      factoryName: string,
      shapeType: string,
      cfg: RegisterShape
      ) => Shape;
      • 注册 Shape。

        Parameter factoryName

        对应的 ShapeFactory 名称。

        Parameter shapeType

        注册的 shape 名称。

        Parameter cfg

        注册 Shape 需要覆写定义的属性。

        Returns

        shape 返回注册的 shape 对象。

      function registerShapeFactory

      registerShapeFactory: (
      factoryName: string,
      cfg: RegisterShapeFactory
      ) => ShapeFactory;
      • 注册 ShapeFactory。

        Parameter factoryName

        ShapeFactory 名称,对应 Geometry 几何标记名称。

        Parameter cfg

        注册 ShapeFactory 需要覆写定义的属性。

        Returns

        返回 ShapeFactory 对象。

      function registerTheme

      registerTheme: (theme: string, value: LooseObject) => void;
      • 注册新的主题配置信息。

        Parameter theme

        主题名。

        Parameter value

        具体的主题配置。

      Classes

      class Action

      abstract class Action<T = LooseObject> implements IAction {}
      • Action 的基类

      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,提供给子类用于继承

        class Chart

        class Chart extends View {}
        • Chart 类,是使用 G2 进行绘图的入口。

        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 changeSize

          changeSize: (width: number, height: number) => this;
          • 改变图表大小,同时重新渲染。

            Parameter width

            图表宽度

            Parameter height

            图表高度

            Returns

          method changeVisible

          changeVisible: (visible: boolean) => this;
          • 显示或隐藏图表

            Parameter visible

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

            Returns

          method destroy

          destroy: () => void;
          • 销毁图表,同时解绑事件,销毁创建的 G.Canvas 实例。

            Returns

            void

          method forceFit

          forceFit: () => void;
          • 自动根据容器大小 resize 画布

          class ComponentController

          abstract class Controller<O = unknown> {}
          • Component Controller 规范需要定义的基类 1. 规范的 option 输入 2. 统一的信息获取 API 3. 明确定义的组件事件(名称、数据)

          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,然后对同的做处理 - 创建增加的 - 更新已有的 - 销毁删除的

                class Element

                class Element extends Base {}
                • Element 图形元素。 定义:在 G2 中,我们会将数据通过图形语法映射成不同的图形,比如点图,数据集中的每条数据会对应一个点,柱状图每条数据对应一个柱子,线图则是一组数据对应一条折线,Element 即一条/一组数据对应的图形元素,它代表一条数据或者一个数据集,在图形层面,它可以是单个 Shape 也可以是多个 Shape,我们称之为图形元素。

                constructor

                constructor(cfg: ElementCfg);

                  property animate

                  animate: boolean | AnimateOption;
                  • shape 的动画配置

                  property container

                  container: any;
                  • shape 容器

                  property geometry

                  geometry: Geometry<ShapePoint>;
                  • element 对应的 Geometry 实例

                  property labelShape

                  labelShape: any[];
                  • 保存 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: () => any;
                  • 返回 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

                    更新的绘制数据。

                  class Event

                  class Event {}
                  • Whether it can(or necessary to) keep consistent with the structure of G.Event or directly use the structure of G.Event G2 事件的事件包装类,基于 G.Event

                  constructor

                  constructor(view: View, gEvent: any, 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: any;
                    • 被包装的原声 G 事件

                    property target

                    readonly target: any;
                    • 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

                    class Facet

                    abstract class Facet<
                    C extends FacetCfg<FacetData> = FacetCfg<FacetData>,
                    F extends FacetData = FacetData
                    > {}
                    • facet 基类 - 定义生命周期,方便自定义 facet - 提供基础的生命流程方法

                      生命周期:

                      初始化 init 1. 初始化容器 2. 数据分面,生成分面布局信息

                      渲染阶段 render 1. view 创建 2. title 3. axis

                      清除阶段 clear 1. 清除 view

                      销毁阶段 destroy 1. clear 2. 清除事件 3. 清除 group

                    constructor

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

                      property cfg

                      protected cfg: FacetCfg<FacetData>;
                      • 分面的配置项

                      property container

                      container: any;
                      • 分面容器

                      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;
                      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

                        class Geometry

                        class Geometry<S extends ShapePoint = ShapePoint> extends Base {}
                        • Geometry 几何标记基类,主要负责数据到图形属性的映射以及绘制逻辑。

                        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, any>;
                        • Attribute map

                        property beforeMappingData

                        protected beforeMappingData: Data[];
                        • 存储发生图形属性映射前的数据

                        property canvasRegion

                        canvasRegion: any;
                        • 画布区域,用于 label 布局。

                        property columnWidthRatio

                        protected columnWidthRatio: number;
                        • 一般柱状图宽度占比

                        property container

                        readonly container: any;
                        • 图形绘制容器。

                        property coordinate

                        coordinate: any;
                        • 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: any;
                          • 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, any>;
                          • 存储 geometry 需要的 scales,需要外部传入。

                          property shapeFactory

                          protected shapeFactory: ShapeFactory;
                          • 每个 Geometry 对应的 Shape 工厂实例,用于创建各个 Shape

                          property shapeType

                          readonly shapeType: string;
                          • ShapeFactory 对应的类型。

                          property sortable

                          sortable: boolean;
                          • 是否对数据进行排序,默认为 false。

                          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 zIndexReversed

                          protected 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 createElement

                          protected createElement: (
                          mappingDatum: MappingDatum,
                          isUpdate?: boolean
                          ) => Element;
                          • 创建 Element 实例。

                            Parameter mappingDatum

                            Element 对应的绘制数据

                            Parameter isUpdate

                            是否处于更新阶段

                            Returns

                            element 返回创建的 Element 实例

                          method createElements

                          protected createElements: (
                          mappingData: MappingDatum[],
                          index: number,
                          isUpdate?: boolean
                          ) => Element[];
                          • 创建所有的 Elements。

                            Parameter mappingData

                            Parameter isUpdate

                            Returns

                            elements

                          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) => any;

                            method getAttribute

                            getAttribute: (name: string) => any;
                            • 根据名字获取图形属性实例。

                            method getAttributeValues

                            getAttributeValues: (attr: any, obj: Datum) => any[];
                            • 获取该数据发生图形映射后对应的 Attribute 图形空间数据。

                              Parameter attr

                              Attribute 图形属性实例。

                              Parameter obj

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

                              Returns

                            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 getElementsBy

                            getElementsBy: (condition: (element: Element) => boolean) => Element[];
                            • 根据一定的规则查找 Geometry 的 Elements。

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

                              Parameter condition

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

                              Returns

                            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: () => any;
                            • 获取虚拟 Group。

                              Returns

                            method getScaleFields

                            getScaleFields: () => string[];
                            • 获取所有需要创建 scale 的字段名称。

                            method getShapeFactory

                            protected getShapeFactory: () => ShapeFactory;
                            • 获取当前 Geometry 对应的 Shape 工厂实例。

                            method getShapeMarker

                            getShapeMarker: (shapeName: string, cfg: ShapeMarkerCfg) => ShapeMarkerAttrs;
                            • 获取 shape 对应的 marker 样式。

                              Parameter shapeName

                              shape 具体名字

                              Parameter cfg

                              marker 信息

                              Returns

                            method getShapes

                            getShapes: () => (IShape | IGroup)[];
                            • 获取该 Geometry 下所有生成的 shapes。

                              Returns

                              shapes

                            method getXScale

                            getXScale: () => any;
                            • 获取 x 轴对应的 scale 实例。

                            method getXYFields

                            getXYFields: () => string[];
                            • 获得图形的 x y 字段。

                            method getYMinValue

                            protected getYMinValue: () => number;
                            • 获取 Y 轴上的最小值。

                            method getYScale

                            getYScale: () => any;
                            • 获取 y 轴对应的 scale 实例。

                            method init

                            init: (cfg?: InitCfg) => void;
                            • 初始化 Geomtry 实例: 创建 [[Attribute]] and [[Scale]] 实例,进行数据处理,包括分组、数值化以及数据调整。

                            method initAttributes

                            protected initAttributes: () => void;

                              method label

                              label: {
                              (field: LabelOption | false | string): Geometry;
                              (
                              field: string,
                              secondParam: GeometryLabelCfg | LabelCallback
                              ): Geometry<ShapePoint>;
                              (
                              field: string,
                              secondParam: LabelCallback,
                              thirdParam: GeometryLabelCfg
                              ): Geometry<ShapePoint>;
                              };
                              • Geometry label 配置。

                                Parameter field

                                Returns

                                label

                                Example 1

                                // data: [ {x: 1, y: 2, z: 'a'}, {x: 2, y: 2, z: 'b'} ]
                                // 在每个图形上显示 z 字段对应的数值
                                label({
                                fields: [ 'z' ]
                                });
                                label(false); // 不展示 label
                                // 在每个图形上显示 x 字段对应的数值,同时配置文本颜色为红色
                                label('x', {
                                style: {
                                fill: 'red',
                                },
                                })
                                // 以 type 类型的 label 渲染每个图形上显示 x 字段对应的数值,同时格式化文本内容
                                label('x', (xValue) => {
                                return {
                                content: xValue + '%',
                                };
                                }, {
                                type: 'base' // 声明 label 类型
                                })

                              method paint

                              paint: (isUpdate?: boolean) => void;
                              • 将原始数据映射至图形空间,同时创建图形对象。

                              method position

                              position: (cfg: string | string[] | AttributeOption) => Geometry;
                              • 配置 position 通道映射规则。

                                Parameter cfg

                                映射规则

                                Returns

                                Example 1

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

                              method shape

                              shape: {
                              (field: AttributeOption): Geometry;
                              (field: string, cfg?: string[] | ShapeAttrCallback): Geometry<ShapePoint>;
                              };
                              • 配置 shape 通道映射规则。

                                Parameter field

                                映射规则配置。

                                Returns

                                Example 1

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

                              • Parameter field

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

                                Parameter cfg

                                Optional, shape 映射规则。

                                Returns

                                Example 1

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

                              method size

                              size: {
                              (field: AttributeOption): Geometry;
                              (
                              field: string | number,
                              cfg?: [number, number] | SizeAttrCallback
                              ): Geometry<ShapePoint>;
                              };
                              • 配置 size 通道映射规则。

                                Parameter field

                                映射规则。

                                Returns

                                Example 1

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

                              • Parameter field

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

                                Parameter cfg

                                Optional, size 映射规则

                                Returns

                                Example 1

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

                              method sort

                              sort: (mappingArray: Data[]) => void;

                                method state

                                state: (cfg: StateOption) => this;
                                • 设置状态对应的样式。

                                  Parameter cfg

                                  状态样式

                                  Example 1

                                  chart.interval().state({
                                  selected: {
                                  animate: { duration: 100, easing: 'easeLinear' },
                                  style: {
                                  lineWidth: 2,
                                  stroke: '#000',
                                  },
                                  },
                                  });

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

                                  chart.interval().shape('groupShape').state({
                                  selected: {
                                  style: {
                                  0: { lineWidth: 2 },
                                  1: { fillOpacity: 1 },
                                  }
                                  }
                                  });

                                method style

                                style: {
                                (field: StyleOption | LooseObject): Geometry;
                                (field: string, styleFunc: StyleCallback): Geometry<ShapePoint>;
                                };
                                • 图形样式配置。

                                  Parameter field

                                  配置样式属性或者样式规则。

                                  Returns

                                  Example 1

                                  // 配置图形样式
                                  style({
                                  lineWidth: 2,
                                  stroke: '#1890ff',
                                  });
                                  // 根据具体的数据进行详细配置
                                  style({
                                  fields: [ 'x', 'y' ], // 数据字段
                                  callback: (xVal, yVal) => {
                                  const style = { lineWidth: 2, stroke: '#1890ff' };
                                  if (xVal === 'a') {
                                  style.lineDash = [ 2, 2 ];
                                  }
                                  return style;
                                  },
                                  });

                                • Parameter field

                                  数据字段或者样式配置规则。

                                  Parameter styleFunc

                                  Optional, 样式配置回调函数。

                                  Returns

                                  Example 1

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

                                method tooltip

                                tooltip: {
                                (field: GeometryTooltipOption | boolean): Geometry;
                                (field: string, cfg?: TooltipCallback): Geometry<ShapePoint>;
                                };
                                • 配置 Geometry 显示的 tooltip 内容。

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

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

                                  Parameter field

                                  tooltip 配置信息。

                                  Returns

                                  Example 1

                                  // data: [{x: 'a', y: 10}]
                                  tooltip({
                                  fields: [ 'x' ],
                                  });

                                  ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*268uQ50if60AAAAAAAAAAABkARQnAQ)

                                  tooltip({
                                  fields: [ 'x', 'y' ],
                                  });

                                  ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*A_ujSa8QhtcAAAAAAAAAAABkARQnAQ)

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

                                  Example 2

                                  chart.tooltip({
                                  itemTpl: '<li>{x}: {y}</li>',
                                  });
                                  chart.line()
                                  .position('x*y')
                                  .tooltip({
                                  fields: [ 'x', 'y' ],
                                  callback: (x, y) => {
                                  return {
                                  x,
                                  y,
                                  };
                                  },
                                  });

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

                                • Parameter field

                                  参与映射的字段。

                                  Parameter cfg

                                  Optional, 回调函数

                                  Returns

                                  Example 1

                                  // data: [{x: 'a', y: 10}]
                                  // 等同于 tooltip({ fields: [ 'x' ] })
                                  tooltip('x');
                                  // 等同于 tooltip({ fields: [ 'x', 'y' ] })
                                  tooltip('x*y');
                                  // 等同于 tooltip({ fields: [ 'x', 'y' ], callback: (x, y) => { x, y } })
                                  tooltip('x*y', (x, y) => {
                                  return {
                                  x,
                                  y,
                                  };
                                  });

                                method update

                                update: (cfg?: InitCfg) => void;
                                • Geometry 更新。

                                  Parameter cfg

                                  更新的配置

                                class GeometryLabel

                                class GeometryLabel {}
                                • Geometry Label 基类,用于生成 Geometry 下所有 label 的配置项信息

                                constructor

                                constructor(geometry: Geometry<ShapePoint>);

                                  property defaultLayout

                                  defaultLayout: string;
                                  • 默认的布局

                                  property geometry

                                  readonly geometry: Geometry<ShapePoint>;
                                  • geometry 实例

                                  property labelsRenderer

                                  labelsRenderer: Labels;

                                    method clear

                                    clear: () => void;

                                      method destroy

                                      destroy: () => void;

                                        method getCoordinate

                                        getCoordinate: () => any;

                                          method getDefaultLabelCfg

                                          protected getDefaultLabelCfg: (offset?: number, position?: string) => any;
                                          • 获取 label 的默认配置

                                          method getLabelAlign

                                          protected getLabelAlign: (
                                          item: LabelItem,
                                          index: number,
                                          total: number
                                          ) => TextAlign;
                                          • 获取文本的对齐方式

                                            Parameter item

                                            Parameter index

                                            Parameter total

                                            Returns

                                          method getLabelId

                                          protected getLabelId: (mappingData: MappingDatum) => any;
                                          • 获取每一个 label 的唯一 id

                                            Parameter mappingData

                                            label 对应的图形的绘制数据

                                          method getLabelItems

                                          getLabelItems: (mapppingArray: MappingDatum[]) => LabelItem[];

                                            method getLabelOffset

                                            protected getLabelOffset: (offset: number | string) => number;
                                            • 获取 label offset

                                            method getLabelOffsetPoint

                                            protected getLabelOffsetPoint: (
                                            labelCfg: LabelCfg,
                                            index: number,
                                            total: number
                                            ) => Point;
                                            • 获取每个 label 的偏移量 (矢量)

                                              Parameter labelCfg

                                              Parameter index

                                              Parameter total

                                              {Point} offsetPoint

                                            method getLabelPoint

                                            protected getLabelPoint: (
                                            labelCfg: LabelCfg,
                                            mappingData: MappingDatum,
                                            index: number
                                            ) => LabelPointCfg;
                                            • 获取每个 label 的位置

                                              Parameter labelCfg

                                              Parameter mappingData

                                              Parameter index

                                              Returns

                                              label point

                                            method getThemedLabelCfg

                                            protected getThemedLabelCfg: (labelCfg: LabelCfg) => any;
                                            • 获取当前 label 的最终配置

                                              Parameter labelCfg

                                            method render

                                            render: (mapppingArray: MappingDatum[], isUpdate?: boolean) => void;

                                              method setLabelPosition

                                              protected setLabelPosition: (
                                              labelPointCfg: LabelPointCfg,
                                              mappingData: MappingDatum,
                                              index: number,
                                              position: string
                                              ) => void;
                                              • 设置 label 位置

                                                Parameter labelPointCfg

                                                Parameter mappingData

                                                Parameter index

                                                Parameter position

                                              class Interaction

                                              class Interaction {}
                                              • 交互的基类。

                                              constructor

                                              constructor(view: View, cfg: LooseObject);

                                                property cfg

                                                protected cfg: LooseObject;
                                                • 配置项

                                                property view

                                                protected view: View;
                                                • view 或者 chart

                                                method clearEvents

                                                protected clearEvents: () => void;
                                                • 销毁事件

                                                method destroy

                                                destroy: () => void;
                                                • 销毁。

                                                method init

                                                init: () => void;
                                                • 初始化。

                                                method initEvents

                                                protected initEvents: () => void;
                                                • 绑定事件

                                                class InteractionAction

                                                abstract class Action<T = LooseObject> implements IAction {}
                                                • Action 的基类

                                                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,提供给子类用于继承

                                                  class TooltipController

                                                  class Tooltip extends Controller<TooltipOption> {}

                                                  property name

                                                  readonly name: string;

                                                    method changeVisible

                                                    changeVisible: (visible: boolean) => void;

                                                      method clear

                                                      clear: () => void;

                                                        method destroy

                                                        destroy: () => void;

                                                          method getTooltipCfg

                                                          protected getTooltipCfg: () => any;

                                                            method getTooltipItems

                                                            getTooltipItems: (point: Point) => any[];

                                                              method hideTooltip

                                                              hideTooltip: () => void;

                                                                method init

                                                                init: () => void;

                                                                  method isCursorEntered

                                                                  isCursorEntered: (point: Point) => boolean;
                                                                  • 当前鼠标点是在 enter tooltip 中

                                                                    Parameter point

                                                                  method isTooltipLocked

                                                                  isTooltipLocked: () => boolean;
                                                                  • isTooltipLocked

                                                                  method layout

                                                                  layout: () => void;

                                                                    method lockTooltip

                                                                    lockTooltip: () => void;
                                                                    • lockTooltip

                                                                    method processCustomContent

                                                                    protected processCustomContent: (option: TooltipOption) => TooltipOption;

                                                                      method render

                                                                      render: () => void;

                                                                        method reset

                                                                        reset: () => void;

                                                                          method showTooltip

                                                                          showTooltip: (point: Point) => void;
                                                                          • Shows tooltip

                                                                            Parameter point

                                                                          method unlockTooltip

                                                                          unlockTooltip: () => void;
                                                                          • unlockTooltip

                                                                          method update

                                                                          update: () => void;

                                                                            class View

                                                                            class View extends Base {}
                                                                            • G2 视图 View 类

                                                                            constructor

                                                                            constructor(props: ViewCfg);

                                                                              property appendPadding

                                                                              appendPadding: ViewAppendPadding;
                                                                              • padding的基础上增加的调整值

                                                                              property autoPadding

                                                                              autoPadding: PaddingCal;
                                                                              • 存储最终计算的 padding 结果

                                                                              property backgroundGroup

                                                                              backgroundGroup: any;
                                                                              • 三层 Group 图形中的背景层。

                                                                              property canvas

                                                                              canvas: any;
                                                                              • G.Canvas 实例。

                                                                              property controllers

                                                                              controllers: Controller<unknown>[];
                                                                              • 所有的组件 controllers。

                                                                              property coordinateBBox

                                                                              coordinateBBox: BBox;
                                                                              • 坐标系的位置大小,ViewBBox - padding = coordinateBBox。

                                                                              property coordinateController

                                                                              protected coordinateController: CoordinateController;
                                                                              • Coordinate 相关的控制器类,负责坐标系实例的创建、更新、变换等

                                                                              property coordinateInstance

                                                                              protected coordinateInstance: any;

                                                                              property facetInstance

                                                                              protected facetInstance: Facet<FacetCfg<FacetData>, FacetData>;
                                                                              • 分面类实例

                                                                              property filteredData

                                                                              protected filteredData: Data;
                                                                              • 过滤之后的数据

                                                                              property foregroundGroup

                                                                              foregroundGroup: any;
                                                                              • 三层 Group 图形中的前景层。

                                                                              property geometries

                                                                              geometries: Geometry<ShapePoint>[];
                                                                              • 所有的 geometry 实例。

                                                                              property id

                                                                              id: string;
                                                                              • view id,全局唯一。

                                                                              property interactions

                                                                              interactions: Record<string, Interaction>;
                                                                              • 所有的 Interaction 实例。

                                                                              property layoutFunc

                                                                              protected layoutFunc: Layout;
                                                                              • 布局函数

                                                                              property limitInPlot

                                                                              limitInPlot: boolean;
                                                                              • 是否对超出坐标系范围的 Geometry 进行剪切

                                                                              property middleGroup

                                                                              middleGroup: any;
                                                                              • 三层 Group 图形中的中间层。

                                                                              property options

                                                                              protected options: Options;

                                                                                property padding

                                                                                padding: ViewPadding;
                                                                                • view 的 padding 大小,传入的配置(不是解析之后的值)。

                                                                                property parent

                                                                                parent: View;
                                                                                • 父级 view,如果没有父级,则为空。

                                                                                property region

                                                                                protected region: Region;
                                                                                • 标记 view 的大小位置范围,均是 0 ~ 1 范围,便于开发者使用,起始点为左上角。

                                                                                property themeObject

                                                                                protected themeObject: LooseObject;
                                                                                • 主题配置,存储当前主题配置。

                                                                                property viewBBox

                                                                                viewBBox: BBox;
                                                                                • view 区域空间。

                                                                                property views

                                                                                views: View[];
                                                                                • 所有的子 view。

                                                                                method adjustCoordinate

                                                                                adjustCoordinate: () => void;
                                                                                • 调整 coordinate 的坐标范围。

                                                                                method animate

                                                                                animate: (status: boolean) => View;

                                                                                  method annotation

                                                                                  annotation: () => Annotation;
                                                                                  • 辅助标记配置。

                                                                                    view.annotation().line({
                                                                                    start: ['min', 85],
                                                                                    end: ['max', 85],
                                                                                    style: {
                                                                                    stroke: '#595959',
                                                                                    lineWidth: 1,
                                                                                    lineDash: [3, 3],
                                                                                    },
                                                                                    });

                                                                                    更详细的配置项:https://github.com/antvis/component#annotation

                                                                                    Returns

                                                                                    [[Annotation]]

                                                                                  method axis

                                                                                  axis: { (field: boolean): View; (field: string, axisOption: AxisOption): View };
                                                                                  • 开启或者关闭坐标轴。

                                                                                    view.axis(false); // 不展示坐标轴

                                                                                    Parameter field

                                                                                    坐标轴开关

                                                                                  • 对特定的某条坐标轴进行配置。

                                                                                    Parameter field

                                                                                    要配置的坐标轴对应的字段名称

                                                                                    Parameter axisOption

                                                                                    坐标轴具体配置,更详细的配置项可以参考:https://github.com/antvis/component#axis

                                                                                    Example 1

                                                                                    view.axis('city', false); // 不展示 'city' 字段对应的坐标轴
                                                                                    // 将 'city' 字段对应的坐标轴的标题隐藏
                                                                                    view.axis('city', {
                                                                                    title: null,
                                                                                    });

                                                                                  method changeData

                                                                                  changeData: (data: Data) => void;
                                                                                  • 修改数据,数据更新逻辑,数据更新仅仅影响当前这一层的 view

                                                                                    view.changeData([{ city: '北京', sale: '200' }]);

                                                                                    Parameter data

                                                                                    Returns

                                                                                    void

                                                                                  method changeVisible

                                                                                  changeVisible: (visible: boolean) => View;
                                                                                  • 显示或者隐藏整个 view。

                                                                                    Parameter visible

                                                                                    是否可见

                                                                                    Returns

                                                                                    View

                                                                                  method clear

                                                                                  clear: () => void;
                                                                                  • 生命周期:清空图表上所有的绘制内容,但是不销毁图表,chart 仍可使用。

                                                                                    Returns

                                                                                    void

                                                                                  method coord

                                                                                  coord: (
                                                                                  type: string | CoordinateOption,
                                                                                  coordinateCfg?: CoordinateCfg
                                                                                  ) => CoordinateController;
                                                                                  • Deprecated

                                                                                    This method will be removed at G2 V4.1. Replaced by

                                                                                  method coordinate

                                                                                  coordinate: {
                                                                                  (option?: CoordinateOption): CoordinateController;
                                                                                  (type: string, coordinateCfg?: CoordinateCfg): CoordinateController;
                                                                                  };
                                                                                  • 坐标系配置。

                                                                                    Parameter option

                                                                                    Returns

                                                                                    Example 1

                                                                                    view.coordinate({
                                                                                    type: 'polar',
                                                                                    cfg: {
                                                                                    radius: 0.85,
                                                                                    },
                                                                                    actions: [
                                                                                    [ 'transpose' ],
                                                                                    ],
                                                                                    });

                                                                                  • 声明坐标系类型,并进行配置。

                                                                                    // 直角坐标系,并进行转置变换
                                                                                    view.coordinate('rect').transpose();
                                                                                    // 默认创建直角坐标系
                                                                                    view.coordinate();

                                                                                    Parameter type

                                                                                    坐标系类型

                                                                                    Parameter coordinateCfg

                                                                                    坐标系配置

                                                                                    Returns

                                                                                  method createScale

                                                                                  protected createScale: (
                                                                                  field: string,
                                                                                  data: Data,
                                                                                  scaleDef: ScaleOption,
                                                                                  key: string
                                                                                  ) => any;
                                                                                  • 创建 scale,递归到顶层 view 去创建和缓存 scale

                                                                                    Parameter field

                                                                                    Parameter data

                                                                                    Parameter scaleDef

                                                                                    Parameter key

                                                                                  method createView

                                                                                  createView: (cfg?: Partial<ViewCfg>) => View;
                                                                                  • 创建子 view

                                                                                    const innerView = view.createView({
                                                                                    start: { x: 0, y: 0 },
                                                                                    end: { x: 0.5, y: 0.5 },
                                                                                    padding: 8,
                                                                                    });

                                                                                    Parameter cfg

                                                                                    Returns

                                                                                    View

                                                                                  method data

                                                                                  data: (data: Data) => View;
                                                                                  • 装载数据源。

                                                                                    view.data([{ city: '杭州', sale: 100 }, { city: '上海', sale: 110 } ]);

                                                                                    Parameter data

                                                                                    数据源,json 数组。

                                                                                    Returns

                                                                                    View

                                                                                  method destroy

                                                                                  destroy: () => void;
                                                                                  • 生命周期:销毁,完全无法使用。

                                                                                    Returns

                                                                                    void

                                                                                  method facet

                                                                                  facet: <T extends keyof FacetCfgMap>(type: T, cfg: FacetCfgMap[T]) => View;
                                                                                  • view 分面绘制。

                                                                                    view.facet('rect', {
                                                                                    rowField: 'province',
                                                                                    columnField: 'category',
                                                                                    eachView: (innerView: View, facet?: FacetData) => {
                                                                                    innerView.line().position('city*sale');
                                                                                    },
                                                                                    });

                                                                                    Parameter type

                                                                                    分面类型

                                                                                    Parameter cfg

                                                                                    分面配置, [[FacetCfgMap]]

                                                                                    Returns

                                                                                    View

                                                                                  method filter

                                                                                  filter: (field: string, condition: FilterCondition | null) => View;
                                                                                  • 设置数据筛选规则。

                                                                                    view.filter('city', (value: any, datum: Datum) => value !== '杭州');
                                                                                    // 删除 'city' 字段对应的筛选规则。
                                                                                    view.filter('city', null);

                                                                                    Parameter field

                                                                                    数据字段

                                                                                    Parameter condition

                                                                                    筛选规则

                                                                                    Returns

                                                                                    View

                                                                                  method filterData

                                                                                  filterData: (data: Data) => Data;
                                                                                  • 将 data 数据进行过滤。

                                                                                    Parameter data

                                                                                    Returns

                                                                                    过滤之后的数据

                                                                                  method filterFieldData

                                                                                  filterFieldData: (field: string, data: Data) => Data;
                                                                                  • 对某一个字段进行过滤

                                                                                    Parameter field

                                                                                    Parameter data

                                                                                  method getCanvas

                                                                                  getCanvas: () => any;
                                                                                  • 获取 G.Canvas 实例。

                                                                                    Returns

                                                                                    G.Canvas 画布实例。

                                                                                  method getComponents

                                                                                  getComponents: () => ComponentOption[];
                                                                                  • 获取所有的 pure component 组件,用于布局。

                                                                                  method getController

                                                                                  getController: {
                                                                                  (name: 'tooltip'): Tooltip;
                                                                                  (name: 'axis'): Axis;
                                                                                  (name: 'legend'): Legend;
                                                                                  (name: 'scrollbar'): Scrollbar;
                                                                                  (name: 'slider'): Slider;
                                                                                  (name: 'annotation'): Annotation;
                                                                                  (name: 'gestucre'): Gesture;
                                                                                  (name: string): Controller<unknown>;
                                                                                  };

                                                                                    method getCoordinate

                                                                                    getCoordinate: () => any;
                                                                                    • 获取当前坐标系实例。

                                                                                      Returns

                                                                                      [[Coordinate]]

                                                                                    method getData

                                                                                    getData: () => Data;
                                                                                    • 获取 view 的数据(过滤后的数据)。

                                                                                      Returns

                                                                                      处理过滤器之后的数据。

                                                                                    method getGroupScales

                                                                                    getGroupScales: () => Scale[];
                                                                                    • 获取所有的分组字段的 scale 实例。

                                                                                      Returns

                                                                                      获得分组字段的 scale 实例数组。

                                                                                    method getLayer

                                                                                    getLayer: (layer: LAYER) => any;
                                                                                    • 获得绘制的层级 group。

                                                                                      Parameter layer

                                                                                      层级名称。

                                                                                      Returns

                                                                                      对应层级的 Group。

                                                                                    method getLegendAttributes

                                                                                    getLegendAttributes: () => Attribute[];
                                                                                    • 获得所有的 legend 对应的 attribute 实例。

                                                                                      Returns

                                                                                      维度字段的 Attribute 数组

                                                                                    method getOptions

                                                                                    getOptions: () => Options;
                                                                                    • 返回所有配置信息。

                                                                                      Returns

                                                                                      所有的 view API 配置。

                                                                                    method getRootView

                                                                                    getRootView: () => View;
                                                                                    • 获得根节点 view。

                                                                                    method getScaleByField

                                                                                    getScaleByField: (field: string, key?: string) => any;
                                                                                    • 根据字段名去获取 scale 实例。

                                                                                      Parameter field

                                                                                      数据字段名称

                                                                                      Parameter key

                                                                                      id

                                                                                    method getScalesByDim

                                                                                    getScalesByDim: (dimType: 'x' | 'y') => Record<string, Scale>;
                                                                                    • 获取 x 轴或者 y 轴对应的所有 scale 实例。

                                                                                      Parameter dimType

                                                                                      x | y

                                                                                      Returns

                                                                                      x 轴或者 y 轴对应的所有 scale 实例。

                                                                                    method getSnapRecords

                                                                                    getSnapRecords: (point: Point) => any[];
                                                                                    • 获取逼近的点的数据集合

                                                                                      Parameter point

                                                                                      当前坐标点

                                                                                      Returns

                                                                                      数据

                                                                                    method getTheme

                                                                                    getTheme: () => LooseObject;
                                                                                    • 获取当前 view 的主题配置。

                                                                                      Returns

                                                                                      themeObject

                                                                                    method getTooltipItems

                                                                                    getTooltipItems: (point: Point) => any[];
                                                                                    • 获取当前 point 对应的 tooltip 数据项。

                                                                                      Parameter point

                                                                                      坐标点

                                                                                      Returns

                                                                                      tooltip 数据项

                                                                                    method getXScale

                                                                                    getXScale: () => any;
                                                                                    • 获得 x 轴字段的 scale 实例。

                                                                                      Returns

                                                                                      view 中 Geometry 对于的 x scale

                                                                                    method getXY

                                                                                    getXY: (data: Datum) => Point;
                                                                                    • 获取该数据在可视化后,对应的画布坐标点。

                                                                                      Parameter data

                                                                                      原始数据记录

                                                                                      Returns

                                                                                      对应的画布坐标点

                                                                                    method getYScales

                                                                                    getYScales: () => Scale[];
                                                                                    • 获取 y 轴字段的 scales 实例。

                                                                                      Returns

                                                                                      view 中 Geometry 对于的 y scale 数组

                                                                                    method guide

                                                                                    guide: () => Annotation;
                                                                                    • Deprecated

                                                                                      This method will be removed at G2 V4.1. Replaced by

                                                                                    method hideTooltip

                                                                                    hideTooltip: () => View;
                                                                                    • 隐藏 tooltip。

                                                                                      Returns

                                                                                      View

                                                                                    method init

                                                                                    init: () => void;
                                                                                    • 生命周期:初始化

                                                                                      Returns

                                                                                      voids

                                                                                    method interaction

                                                                                    interaction: (name: string, cfg?: LooseObject) => View;
                                                                                    • Call the interaction based on the interaction name

                                                                                      view.interaction('my-interaction', { extra: 'hello world' });

                                                                                      详细文档可以参考:https://g2.antv.vision/zh/docs/api/general/interaction

                                                                                      Parameter name

                                                                                      interaction name

                                                                                      Parameter cfg

                                                                                      interaction config

                                                                                      Returns

                                                                                    method isPointInPlot

                                                                                    isPointInPlot: (point: Point) => boolean;
                                                                                    • 对外暴露方法,判断一个点是否在绘图区域(即坐标系范围)内部。

                                                                                      Parameter point

                                                                                      坐标点

                                                                                    method isTooltipLocked

                                                                                    isTooltipLocked: () => boolean;
                                                                                    • 是否锁定 tooltip。

                                                                                      Returns

                                                                                      是否锁定

                                                                                    method legend

                                                                                    legend: {
                                                                                    (field: LegendOption): View;
                                                                                    (field: string, legendOption: LegendOption): View;
                                                                                    };
                                                                                    • 对图例进行整体配置。

                                                                                      view.legend(false); // 关闭图例
                                                                                      view.legend({
                                                                                      position: 'right',
                                                                                      }); // 图例进行整体配置

                                                                                      Parameter field

                                                                                      Returns

                                                                                      View

                                                                                    • 对特定的图例进行配置。

                                                                                      Parameter field

                                                                                      图例对应的数据字段名称

                                                                                      Parameter legendOption

                                                                                      图例配置,更详细的配置项可以参考:https://github.com/antvis/component#axis

                                                                                      Returns

                                                                                      View

                                                                                      Example 1

                                                                                      view.legend('city', false); // 关闭某个图例,通过数据字段名进行关联
                                                                                      // 对特定的图例进行配置
                                                                                      view.legend('city', {
                                                                                      position: 'right',
                                                                                      });

                                                                                    method lockTooltip

                                                                                    lockTooltip: () => View;
                                                                                    • 将 tooltip 锁定到当前位置不能移动。

                                                                                      Returns

                                                                                      View

                                                                                    method option

                                                                                    option: (name: string, opt: any) => View;
                                                                                    • view.options 属性中存储配置项。

                                                                                      Parameter name

                                                                                      属性名称

                                                                                      Parameter opt

                                                                                      属性值

                                                                                      Returns

                                                                                      view

                                                                                    method paint

                                                                                    protected paint: (isUpdate: boolean) => void;

                                                                                      method removeInteraction

                                                                                      removeInteraction: (name: string) => void;
                                                                                      • 移除当前 View 的 interaction

                                                                                        view.removeInteraction('my-interaction');

                                                                                        Parameter name

                                                                                        interaction name

                                                                                      method removeView

                                                                                      removeView: (view: View) => View;
                                                                                      • 删除一个子 view

                                                                                        Parameter view

                                                                                        removedView

                                                                                      method render

                                                                                      render: (isUpdate?: boolean) => void;
                                                                                      • 生命周期:渲染流程,渲染过程需要处理数据更新的情况。 render 函数仅仅会处理 view 和子 view。

                                                                                        Parameter isUpdate

                                                                                        是否触发更新流程。

                                                                                      method renderLayoutRecursive

                                                                                      protected renderLayoutRecursive: (isUpdate: boolean) => void;
                                                                                      • 递归处理 view 的布局,最终是计算各个 view 的 coordinateBBox 和 coordinateInstance

                                                                                        Parameter isUpdate

                                                                                      method renderPaddingRecursive

                                                                                      protected renderPaddingRecursive: (isUpdate: boolean) => void;
                                                                                      • 递归计算每个 view 的 padding 值,coordinateBBox 和 coordinateInstance

                                                                                        Parameter isUpdate

                                                                                      method renderPaintRecursive

                                                                                      protected renderPaintRecursive: (isUpdate: boolean) => void;
                                                                                      • 最终递归绘制组件和图形

                                                                                        Parameter isUpdate

                                                                                      method scale

                                                                                      scale: {
                                                                                      (field: Record<string, ScaleOption>): View;
                                                                                      (field: string, scaleOption: ScaleOption): View;
                                                                                      };
                                                                                      • 批量设置 scale 配置。

                                                                                        view.scale({
                                                                                        sale: {
                                                                                        min: 0,
                                                                                        max: 100,
                                                                                        }
                                                                                        });

                                                                                        Scale 的详细配置项可以参考:https://github.com/antvis/scale#api

                                                                                        Returns

                                                                                        View

                                                                                      • 为特性的数据字段进行 scale 配置。

                                                                                        view.scale('sale', {
                                                                                        min: 0,
                                                                                        max: 100,
                                                                                        });

                                                                                        Returns

                                                                                        View

                                                                                      method setLayout

                                                                                      setLayout: (layout: Layout) => void;
                                                                                      • 设置 layout 布局函数

                                                                                        Parameter layout

                                                                                        布局函数

                                                                                        Returns

                                                                                        void

                                                                                      method showTooltip

                                                                                      showTooltip: (point: Point) => View;
                                                                                      • 显示 point 坐标点对应的 tooltip。

                                                                                        Parameter point

                                                                                        画布坐标点

                                                                                        Returns

                                                                                        View

                                                                                      method source

                                                                                      source: (data: Data) => View;
                                                                                      • Deprecated

                                                                                        This method will be removed at G2 V4.1. Replaced by

                                                                                      method theme

                                                                                      theme: (theme: string | LooseObject) => View;
                                                                                      • 设置主题。

                                                                                        view.theme('dark'); // 'dark' 需要事先通过 `registerTheme()` 接口注册完成
                                                                                        view.theme({ defaultColor: 'red' });

                                                                                        Parameter theme

                                                                                        主题名或者主题配置

                                                                                        Returns

                                                                                        View

                                                                                      method tooltip

                                                                                      tooltip: (cfg: boolean | TooltipOption) => View;
                                                                                      • tooltip 提示信息配置。

                                                                                        view.tooltip(false); // 关闭 tooltip
                                                                                        view.tooltip({
                                                                                        shared: true
                                                                                        });

                                                                                        Parameter cfg

                                                                                        Tooltip 配置,更详细的配置项参考:https://github.com/antvis/component#tooltip

                                                                                        Returns

                                                                                        View

                                                                                      method unlockTooltip

                                                                                      unlockTooltip: () => View;
                                                                                      • 将 tooltip 锁定解除。

                                                                                        Returns

                                                                                        View

                                                                                      method updateOptions

                                                                                      updateOptions: (options: Options) => this;
                                                                                      • 更新配置项,用于配置项式声明。

                                                                                        Parameter options

                                                                                        配置项

                                                                                      method view

                                                                                      view: (cfg?: Partial<ViewCfg>) => View;
                                                                                      • Deprecated

                                                                                        This method will be removed at G2 V4.1. Replaced by

                                                                                      Interfaces

                                                                                      interface View

                                                                                      interface View {}

                                                                                        method area

                                                                                        area: (cfg?: Partial<AreaCfg>) => Area;
                                                                                        • 创建 Area 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Area 构造函数的配置。

                                                                                          Returns

                                                                                          area 返回 Area 实例。

                                                                                        method edge

                                                                                        edge: (cfg?: Partial<GeometryCfg>) => Edge;
                                                                                        • 创建 Edge 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Edge 构造函数的配置。

                                                                                          Returns

                                                                                          schema 返回 Edge 实例。

                                                                                        method heatmap

                                                                                        heatmap: (cfg?: Partial<GeometryCfg>) => Heatmap;
                                                                                        • 创建 Heatmap 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Heatmap 构造函数的配置。

                                                                                          Returns

                                                                                          heatmap 返回 Heatmap 实例。

                                                                                        method interval

                                                                                        interval: (cfg?: Partial<IntervalCfg>) => Interval;
                                                                                        • 创建 Interval 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Interval 构造函数的配置。

                                                                                          Returns

                                                                                          interval 返回 Interval 实例。

                                                                                        method line

                                                                                        line: (cfg?: Partial<PathCfg>) => Line;
                                                                                        • 创建 Line 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Line 构造函数的配置。

                                                                                          Returns

                                                                                          line 返回 Line 实例。

                                                                                        method path

                                                                                        path: (cfg?: Partial<PathCfg>) => Path;
                                                                                        • 创建 Path 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Path 构造函数的配置。

                                                                                          Returns

                                                                                          path 返回 Path 实例。

                                                                                        method point

                                                                                        point: (cfg?: Partial<GeometryCfg>) => Point;
                                                                                        • 创建 Point 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Point 构造函数的配置。

                                                                                          Returns

                                                                                          point 返回 Point 实例。

                                                                                        method polygon

                                                                                        polygon: (cfg?: Partial<GeometryCfg>) => Polygon;
                                                                                        • 创建 Polygon 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Polygon 构造函数的配置。

                                                                                          Returns

                                                                                          polygon 返回 Polygon 实例。

                                                                                        method schema

                                                                                        schema: (cfg?: Partial<GeometryCfg>) => Schema;
                                                                                        • 创建 Schema 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Schema 构造函数的配置。

                                                                                          Returns

                                                                                          schema 返回 Schema 实例。

                                                                                        method violin

                                                                                        violin: (cfg?: Partial<GeometryCfg>) => Violin;
                                                                                        • 创建 Violin 几何标记。

                                                                                          Parameter cfg

                                                                                          传入 Violin 构造函数的配置。

                                                                                          Returns

                                                                                          violin 返回 Violin 实例。

                                                                                        Enums

                                                                                        enum DIRECTION

                                                                                        enum DIRECTION {
                                                                                        TOP = 'top',
                                                                                        TOP_LEFT = 'top-left',
                                                                                        TOP_RIGHT = 'top-right',
                                                                                        RIGHT = 'right',
                                                                                        RIGHT_TOP = 'right-top',
                                                                                        RIGHT_BOTTOM = 'right-bottom',
                                                                                        LEFT = 'left',
                                                                                        LEFT_TOP = 'left-top',
                                                                                        LEFT_BOTTOM = 'left-bottom',
                                                                                        BOTTOM = 'bottom',
                                                                                        BOTTOM_LEFT = 'bottom-left',
                                                                                        BOTTOM_RIGHT = 'bottom-right',
                                                                                        RADIUS = 'radius',
                                                                                        CIRCLE = 'circle',
                                                                                        NONE = 'none',
                                                                                        }
                                                                                        • 组件在画布的布局方位 12 方位

                                                                                        member BOTTOM

                                                                                        BOTTOM = 'bottom'

                                                                                          member BOTTOM_LEFT

                                                                                          BOTTOM_LEFT = 'bottom-left'

                                                                                            member BOTTOM_RIGHT

                                                                                            BOTTOM_RIGHT = 'bottom-right'

                                                                                              member CIRCLE

                                                                                              CIRCLE = 'circle'

                                                                                                member LEFT

                                                                                                LEFT = 'left'

                                                                                                  member LEFT_BOTTOM

                                                                                                  LEFT_BOTTOM = 'left-bottom'

                                                                                                    member LEFT_TOP

                                                                                                    LEFT_TOP = 'left-top'

                                                                                                      member NONE

                                                                                                      NONE = 'none'

                                                                                                        member RADIUS

                                                                                                        RADIUS = 'radius'

                                                                                                          member RIGHT

                                                                                                          RIGHT = 'right'

                                                                                                            member RIGHT_BOTTOM

                                                                                                            RIGHT_BOTTOM = 'right-bottom'

                                                                                                              member RIGHT_TOP

                                                                                                              RIGHT_TOP = 'right-top'

                                                                                                                member TOP

                                                                                                                TOP = 'top'

                                                                                                                  member TOP_LEFT

                                                                                                                  TOP_LEFT = 'top-left'

                                                                                                                    member TOP_RIGHT

                                                                                                                    TOP_RIGHT = 'top-right'

                                                                                                                      enum LAYER

                                                                                                                      enum LAYER {
                                                                                                                      FORE = 'fore',
                                                                                                                      MID = 'mid',
                                                                                                                      BG = 'bg',
                                                                                                                      }
                                                                                                                      • view 中三层 group 分层 key

                                                                                                                      member BG

                                                                                                                      BG = 'bg'
                                                                                                                      • 背景层

                                                                                                                      member FORE

                                                                                                                      FORE = 'fore'
                                                                                                                      • 前景层

                                                                                                                      member MID

                                                                                                                      MID = 'mid'
                                                                                                                      • 中间层

                                                                                                                      enum VIEW_LIFE_CIRCLE

                                                                                                                      enum VIEW_LIFE_CIRCLE {
                                                                                                                      BEFORE_RENDER = 'beforerender',
                                                                                                                      AFTER_RENDER = 'afterrender',
                                                                                                                      BEFORE_PAINT = 'beforepaint',
                                                                                                                      AFTER_PAINT = 'afterpaint',
                                                                                                                      BEFORE_CHANGE_DATA = 'beforechangedata',
                                                                                                                      AFTER_CHANGE_DATA = 'afterchangedata',
                                                                                                                      BEFORE_CLEAR = 'beforeclear',
                                                                                                                      AFTER_CLEAR = 'afterclear',
                                                                                                                      BEFORE_DESTROY = 'beforedestroy',
                                                                                                                      BEFORE_CHANGE_SIZE = 'beforechangesize',
                                                                                                                      AFTER_CHANGE_SIZE = 'afterchangesize',
                                                                                                                      }
                                                                                                                      • View 的生命周期阶段(和 3.x 的生命周期略有不同) 我们需要先确定在那写场景需要用到生命周期,如果只是为了在生命周期插入一下什么组件之类的,那么在现有架构就是不需要的

                                                                                                                      member AFTER_CHANGE_DATA

                                                                                                                      AFTER_CHANGE_DATA = 'afterchangedata'

                                                                                                                        member AFTER_CHANGE_SIZE

                                                                                                                        AFTER_CHANGE_SIZE = 'afterchangesize'

                                                                                                                          member AFTER_CLEAR

                                                                                                                          AFTER_CLEAR = 'afterclear'

                                                                                                                            member AFTER_PAINT

                                                                                                                            AFTER_PAINT = 'afterpaint'

                                                                                                                              member AFTER_RENDER

                                                                                                                              AFTER_RENDER = 'afterrender'

                                                                                                                                member BEFORE_CHANGE_DATA

                                                                                                                                BEFORE_CHANGE_DATA = 'beforechangedata'

                                                                                                                                  member BEFORE_CHANGE_SIZE

                                                                                                                                  BEFORE_CHANGE_SIZE = 'beforechangesize'

                                                                                                                                    member BEFORE_CLEAR

                                                                                                                                    BEFORE_CLEAR = 'beforeclear'

                                                                                                                                      member BEFORE_DESTROY

                                                                                                                                      BEFORE_DESTROY = 'beforedestroy'

                                                                                                                                        member BEFORE_PAINT

                                                                                                                                        BEFORE_PAINT = 'beforepaint'

                                                                                                                                          member BEFORE_RENDER

                                                                                                                                          BEFORE_RENDER = 'beforerender'

                                                                                                                                            Namespaces

                                                                                                                                            namespace Types

                                                                                                                                            module 'lib/interface.d.ts' {}
                                                                                                                                            • 通用对象

                                                                                                                                            interface AdjustOption

                                                                                                                                            interface AdjustOption {}
                                                                                                                                            • 数据调整配置项定义,geometry.adjust({})

                                                                                                                                            property dodgeBy

                                                                                                                                            readonly dodgeBy?: string;
                                                                                                                                            • 该属性只对 'dodge' 类型生效,声明以哪个数据字段为分组依据。

                                                                                                                                            property marginRatio

                                                                                                                                            readonly marginRatio?: number;
                                                                                                                                            • 该属性只对 'dodge' 类型生效,取 0 到 1 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距。

                                                                                                                                              ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ps3pToOg2nwAAAAAAAAAAABkARQnAQ)

                                                                                                                                            property reverseOrder

                                                                                                                                            readonly reverseOrder?: boolean;
                                                                                                                                            • 该属性只对 'stack' 类型生效,用于控制是否对数据进行反序操作。

                                                                                                                                            property type

                                                                                                                                            readonly type: AdjustType;
                                                                                                                                            • 数据调整类型。

                                                                                                                                            interface AnimateCfg

                                                                                                                                            interface AnimateCfg {}
                                                                                                                                            • 用户配置的动画,属性均可选

                                                                                                                                            property animation

                                                                                                                                            readonly animation?: string;
                                                                                                                                            • 动画执行函数

                                                                                                                                            property callback

                                                                                                                                            readonly callback?: () => any;
                                                                                                                                            • 动画执行结束后的回调函数

                                                                                                                                            property delay

                                                                                                                                            readonly delay?: number | AnimateDelayCallback;
                                                                                                                                            • 动画延迟时间

                                                                                                                                            property duration

                                                                                                                                            readonly duration?: number | AnimateDurationCallback;
                                                                                                                                            • 动画执行时间

                                                                                                                                            property easing

                                                                                                                                            readonly easing?: string | AnimateEasingCallback;
                                                                                                                                            • 动画缓动函数

                                                                                                                                            property repeat

                                                                                                                                            readonly repeat?: boolean;
                                                                                                                                            • 动画是否重复

                                                                                                                                            interface AnimateOption

                                                                                                                                            interface AnimateOption {}
                                                                                                                                            • Geometry 动画参数配置。geometry.animate()

                                                                                                                                            property appear

                                                                                                                                            appear?: AnimateCfg | false | null;
                                                                                                                                            • chart 初始化渲染时的入场动画,false/null 表示关闭入场动画。

                                                                                                                                            property enter

                                                                                                                                            enter?: AnimateCfg | false | null;
                                                                                                                                            • chart 发生更新时,新增元素的入场动画,false/null 表示关闭入场动画。

                                                                                                                                            property leave

                                                                                                                                            leave?: AnimateCfg | false | null;
                                                                                                                                            • 销毁动画配置,false/null 表示关闭销毁动画。

                                                                                                                                            property update

                                                                                                                                            update?: AnimateCfg | false | null;
                                                                                                                                            • 更新动画配置,false/null 表示关闭更新动画。

                                                                                                                                            interface AnnotationBaseOption

                                                                                                                                            interface AnnotationBaseOption {}
                                                                                                                                            • Annotation 定义的通用属性,chart.annotation().line({})

                                                                                                                                            property animate

                                                                                                                                            readonly animate?: boolean;
                                                                                                                                            • 是否进行动画

                                                                                                                                            property animateOption

                                                                                                                                            readonly animateOption?: ComponentAnimateOption;
                                                                                                                                            • 动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。

                                                                                                                                            property offsetX

                                                                                                                                            readonly offsetX?: number;
                                                                                                                                            • x 方向的偏移量

                                                                                                                                            property offsetY

                                                                                                                                            readonly offsetY?: number;
                                                                                                                                            • y 方向的偏移量

                                                                                                                                            property top

                                                                                                                                            readonly top?: boolean;
                                                                                                                                            • 指定 annotation 是否绘制在 canvas 最上层,默认为 false, 即绘制在最下层

                                                                                                                                            property type

                                                                                                                                            readonly type?: string;

                                                                                                                                              interface AttributeOption

                                                                                                                                              interface AttributeOption {}
                                                                                                                                              • 图形属性配置项定义,如 geometry.position({})

                                                                                                                                              property callback

                                                                                                                                              callback?: (...args: any[]) => any;
                                                                                                                                              • 回调函数。

                                                                                                                                              property fields

                                                                                                                                              fields?: string[];
                                                                                                                                              • 映射的属性字段。

                                                                                                                                              property values

                                                                                                                                              values?: any[];
                                                                                                                                              • 指定常量映射规则。

                                                                                                                                              interface AxisCfg

                                                                                                                                              interface AxisCfg {}
                                                                                                                                              • 坐标轴配置属性,chart.axis()

                                                                                                                                              property animate

                                                                                                                                              animate?: boolean;
                                                                                                                                              • 动画开关,默认开启。

                                                                                                                                              property animateOption

                                                                                                                                              animateOption?: ComponentAnimateOption;
                                                                                                                                              • 动画参数配置。

                                                                                                                                              property grid

                                                                                                                                              grid?: AxisGridCfg | null;
                                                                                                                                              • 坐标轴网格线的配置项,null 表示不展示。

                                                                                                                                              property label

                                                                                                                                              label?: AxisLabelCfg | null;
                                                                                                                                              • 文本标签的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                {
                                                                                                                                                // 坐标轴文本的样式
                                                                                                                                                style?: ShapeAttrs;
                                                                                                                                                // label 的偏移量
                                                                                                                                                offset?: number;
                                                                                                                                                // 文本旋转角度
                                                                                                                                                rotate?: number;
                                                                                                                                                // 格式化函数
                                                                                                                                                formatter?: (text: string, item: ListItem, index: number) => any;
                                                                                                                                                // 是否自动旋转,默认 false
                                                                                                                                                autoRotate?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
                                                                                                                                                // 是否自动隐藏,默认 true
                                                                                                                                                autoHide?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
                                                                                                                                                // 是否自动省略,默认 false
                                                                                                                                                autoEllipsis?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
                                                                                                                                                }

                                                                                                                                                详见 AxisLabelCfg

                                                                                                                                              property line

                                                                                                                                              line?: AxisLineCfg | null;
                                                                                                                                              • 坐标轴线的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                {
                                                                                                                                                style?: ShapeAttrs; // 坐标轴线的样式配置项
                                                                                                                                                }

                                                                                                                                                详见 AxisLineCfg

                                                                                                                                              property position

                                                                                                                                              position?: 'top' | 'bottom' | 'right' | 'left';
                                                                                                                                              • 适用于直角坐标系,设置坐标轴的位置。

                                                                                                                                              property subTickLine

                                                                                                                                              subTickLine?: AxisSubTickLineCfg | null;
                                                                                                                                              • 坐标轴子刻度线的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                {
                                                                                                                                                style?: ShapeAttrs; // 坐标轴刻度线的样式配置项
                                                                                                                                                count?: number; // 子刻度个数
                                                                                                                                                length?: number; // 子刻度线长度
                                                                                                                                                }

                                                                                                                                                详见 AxisSubTickLineCfg

                                                                                                                                              property tickLine

                                                                                                                                              tickLine?: AxisTickLineCfg | null;
                                                                                                                                              • 坐标轴刻度线线的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                {
                                                                                                                                                style?: ShapeAttrs; // 坐标轴刻度线的样式配置项
                                                                                                                                                alignTick?: boolean; // 是否同 tick 对齐
                                                                                                                                                length?: number; // 长度
                                                                                                                                                }

                                                                                                                                                详见 AxisTickLineCfg

                                                                                                                                              property title

                                                                                                                                              title?: AxisTitleCfg | null;
                                                                                                                                              • 标题的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                {
                                                                                                                                                offset?: number; // 标题距离坐标轴的距离
                                                                                                                                                style?: ShapeAttrs; // 标题文本配置项
                                                                                                                                                autoRotate?: boolean; // 是否自动旋转
                                                                                                                                                }

                                                                                                                                                详见 AxisTitleCfg

                                                                                                                                              property top

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

                                                                                                                                              property verticalFactor

                                                                                                                                              verticalFactor?: number;
                                                                                                                                              • 标记坐标轴 label 的方向,左侧为 1,右侧为 -1。

                                                                                                                                              property verticalLimitLength

                                                                                                                                              verticalLimitLength?: number;
                                                                                                                                              • 配置坐标轴垂直方向的最大限制长度,对文本自适应有很大影响。 1. 可以直接设置像素值,如 100; 2. 也可设置绝对值,如 0.2,如果是 x 轴,则相对于图表的高度,如果是 y 轴,则相对于图表的宽度

                                                                                                                                                在 G2 中,x 轴的文本默认最大高度为图表高度的 1/2,y 轴的文本默认最大长度为图表宽度的 1/3

                                                                                                                                              interface AxisGridCfg

                                                                                                                                              interface AxisGridCfg {}
                                                                                                                                              • 坐标轴网格线的配置属性

                                                                                                                                              property alignTick

                                                                                                                                              alignTick?: boolean;
                                                                                                                                              • 是否同刻度线对齐,如果值为 false,则会显示在两个刻度中间。 ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*YX6fS4GTTvMAAAAAAAAAAABkARQnAQ)

                                                                                                                                              property alternateColor

                                                                                                                                              alternateColor?: string | string[];
                                                                                                                                              • 两个栅格线间的填充色。

                                                                                                                                              property closed

                                                                                                                                              closed?: boolean;
                                                                                                                                              • 对于 circle 是否关闭 grid。

                                                                                                                                              property line

                                                                                                                                              line?: GridLineCfg;
                                                                                                                                              • 线的样式。 属性结构如下:

                                                                                                                                                {
                                                                                                                                                type?: string; // 栅格线的类型,'line' 或者 'circle'
                                                                                                                                                style?: ShapeAttrs; // 栅格线的样式配置项
                                                                                                                                                }

                                                                                                                                                详见 GridLineCfg

                                                                                                                                              interface ChartCfg

                                                                                                                                              interface ChartCfg
                                                                                                                                              extends Omit<
                                                                                                                                              ViewCfg,
                                                                                                                                              | 'parent'
                                                                                                                                              | 'canvas'
                                                                                                                                              | 'foregroundGroup'
                                                                                                                                              | 'middleGroup'
                                                                                                                                              | 'backgroundGroup'
                                                                                                                                              | 'region'
                                                                                                                                              > {}
                                                                                                                                              • Chart 构造方法的入参

                                                                                                                                              property autoFit

                                                                                                                                              readonly autoFit?: boolean;
                                                                                                                                              • 图表是否自适应容器宽高,默认为 false,用户需要手动设置 width 和 height。 当 autoFit: true 时,会自动取图表容器的宽高,如果用户设置了 height,那么会以用户设置的 height 为准。

                                                                                                                                              property container

                                                                                                                                              readonly container: string | HTMLElement;
                                                                                                                                              • 指定 chart 绘制的 DOM,可以传入 DOM id,也可以直接传入 dom 实例。

                                                                                                                                              property defaultInteractions

                                                                                                                                              readonly defaultInteractions?: string[];
                                                                                                                                              • 配置图表默认交互,仅支持字符串形式。

                                                                                                                                              property height

                                                                                                                                              readonly height?: number;
                                                                                                                                              • 图表高度。

                                                                                                                                              property localRefresh

                                                                                                                                              readonly localRefresh?: boolean;
                                                                                                                                              • 是否开启局部刷新,默认开启。

                                                                                                                                              property pixelRatio

                                                                                                                                              readonly pixelRatio?: number;
                                                                                                                                              • 设置设备像素比,默认取浏览器的值 window.devicePixelRatio

                                                                                                                                              property renderer

                                                                                                                                              readonly renderer?: Renderer;
                                                                                                                                              • 指定渲染引擎,默认使用 canvas。

                                                                                                                                              property supportCSSTransform

                                                                                                                                              readonly supportCSSTransform?: boolean;
                                                                                                                                              • 支持 CSS transform,开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。

                                                                                                                                              property width

                                                                                                                                              readonly width?: number;
                                                                                                                                              • 图表宽度。

                                                                                                                                              interface CircleCfg

                                                                                                                                              interface CircleCfg extends FacetCfg<CircleData> {}
                                                                                                                                              • circle 分面类型配置

                                                                                                                                              property title

                                                                                                                                              readonly title?: FacetTitle;
                                                                                                                                              • 分面标题配置。

                                                                                                                                              interface CircleData

                                                                                                                                              interface CircleData extends FacetData {}

                                                                                                                                                interface ComponentAnimateCfg

                                                                                                                                                interface ComponentAnimateCfg {}
                                                                                                                                                • 目前组件动画允许的参数配置

                                                                                                                                                property delay

                                                                                                                                                readonly delay?: number;
                                                                                                                                                • 动画延迟时间

                                                                                                                                                property duration

                                                                                                                                                readonly duration?: number;
                                                                                                                                                • 动画执行时间

                                                                                                                                                property easing

                                                                                                                                                readonly easing?: string;
                                                                                                                                                • 动画缓动函数

                                                                                                                                                interface ComponentAnimateOption

                                                                                                                                                interface ComponentAnimateOption {}
                                                                                                                                                • 组件各个动画类型配置

                                                                                                                                                property appear

                                                                                                                                                appear?: ComponentAnimateCfg;
                                                                                                                                                • 初入场动画配置

                                                                                                                                                property enter

                                                                                                                                                enter?: ComponentAnimateCfg;
                                                                                                                                                • 更新后新入场的动画配置

                                                                                                                                                property leave

                                                                                                                                                leave?: ComponentAnimateCfg;
                                                                                                                                                • 离场动画配置

                                                                                                                                                property update

                                                                                                                                                update?: ComponentAnimateCfg;
                                                                                                                                                • 更新动画配置

                                                                                                                                                interface ComponentOption

                                                                                                                                                interface ComponentOption {}
                                                                                                                                                • 组件及布局的信息

                                                                                                                                                property component

                                                                                                                                                readonly component: GroupComponent | HtmlComponent;

                                                                                                                                                  property direction

                                                                                                                                                  direction: DIRECTION;

                                                                                                                                                    property extra

                                                                                                                                                    readonly extra?: any;

                                                                                                                                                      property id

                                                                                                                                                      readonly id?: string;

                                                                                                                                                        property layer

                                                                                                                                                        readonly layer: LAYER;

                                                                                                                                                          property type

                                                                                                                                                          readonly type: COMPONENT_TYPE;

                                                                                                                                                            interface Condition

                                                                                                                                                            interface Condition {}

                                                                                                                                                              property field

                                                                                                                                                              readonly field: string;

                                                                                                                                                                property value

                                                                                                                                                                readonly value: any;

                                                                                                                                                                  property values

                                                                                                                                                                  readonly values: any[];

                                                                                                                                                                    interface CoordinateCfg

                                                                                                                                                                    interface CoordinateCfg {}
                                                                                                                                                                    • 极坐标系支持的配置属性

                                                                                                                                                                    property endAngle

                                                                                                                                                                    endAngle?: number;
                                                                                                                                                                    • 用于极坐标,配置结束弧度。

                                                                                                                                                                    property innerRadius

                                                                                                                                                                    innerRadius?: number;
                                                                                                                                                                    • 用于极坐标,极坐标内半径,0 -1 范围的数值。

                                                                                                                                                                    property radius

                                                                                                                                                                    radius?: number;
                                                                                                                                                                    • 用于极坐标,配置极坐标半径,0 - 1 范围的数值。

                                                                                                                                                                    property startAngle

                                                                                                                                                                    startAngle?: number;
                                                                                                                                                                    • 用于极坐标,配置起始弧度。

                                                                                                                                                                    interface CoordinateOption

                                                                                                                                                                    interface CoordinateOption {}
                                                                                                                                                                    • 坐标系配置

                                                                                                                                                                    property actions

                                                                                                                                                                    actions?: CoordinateActions[];
                                                                                                                                                                    • 坐标系变换操作: 1. rotate 表示旋转,使用弧度制。 2. scale 表示沿着 x 和 y 方向的缩放比率。 3. reflect 表示沿 x 方向镜像或者沿 y 轴方向映射。 4. transpose 表示 x,y 轴置换。

                                                                                                                                                                    property cfg

                                                                                                                                                                    cfg?: CoordinateCfg;
                                                                                                                                                                    • 坐标系配置项,目前常用于极坐标。

                                                                                                                                                                    property type

                                                                                                                                                                    type?: 'polar' | 'theta' | 'rect' | 'cartesian' | 'helix';
                                                                                                                                                                    • 坐标系类型

                                                                                                                                                                    interface DataMarkerOption

                                                                                                                                                                    interface DataMarkerOption extends PointPositionBaseOption {}
                                                                                                                                                                    • 使用 DataMarker Annotation 组件的配置定义

                                                                                                                                                                    property autoAdjust

                                                                                                                                                                    readonly autoAdjust?: boolean;
                                                                                                                                                                    • 文本超出绘制区域时,是否自动调节文本方向,默认为 true

                                                                                                                                                                    property direction

                                                                                                                                                                    readonly direction?: 'upward' | 'downward';
                                                                                                                                                                    • 朝向,默认为 upward,可选值为 'upward' 或者 'downward'

                                                                                                                                                                    property line

                                                                                                                                                                    readonly line?: null | {
                                                                                                                                                                    style?: ShapeAttrs;
                                                                                                                                                                    length?: number;
                                                                                                                                                                    };
                                                                                                                                                                    • line 设置

                                                                                                                                                                    property point

                                                                                                                                                                    readonly point?: null | {
                                                                                                                                                                    style?: ShapeAttrs;
                                                                                                                                                                    };
                                                                                                                                                                    • point 设置

                                                                                                                                                                    property text

                                                                                                                                                                    readonly text: null | EnhancedTextCfg;
                                                                                                                                                                    • text 设置

                                                                                                                                                                    interface DataRegionOption

                                                                                                                                                                    interface DataRegionOption extends RegionPositionBaseOption {}
                                                                                                                                                                    • 使用 DataRegion Annotation 组件的配置定义

                                                                                                                                                                    property lineLength

                                                                                                                                                                    readonly lineLength?: number;
                                                                                                                                                                    • line长度,default为 0

                                                                                                                                                                    property region

                                                                                                                                                                    readonly region?: null | {
                                                                                                                                                                    style?: ShapeAttrs;
                                                                                                                                                                    };
                                                                                                                                                                    • 标注区间的配置

                                                                                                                                                                    property text

                                                                                                                                                                    readonly text?: null | EnhancedTextCfg;
                                                                                                                                                                    • 文本的配置

                                                                                                                                                                    interface EventCfg

                                                                                                                                                                    interface EventCfg {}
                                                                                                                                                                    • todo: 事件名可穷举,后续需要补充 事件配置项