G2 的 View 是图层容器的概念，每一个 View 拥有自己独立的数据源、坐标系、几何标记、Tooltip 以及图例，可以理解 View 是整个 G2 体系中，用来组装数据，Component，Geometry 的容器。 一个 View 可以包含有多个子 View，通过这种嵌套关系，可以将一个画布按照不同的布局划分多个不同区域（分面），也可以将不同数据源的多个 View 叠加到一起，形成一个多数据源，多图层的图表。

而 Chart 是继承自 View，用于提供创建 canvas、已经自适应图表大小等能力，便于开发者使用的类。

下面会介绍如何创建 Chart 对象，以及 Chart 对象体提供一些 API，包括通用 API、生命周期 API 以及 View 管理 API 等。

创建图表对象

创建 Chart 图表对象。

new Chart(params: ChartCfg) => View;

ChartCfg.container

指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例。

ChartCfg.autoFit

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

ChartCfg.width

图表宽度。

ChartCfg.height

图表高度。

ChartCfg.padding

设置图表的内边距，使用方式参考 CSS 盒模型。

const chart = new G2.Chart({
  container: 'c1',
  width: 1000,
  height: 500,
  padding: [20, 20, 95, 80], // 上，右，下，左
});

ChartCfg.appendPadding

图表的内边距会在图表的 padding 的基础上加上 appendPadding，使用方式参考 CSS 盒模型。

ChartCfg.defaultInteractions

配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'，除了这些，还可以通过 registerAction 自定义交互类型。

默认交互	描述	效果展示
tooltip	鼠标在 chart 上移动时显示提示信息
legend-active	鼠标移动到图例选项时，图例项高亮，对应的图形高亮
legend-filter	分类图例的勾选
continuous-filter	连续图例的过滤
ellipsis-text	当文本过长被省略时，鼠标 hover 到文本时会自动展示 Tooltip，显示出完整的文本名

ChartCfg.limitInPlot

是否对超出坐标系范围的 Geometry 进行剪切。

ChartCfg.pixelRatio

设置设备像素比，默认取浏览器的值 window.devicePixelRatio。

ChartCfg.renderer

指定渲染引擎，默认使用 canvas。

ChartCfg.theme

配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。

registerTheme('customTheme', {
  defaultColor: 'red',
});

const chart = new G2.Chart({
  container: 'container',
  theme: 'customTheme',
});

ChartCfg.visible

chart 是否可见，默认为 true，设置为 false 则会隐藏。

Chart API

chart.forceFit()

自动根据容器大小 resize 画布

forceFit(): void;

chart.changeSize()

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

changeSize(width: number, height: number): Chart;

chart.changeVisible()

显示或隐藏图表。visible 是否可见，true 表示显示，false 表示隐藏

changeVisible(visible: boolean): Chart;

chart.aria()

开启或者关闭无障碍标签，false 表示关闭，否则需要填入无障碍标签配置内容，默认关闭。

aria(false ｜ AriaOptions): void

Example:

chart.aria({ label: '这张图表展示的是不同城市的交易额对比情况。' });

View API

View 上的 api 同样适用于 Chart 上

view.animate()

开启或者关闭动画。status 动画状态，true 表示开始，false 表示关闭

view.animate(status: boolean): View

view.data()

绑定数据。详细介绍见 数据 - Data

view.changeData()

更新数据，自动重新渲染，不需要手动调用 render() 方法。数据更新仅仅影响当前这一层的 view

changeData(data: Data): void;

Example:

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

view.getData()

获取 view 的数据（过滤后的数据）。

getData(): Data;

view.filter()

设置数据筛选规则。

view.filter(field: string, condition: FilterCondition | null): View

Example:

// 删除 'city' 字段对应的筛选规则。
view.filter('city', (value: any, datum: Datum) => value !== '杭州');
// condition 为空，则表示删除过滤条件
view.filter('city', null);

view.filterData()

将 data 数据进行过滤。

filterData(data: Data): Data;

view.filterFieldData()

对某一个字段进行过滤。

filterFieldData(field: string, data: Data): Data;

view.scale()

通过 scale 定义数据的类型和展示方式。详细 API 见 度量 - Scale

view.getXScale()

获得 x 轴字段的 scale 实例。

getXScale(): Scale;

view.getYScales()

获取 y 轴字段的 scales 实例。

getYScales(): Scale[];

view.getGroupScales()

获取所有的分组字段的 scale 实例。

getGroupScales(): Scale[];

view.getXY()

获取该数据在可视化后，对应的画布坐标点。

getXY(data: Datum): Point;

view.getController()

获取 name 对应的 controller 实例。chart 上的 controller 有 axis, legend, tooltip, annotation, coordinate, scrollbar, slider, gesture 等。

getController(name: string): Controller;

view.coordinate()

配置坐标系。详细 API 见 坐标系 - Coordinate

view.getCoordinate()

获取当前坐标系实例。

getCoordinate(): Coordinate;

view.axis()

配置坐标轴组件。详细 API 见 坐标轴 - Axis

view.legend()

配置图例组件。详细 API 见 图例 - Legend

view.tooltip()

配置 Tooltip（提示信息）组件。详细 API 见 提示信息 - Tooltip

view.showTooltip()

显示 point 坐标点（画布坐标点）对应的 tooltip。

showTooltip(point: Point): View;

view.hideTooltip()

隐藏 tooltip。

hideTooltip(): View;

view.lockTooltip()

将 tooltip 锁定到当前位置不能移动。

lockTooltip(): View;

view.unlockTooltip()

将 tooltip 锁定解除。

unlockTooltip(): View;

view.annotation()

在图表上标识额外的标记注。详细 API 见 图表标注 - Annotation

view.option()

配置除 axis, legend, tooltip 外的图表组件，目前支持 slider 和 scrollbar。详细 API 见 缩略轴 - Slider 和 滚动条 - Scrollbar

view.facet()

chart 绘制分面。详细 API 见 分面 - Facet

view.interaction()

配置图表交互。详细 API 见 交互 - Interaction

view.removeInteraction()

移除当前 View 的 interaction。

removeInteraction(name: string): void;

Example:

view.removeInteraction('my-interaction');

view.on('eventName', callback)

监听图表事件。详细 API 见 事件 - Event

view.theme()

主题控制。详细 API 见 主题 - Theme

view.getTheme()

获取当前 view 的主题配置。

getTheme(): LooseObject;

生命周期 API

view.render()

渲染流程，渲染过程需要处理数据更新的情况。isUpdate: 是否触发更新流程。

render(isUpdate: boolean = false): void;

view.clear()

清空图表上所有的绘制内容，但是不销毁图表，chart 仍可使用。

clear(): void;

chart.destroy()

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

destroy(): void;

View 管理 API

chart.createView()

创建子 view

createView(cfg?: Partial<ViewCfg>): View

Example:

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

chart.removeView()

删除一个子 view

removeView(view: View): View;

ViewCfg

创建 view 的参数说明。