@antv/g2
- Version 4.2.10
- Published
- 13 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
- getActionClass()
- getAnimation()
- getEngine()
- getFacet()
- getGeometryLabel()
- getGeometryLabelLayout()
- getInteraction()
- getShapeFactory()
- getTheme()
- registerAction()
- registerAnimation()
- registerComponentController()
- registerEngine()
- registerFacet()
- registerGeometry()
- registerGeometryLabel()
- registerGeometryLabelLayout()
- registerInteraction()
- registerShape()
- registerShapeFactory()
- registerTheme()
Classes
Geometry
- adjust()
- adjustOption
- adjustScale()
- animate()
- animateOption
- attributeOption
- attributes
- beforeMappingData
- canvasRegion
- changeVisible()
- clear()
- color()
- columnWidthRatio
- container
- coordinate
- createAttrOption()
- createElement()
- createShapePointsCfg()
- customInfo()
- customOption
- data
- dataArray
- defaultSize
- destroy()
- dodgePadding
- elements
- elementsMap
- generatePoints
- getAdjust()
- getAttribute()
- getAttributeValues()
- getCoordinate()
- getData()
- getDefaultValue()
- getDrawCfg()
- getElementId()
- getElements()
- getElementsBy()
- getFields()
- getGroupAttributes()
- getGroupFields()
- getGroupScales()
- getLabelType()
- getOffscreenGroup()
- getScaleFields()
- getShapeFactory()
- getShapeMarker()
- getShapes()
- getXField()
- getXScale()
- getXYFields()
- getYField()
- getYMinValue()
- getYScale()
- init()
- initAttributes()
- intervalPadding
- isCoordinateChanged
- label()
- labelOption
- labelsContainer
- lastElementsMap
- maxColumnWidth
- minColumnWidth
- multiplePieWidthRatio
- paint()
- position()
- roseWidthRatio
- scaleDefs
- scales
- shape()
- shapeFactory
- shapeType
- size()
- sort()
- sortable
- sortZIndex
- state()
- stateOption
- style()
- styleOption
- theme
- tooltip()
- tooltipOption
- type
- update()
- updateElements()
- useDeferredLabel
- zIndexReversed
View
- adjustCoordinate()
- animate()
- annotation()
- appendPadding
- autoPadding
- axis()
- backgroundGroup
- canvas
- changeData()
- changeVisible()
- clear()
- controllers
- coord()
- coordinate()
- coordinateBBox
- coordinateController
- coordinateInstance
- createScale()
- createView()
- data()
- destroy()
- facet()
- facetInstance
- filter()
- filterData()
- filteredData
- filterFieldData()
- foregroundGroup
- geometries
- getCanvas()
- getComponents()
- getController()
- getCoordinate()
- getData()
- getElements()
- getElementsBy()
- getGeometries()
- getGroupScales()
- getLayer()
- getLegendAttributes()
- getOptions()
- getOriginalData()
- getPadding()
- getRootView()
- getScale()
- getScaleByField()
- getScalesByDim()
- getSnapRecords()
- getTheme()
- getTooltipItems()
- getXScale()
- getXY()
- getYScales()
- guide()
- hideTooltip()
- id
- init()
- interaction()
- interactions
- isPointInPlot()
- isTooltipLocked()
- layoutFunc
- legend()
- limitInPlot
- lockTooltip()
- middleGroup
- option()
- options
- padding
- paint()
- parent
- region
- removeInteraction()
- removeView()
- render()
- renderLayoutRecursive()
- renderPaddingRecursive()
- renderPaintRecursive()
- scale()
- setLayout()
- showTooltip()
- source()
- theme()
- themeObject
- tooltip()
- unlockTooltip()
- updateOptions()
- view()
- viewBBox
- views
Interfaces
Enums
Namespaces
Types
- ActionCallback
- AdjustOption
- AdjustType
- AllLegendsOptions
- AnimateCfg
- AnimateDelayCallback
- AnimateDurationCallback
- AnimateEasingCallback
- AnimateOption
- AnnotationBaseOption
- AnnotationPosition
- AnnotationPositionCallback
- ArcOption
- AriaOption
- AttributeOption
- AttributeType
- AxisCfg
- AxisGridCfg
- AxisOption
- ChartCfg
- CircleCfg
- CircleData
- ColorAttrCallback
- ComponentAnimateCfg
- ComponentAnimateOption
- ComponentOption
- Condition
- CoordinateActions
- CoordinateCfg
- CoordinateOption
- CoordinateReflect
- CoordinateRotate
- CoordinateScale
- CoordinateTranspose
- CustomOption
- Data
- DataMarkerOption
- DataRegionOption
- Datum
- EventCallback
- EventCfg
- EventPayload
- FacetCfg
- FacetCfgMap
- FacetCtor
- FacetData
- FacetDataFilter
- FacetTitle
- FilterCondition
- G2LegendTitleCfg
- GAnimateCfg
- GeometryLabelCfg
- GeometryLabelContentCallback
- GeometryLabelLayoutCfg
- GeometryOption
- GeometryTooltipOption
- HtmlAnnotationOption
- IAction
- IInteractionContext
- ImageOption
- InteractionOption
- IntervalGeometryLabelPosition
- LabelCallback
- LabelOption
- LegendCfg
- LegendItem
- LegendOption
- Line
- LineOption
- ListCfg
- ListData
- LooseObject
- MappingDatum
- Marker
- MarkerCallback
- MarkerCfg
- MatrixCfg
- MatrixData
- MirrorCfg
- MirrorData
- Options
- Padding
- Point
- PointPositionBaseOption
- Position
- RangePoint
- RectCfg
- RectData
- Region
- RegionFilterOption
- RegionOption
- RegionPositionBaseOption
- RegisterShape
- RegisterShapeFactory
- Renderer
- ScaleOption
- ScaleType
- ScrollbarCfg
- ScrollbarOption
- Shape
- ShapeAnnotationOption
- ShapeAttrCallback
- ShapeFactory
- ShapeInfo
- ShapeMarkerAttrs
- ShapeMarkerCfg
- ShapeMarkerSymbol
- ShapePoint
- ShapeVertices
- Size
- SizeAttrCallback
- SliderCfg
- SliderOption
- StateCfg
- StateOption
- StateStyleCallback
- StyleCallback
- StyleOption
- StyleSheet
- StyleSheetCfg
- SyncViewPaddingFn
- TextOption
- TooltipCallback
- TooltipCfg
- TooltipCrosshairs
- TooltipCrosshairsText
- TooltipCrosshairsTextCallback
- TooltipDomStyles
- TooltipItem
- TooltipOption
- TooltipTitle
- TreeCfg
- TreeData
- ViewAppendPadding
- ViewCfg
- ViewOption
- ViewPadding
- ViolinShapePoint
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; getMappingValue: typeof getMappingValue; getPath: typeof getPath; getPathPoints: typeof getPathPoints;};
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 aria
aria: (ariaOption: AriaOption) => void;
设置 WAI-ARIA 无障碍标签。如何根据图形语法自动生成 arial 内容?
Parameter ariaOption
method changeSize
changeSize: (width: number, height: number) => this;
改变图表大小,同时重新渲染。
Parameter width
图表宽度
Parameter height
图表高度
Returns
method changeVisible
changeVisible: (visible: boolean) => this;
显示或隐藏图表
Parameter visible
是否可见,true 表示显示,false 表示隐藏
Returns
method clear
clear: () => void;
清空图表,同时清除掉 aria 配置
method destroy
destroy: () => void;
销毁图表,同时解绑事件,销毁创建的 G.Canvas 实例。
Returns
void
method forceFit
forceFit: () => void;
自动根据容器大小 resize 画布
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: IGroup;
shape 容器
property elementIndex
elementIndex: number;
element 索引
property geometry
geometry: Geometry<ShapePoint>;
element 对应的 Geometry 实例
property labelShape
labelShape: IGroup[];
保存 shape 对应的 label
property shape
shape: any;
最后创建的图形对象
property shapeFactory
shapeFactory: ShapeFactory;
用于创建各种 shape 的工厂对象
method changeVisible
changeVisible: (visible: boolean) => void;
显示或者隐藏 element。
Parameter visible
是否可见。
method clearStates
clearStates: () => void;
清空状量态,恢复至初始状态。
method destroy
destroy: () => void;
销毁 element 实例。
method draw
draw: (model: ShapeInfo, isUpdate?: boolean) => void;
绘制图形。
Parameter model
绘制数据。
Parameter isUpdate
可选,是否是更新发生后的绘制。
method getBBox
getBBox: () => BBox;
返回 Element 元素整体的 bbox,包含文本及文本连线(有的话)。
Returns
整体包围盒。
method getData
getData: () => Datum;
获取 Element 对应的原始数据。
Returns
原始数据。
method getModel
getModel: () => ShapeInfo;
获取 Element 对应的图形绘制数据。
Returns
图形绘制数据。
method getStates
getStates: () => string[];
获取当前 Element 上所有的状态。
Returns
当前 Element 上所有的状态数组。
method hasState
hasState: (stateName: string) => boolean;
查询当前 Element 上是否已设置
stateName
对应的状态。Parameter stateName
状态名称。
Returns
true 表示存在,false 表示不存在。
method setState
setState: (stateName: string, stateStatus: boolean) => void;
设置 Element 的状态。
目前 Element 开放三种状态: 1. active 2. selected 3. inactive
这三种状态相互独立,可以进行叠加。
这三种状态的样式可在 [[Theme]] 主题中或者通过
geometry.state()
接口进行配置。// 激活 active 状态setState('active', true);Parameter stateName
状态名
Parameter stateStatus
是否开启状态
method update
update: (model: ShapeInfo) => void;
更新图形。
Parameter model
更新的绘制数据。
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: GEvent, data?: Datum);
property clientX
readonly clientX: number;
x 窗口坐标
property clientY
readonly clientY: number;
y 窗口坐标
property data
data?: Datum;
原始数据
property event
readonly event: any;
获取对应的 dom 原生时间
property gEvent
gEvent: GEvent;
被包装的原生 G 事件
property target
readonly target: IShape;
the real trigger shape of the event
property type
type: string;
事件类型
property view
view: View;
当前 target 归属的 view 实例
property x
readonly x: number;
x 画布坐标
property y
readonly y: number;
y 画布坐标
method clone
clone: () => Event;
clone a new event with same attributes
Returns
[[Event]]
method fromData
static fromData: (view: View, type: string, data: Datum) => Event;
非交互产生的事件
Parameter view
Parameter type
Parameter data
method toString
toString: () => string;
event string
Returns
string
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: IGroup;
分面容器
property destroyed
destroyed: boolean;
是否销毁
property facets
protected facets: F[];
分面之后的所有分面数据结构
property view
view: View;
分面所在的 view
method afterEachView
protected abstract afterEachView: (view: View, facet: F) => any;
处理 eachView 之后
Parameter view
Parameter facet
Modifiers
@override
method beforeEachView
protected abstract beforeEachView: (view: View, facet: F) => any;
开始处理 eachView
Parameter view
Parameter facet
Modifiers
@override
method clear
clear: () => void;
清空,clear 之后如果还需要使用,需要重新调用 init 初始化过程 一般在数据有变更的时候调用,重新进行数据的分面逻辑
method destroy
destroy: () => void;
销毁
method facetToView
protected facetToView: (facet: F) => View;
根据 facet 生成 view,可以给上层自定义使用
Parameter facet
method generateFacets
protected abstract generateFacets: (data: Datum[]) => F[];
生成分面数据,包含布局
Parameter data
Modifiers
@override
method getDefaultCfg
protected getDefaultCfg: () => { eachView: any; showTitle: boolean; spacing: number[]; padding: number; fields: any[];};
method getDefaultTitleCfg
protected getDefaultTitleCfg: () => { style: { fontSize: number; fill: string; fontFamily: any };};
默认的 title 样式,因为有的分面是 title,有的分面配置是 columnTitle、rowTitle
method getFacetDataFilter
protected getFacetDataFilter: (conditions: Condition[]) => FacetDataFilter;
获取分面数据
Parameter conditions
method getFieldValues
protected getFieldValues: (data: Datum[], field: string) => string[];
获取这个字段对应的所有值,数组
Parameter data
数据
Parameter field
字段名 字段对应的值
method getRegion
protected getRegion: ( rows: number, cols: number, xIndex: number, yIndex: number) => Region;
获得每个分面的 region,平分区域
Parameter rows
row 总数
Parameter cols
col 总数
Parameter xIndex
x 方向 index
Parameter yIndex
y 方向 index
method getXAxisOption
protected abstract getXAxisOption: ( x: string, axes: any, option: AxisCfg, facet: F) => object;
获取 x 轴的配置
Parameter x
Parameter axes
Parameter option
Parameter facet
method getYAxisOption
protected abstract getYAxisOption: ( y: string, axes: any, option: AxisCfg, facet: F) => object;
获取 y 轴的配置
Parameter y
Parameter axes
Parameter option
Parameter facet
method init
init: () => void;
初始化过程
method processAxis
protected processAxis: (view: View, facet: F) => void;
处理 axis 的默认配置
Parameter view
Parameter facet
method render
render: () => void;
渲染分面,由上层 view 调用。包括: - 分面 view - 轴 - title
子类可以复写,添加一些其他组件,比如滚动条等
method update
update: () => void;
更新 facet
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, Attribute>;
Attribute map
property beforeMappingData
protected beforeMappingData: Data[];
存储发生图形属性映射前的数据
property canvasRegion
canvasRegion: BBox;
画布区域,用于 label 布局。
property columnWidthRatio
protected columnWidthRatio: number;
一般柱状图宽度占比
property container
readonly container: IGroup;
图形绘制容器。
property coordinate
coordinate: Coordinate;
Coordinate 坐标系实例。
property customOption
protected customOption: any;
custom 自定义的配置项
property data
data: Data;
用户绘制数据。
property dataArray
dataArray: MappingDatum[][];
存储处理后的数据, + init() 及 updateData() 逻辑后, 结构为 Data[]; + paint() 逻辑后,结构为 MappingDatum[][]。
property defaultSize
protected defaultSize: number;
存储每个 shape 的默认 size,用于 Interval、Schema 几何标记
property dodgePadding
protected dodgePadding: number;
组内间距
property elements
elements: Element[];
Element map
property elementsMap
elementsMap: Record<string, Element>;
使用 key-value 结构存储 Element,key 为每个 Element 实例对应的唯一 ID
property generatePoints
protected generatePoints: boolean;
是否生成多个点来绘制图形。
property intervalPadding
protected intervalPadding: number;
组间距
property isCoordinateChanged
protected isCoordinateChanged: boolean;
property labelOption
labelOption: false | LabelOption;
存储 label 配置信息。
property labelsContainer
readonly labelsContainer: IGroup;
label 绘制容器。
property lastElementsMap
protected lastElementsMap: Record<string, Element>;
存储上一次渲染时的 element 映射表,用于更新逻辑
property maxColumnWidth
protected maxColumnWidth: number;
柱状图最大宽度
property minColumnWidth
protected minColumnWidth: number;
柱状图最小宽度
property multiplePieWidthRatio
protected multiplePieWidthRatio: number;
多层饼图/环图占比
property roseWidthRatio
protected roseWidthRatio: number;
玫瑰图占比
property scaleDefs
scaleDefs: Record<string, ScaleOption>;
scale 定义,需要外部传入。
property scales
scales: Record<string, Scale>;
存储 geometry 需要的 scales,需要外部传入。
property shapeFactory
protected shapeFactory: ShapeFactory;
每个 Geometry 对应的 Shape 工厂实例,用于创建各个 Shape
property shapeType
readonly shapeType: string;
ShapeFactory 对应的类型。
property sortable
sortable: boolean;
是否对数据进行排序,默认为 false。
property sortZIndex
sortZIndex?: boolean;
是否需要对 zIndex 进行 sort。因为耗时长,由具体场景自行决定
property stateOption
stateOption: StateOption;
状态量相关的配置项
property styleOption
protected styleOption: StyleOption;
style 配置项
property theme
theme: LooseObject;
当前 Geometry 实例主题。
property tooltipOption
tooltipOption: boolean | GeometryTooltipOption;
存储 tooltip 配置信息。
property type
readonly type: string;
Geometry 几何标记类型。
property useDeferredLabel
protected useDeferredLabel?: number;
property zIndexReversed
zIndexReversed?: boolean;
elements 的 zIndex 默认按顺序提升,通过 zIndexReversed 可以反序,从而数据越前,层级越高
method adjust
adjust: ( adjustCfg: string | string[] | AdjustOption | AdjustOption[]) => Geometry;
设置数据调整方式。G2 目前内置了四种类型: 1. dodge 2. stack 3. symmetric 4. jitter
**Tip** + 对于 'dodge' 类型,可以额外进行如下属性的配置:
geometry.adjust('dodge', {marginRatio: 0, // 取 0 到 1 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距dodgeBy: 'x', // 该属性只对 'dodge' 类型生效,声明以哪个数据字段为分组依据});+ 对于 'stack' 类型,可以额外进行如下属性的配置:
geometry.adjust('stack', {reverseOrder: false, // 用于控制是否对数据进行反序操作});Parameter adjustCfg
数据调整配置
Returns
Example 1
geometry.adjust('stack');geometry.adjust({type: 'stack',reverseOrder: false,});// 组合使用 adjustgeometry.adjust([ 'stack', 'dodge' ]);geometry.adjust([{ type: 'stack' },{ type: 'dodge', dodgeBy: 'x' },]);
method adjustScale
protected adjustScale: () => void;
调整度量范围。主要针对发生层叠以及一些特殊需求的 Geometry,比如 Interval 下的柱状图 Y 轴默认从 0 开始。
method animate
animate: (cfg: AnimateOption | boolean) => Geometry;
Geometry 动画配置。
+
animate(false)
关闭动画 +animate(true)
开启动画,默认开启。我们将动画分为四个场景: 1. appear: 图表第一次加载时的入场动画; 2. enter: 图表绘制完成,发生更新后,产生的新图形的进场动画; 3. update: 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画; 4. leave: 图表绘制完成,数据发生变更后,被销毁图形的销毁动画。
Parameter cfg
动画配置
Returns
Example 1
animate({enter: {duration: 1000, // enter 动画执行时间},leave: false, // 关闭 leave 销毁动画});
method changeVisible
changeVisible: (visible: boolean) => void;
显示或者隐藏 geometry。
Parameter visible
method clear
clear: () => void;
清空当前 Geometry,配置项仍保留,但是内部创建的对象全部清空。
Modifiers
@override
method color
color: { (field: AttributeOption): Geometry; ( field: string, cfg?: string | string[] | ColorAttrCallback ): Geometry<ShapePoint>;};
配置 color 通道映射规则。
Parameter field
映射规则
Returns
Example 1
// data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]geometry.color({fields: [ 'x' ],values: [ '#1890ff', '#5AD8A6' ],});Parameter field
参与颜色映射的数据字段,多个字段使用 '*' 连接符进行连接。
Parameter cfg
Optional, color 映射规则。
Returns
Example 1
// data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]// 使用 '#1890ff' 颜色渲染图形geometry.color('#1890ff');// 根据 x 字段的数据值进行颜色的映射,这时候 G2 会在内部调用默认的回调函数,读取默认提供的颜色进行数据值到颜色值的映射。geometry.color('x');// 将 'x' 字段的数据值映射至指定的颜色值 colors(可以是字符串也可以是数组),此时用于通常映射分类数据geometry.color('x', [ '#1890ff', '#5AD8A6' ]);// 使用回调函数进行颜色值的自定义;可以使用多个字段使用、*号连接geometry.color('x', (xVal) => {if (xVal === 'a') {return 'red';}return 'blue';});// 指定颜色的渐变路径,用于映射连续的数据geometry.color('x', '#BAE7FF-#1890FF-#0050B3');
method createAttrOption
protected createAttrOption: ( attrName: string, field: AttributeOption | string | number, cfg?: any) => void;
method createElement
protected createElement: ( mappingDatum: MappingDatum, index: number, isUpdate?: boolean) => Element;
创建 Element 实例。
Parameter mappingDatum
Element 对应的绘制数据
Parameter isUpdate
是否处于更新阶段
Returns
element 返回创建的 Element 实例
method createShapePointsCfg
protected createShapePointsCfg: (obj: Datum) => S;
获取每个 Shape 对应的关键点数据。
Parameter obj
经过分组 -> 数字化 -> adjust 调整后的数据记录
Returns
method customInfo
customInfo: (cfg: any) => this;
用于向 shape 中传入自定义的数据。目前可能仅仅可能用于在自定义 shape 的时候,像自定义 shape 中传入自定义的数据,方便实现自定义 shape 的配置能力。
Parameter cfg
Example 1
chart.interval().customInfo({ yourData: 'hello, g2!' });然后在自定义 shape 的时候,可以拿到这个信息。
registerShape('interval', 'your-shape', {draw(shapeInfo, container) {const { customInfo } = shapeInfo;console.log(customInfo); // will log { yourData: 'hello, g2!' }.}});
method destroy
destroy: () => void;
销毁 Geometry 实例。
method getAdjust
getAdjust: (adjustType: string) => Adjust;
获取对应的 adjust 实例
Parameter adjustType
Returns
method getAttribute
getAttribute: (name: string) => Attribute;
根据名字获取图形属性实例。
method getAttributeValues
getAttributeValues: (attr: Attribute, obj: Datum) => any[];
获取该数据发生图形映射后对应的 Attribute 图形空间数据。
Parameter attr
Attribute 图形属性实例。
Parameter obj
需要进行映射的原始数据。
Returns
method getCoordinate
getCoordinate: () => Coordinate;
获得 coordinate 实例
Returns
method getData
getData: () => Data;
method getDefaultValue
getDefaultValue: (attrName: string) => any;
获取图形属性默认的映射值。
method getDrawCfg
protected getDrawCfg: (mappingDatum: MappingDatum) => ShapeInfo;
获取每条数据对应的图形绘制数据。
Parameter mappingDatum
映射后的数据
Returns
draw cfg
method getElementId
getElementId: (data: MappingDatum | MappingDatum[]) => any;
获取数据对应的唯一 id。
Parameter data
Element 对应的绘制数据
Returns
method getElements
getElements: () => Element[];
获取 Geometry 的所有 Elements。
getElements();
method getElementsBy
getElementsBy: (condition: (element: Element) => boolean) => Element[];
根据一定的规则查找 Geometry 的 Elements。
getElementsBy((element) => {const data = element.getData();return data.a === 'a';});Parameter condition
定义查找规则的回调函数。
Returns
method getFields
getFields: () => any[];
获得所有的字段
method getGroupAttributes
getGroupAttributes: () => Attribute[];
获取决定分组的图形属性实例。
method getGroupFields
getGroupFields: () => string[];
获取当前配置中的所有分组 & 分类的字段。 fields string[]
method getGroupScales
getGroupScales: () => Scale[];
获取决定分组的图形属性对应的 scale 实例。
Returns
method getLabelType
protected getLabelType: () => string;
获取渲染的 label 类型。
method getOffscreenGroup
getOffscreenGroup: () => IGroup;
获取虚拟 Group。
Returns
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 getXField
getXField: () => string;
x 字段
Returns
method getXScale
getXScale: () => Scale;
获取 x 轴对应的 scale 实例。
method getXYFields
getXYFields: () => string[];
获得图形的 x y 字段。
method getYField
getYField: () => string;
y 字段
Returns
method getYMinValue
protected getYMinValue: () => number;
获取 Y 轴上的最小值。
method getYScale
getYScale: () => Scale;
获取 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' }]// 指定常量,将所有数据值映射到固定的 shapegeometry.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' ],});
tooltip({fields: [ 'x', 'y' ],});
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
更新的配置
method updateElements
protected updateElements: ( mappingDataArray: MappingDatum[][], isUpdate?: boolean) => void;
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: (mappingArray: MappingDatum[], isUpdate?: boolean) => Promise<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
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: IGroup;
三层 Group 图形中的背景层。
property canvas
canvas: ICanvas;
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: Coordinate;
生成的坐标系实例,Coordinate
property facetInstance
protected facetInstance: Facet<FacetCfg<FacetData>, FacetData>;
分面类实例
property filteredData
protected filteredData: Data;
过滤之后的数据
property foregroundGroup
foregroundGroup: IGroup;
三层 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: IGroup;
三层 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) => Scale;
创建 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: () => ICanvas;
获取 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: () => Coordinate;
获取当前坐标系实例。
Returns
[[Coordinate]]
method getData
getData: () => Data;
获取 view 的数据(过滤后的数据)。
Returns
处理过滤器之后的数据。
method getElements
getElements: () => Element[];
获取 view 中的所有 geome
method getElementsBy
getElementsBy: (condition: (element: Element) => boolean) => Element[];
根据一定的规则查找 Geometry 的 Elements。
getElementsBy((element) => {const data = element.getData();return data.a === 'a';});Parameter condition
定义查找规则的回调函数。
Returns
method getGeometries
getGeometries: () => Geometry<import('../interface').ShapePoint>[];
获取当前 view 有的 geometries
Returns
method getGroupScales
getGroupScales: () => Scale[];
获取所有的分组字段的 scale 实例。
Returns
获得分组字段的 scale 实例数组。
method getLayer
getLayer: (layer: LAYER) => IGroup;
获得绘制的层级 group。
Parameter layer
层级名称。
Returns
对应层级的 Group。
method getLegendAttributes
getLegendAttributes: () => Attribute[];
获得所有的 legend 对应的 attribute 实例。
Returns
维度字段的 Attribute 数组
method getOptions
getOptions: () => Options;
返回所有配置信息。
Returns
所有的 view API 配置。
method getOriginalData
getOriginalData: () => Data;
获取原始数据
Returns
传入 G2 的原始数据
method getPadding
getPadding: () => Padding;
获取布局后的边距 padding
Returns
method getRootView
getRootView: () => View;
获得根节点 view。
method getScale
getScale: (field: string, key?: string) => Scale;
根据字段名去获取 scale 实例。
Parameter field
数据字段名称
Parameter key
id
method getScaleByField
getScaleByField: (field: string, key?: string) => Scale;
Deprecated
This method will be removed at G2 V4.1. Please use
getScale
.
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: () => Scale;
获得 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, payload?: EventPayload) => void;
生命周期:渲染流程,渲染过程需要处理数据更新的情况。 render 函数仅仅会处理 view 和子 view。
Parameter isUpdate
是否触发更新流程。
Parameter params
render 事件参数
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); // 关闭 tooltipview.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 BRUSH_FILTER_EVENTS
enum BRUSH_FILTER_EVENTS { FILTER = 'brush-filter-processing', RESET = 'brush-filter-reset', BEFORE_FILTER = 'brush-filter:beforefilter', AFTER_FILTER = 'brush-filter:afterfilter', BEFORE_RESET = 'brush-filter:beforereset', AFTER_RESET = 'brush-filter:afterreset',}
range-filter 只用于:brush-filter, brush-x-filter, brush-y-filter
member AFTER_FILTER
AFTER_FILTER = 'brush-filter:afterfilter'
member AFTER_RESET
AFTER_RESET = 'brush-filter:afterreset'
member BEFORE_FILTER
BEFORE_FILTER = 'brush-filter:beforefilter'
member BEFORE_RESET
BEFORE_RESET = 'brush-filter:beforereset'
member FILTER
FILTER = 'brush-filter-processing'
member RESET
RESET = 'brush-filter-reset'
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 ELEMENT_RANGE_HIGHLIGHT_EVENTS
enum ELEMENT_RANGE_HIGHLIGHT_EVENTS { BEFORE_HIGHLIGHT = 'element-range-highlight:beforehighlight', AFTER_HIGHLIGHT = 'element-range-highlight:afterhighlight', BEFORE_CLEAR = 'element-range-highlight:beforeclear', AFTER_CLEAR = 'element-range-highlight:afterclear',}
member AFTER_CLEAR
AFTER_CLEAR = 'element-range-highlight:afterclear'
member AFTER_HIGHLIGHT
AFTER_HIGHLIGHT = 'element-range-highlight:afterhighlight'
member BEFORE_CLEAR
BEFORE_CLEAR = 'element-range-highlight:beforeclear'
member BEFORE_HIGHLIGHT
BEFORE_HIGHLIGHT = 'element-range-highlight:beforehighlight'
enum LAYER
enum LAYER { FORE = 'fore', MID = 'mid', BG = 'bg',}
view 中三层 group 分层 key
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 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距。
See Also

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({})
interface AxisCfg
interface AxisCfg {}
坐标轴配置属性,chart.axis()
property animate
animate?: boolean;
动画 true
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;// 是否自动旋转,默认 falseautoRotate?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;// 是否自动隐藏,默认 trueautoHide?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;// 是否自动省略,默认 falseautoEllipsis?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;}https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L127|AxisLabelCfg
property line
line?: AxisLineCfg | null;
轴线 坐标轴线的配置项,null 表示不展示。 属性结构如下:
{style?: ShapeAttrs; // 坐标轴线的样式配置项}https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L91|AxisLineCfg
property position
position?: 'top' | 'bottom' | 'right' | 'left';
坐标轴的位置 适用于直角坐标系,设置坐标轴的位置。
property subTickLine
subTickLine?: AxisSubTickLineCfg | null;
子刻度线 坐标轴子刻度线的配置项,null 表示不展示。 属性结构如下:
{style?: ShapeAttrs; // 坐标轴刻度线的样式配置项count?: number; // 子刻度个数length?: number; // 子刻度线长度}https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L169|AxisSubTickLineCfg
property tickLine
tickLine?: AxisTickLineCfg | null;
刻度线线 坐标轴刻度线线的配置项,null 表示不展示。 属性结构如下:
{style?: ShapeAttrs; // 坐标轴刻度线的样式配置项alignTick?: boolean; // 是否同 tick 对齐length?: number; // 长度}https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L103|AxisTickLineCfg
property title
title?: AxisTitleCfg | null;
标题 标题的配置项,null 表示不展示。 属性结构如下:
{offset?: number; // 标题距离坐标轴的距离style?: ShapeAttrs; // 标题文本配置项autoRotate?: boolean; // 是否自动旋转}https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L191|AxisTitleCfg
property top
top?: boolean;
是否渲染在画布顶层 防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡
property verticalFactor
verticalFactor?: number;
坐标轴 label 的方向 标记坐标轴 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,则会显示在两个刻度中间。
See Also

property alternateColor
alternateColor?: string | string[];
两个栅格线间的填充色。
property closed
closed?: boolean;
是否关闭 对于 circle 是否关闭 grid。
property line
line?: GridLineCfg;
线的样式 属性结构如下:
{type?: string; // 栅格线的类型,'line' 或者 'circle'style?: ShapeAttrs; // 栅格线的样式配置项}https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L407|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 为准。 false
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;
是否开启局部刷新 true
property pixelRatio
readonly pixelRatio?: number;
像素比 设置设备像素比,默认取浏览器的值
window.devicePixelRatio
。
property renderer
readonly renderer?: Renderer;
渲染引擎 "canvas"
property supportCSSTransform
readonly supportCSSTransform?: boolean;
是否支持 CSS transform 开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。 false
property width
readonly width?: number;
图表宽度。
interface CircleCfg
interface CircleCfg extends FacetCfg<CircleData> {}
circle 分面类型配置
property title
readonly title?: FacetTitle;
分面标题配置。
interface ComponentAnimateCfg
interface ComponentAnimateCfg {}
目前组件动画允许的参数配置
interface ComponentAnimateOption
interface ComponentAnimateOption {}
组件各个动画类型配置
interface ComponentOption
interface ComponentOption {}
组件及布局的信息