Antv/g2 学习文档(三、Chart/View API)

RockAroll
960 阅读6分钟

image.png 版本为 4.x.x

Chart/View API

简介

Chart 继承自 View，所以 View 上的方法 Chart 都可以使用。为了更好的理解Chart和View，下面就是 解析 View 的API 和 Chart 的 API。

View API

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

view.animate()

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

view.animate(status: boolean): View

view.data()

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

view.changeData()

更新数据 ，自动重新渲染，不需要手动调用 render() 方法。

view.changeData(data: Data): void

image.png

Example:

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

view.getData()

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

view.getData(): Data;

view.filter()

设置数据筛选规则。 保存在 view.options.filters对象中 filters: { filed1: condition1, ... }

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 数据进行全部过滤规则过滤，并返回。过滤规则由 view.filter() 进行添加。不会更新现有数据

view.filterData(data: Data): Data;

view.filterFieldData()

对传入数据进行传入的字段对应的过滤规则进行过滤，并返回。不会更新现有数据

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

view.scale()

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

view.getXScale()

获得 x 轴字段的 scale 实例。

拿第一个 Geometry 的 X scale

隐藏逻辑：一个 view 中的 Geometry 必须 x 字段一致

view.getXScale(): Scale;

view.getYScales()

获取 y 轴字段的 scales 实例。

拿到所有的 Geometry 的 Y scale，然后去重。

view.getYScales(): Scale[];

view.getGroupScales()

获取所有的分组字段的 scale 实例。(打平去重)

view.getGroupScales(): Scale[];

view.getXY()

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

view.getXY(data: Datum): Point;

view.getController()

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

view.getController(name: string): Controller;

view.coordinate()

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

view.getCoordinate()

获取当前坐标系实例。

view.getCoordinate(): Coordinate;

view.axis()

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

view.legend()

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

view.tooltip()

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

view.showTooltip()

显示 point 坐标点（画布坐标点）对应的 tooltip。可以用在初始化显示重要数据或者图表tooltip内部数据单测上。

调用 tooltip 实例的 showTooltip 方法

view.showTooltip(point: Point): View;

view.hideTooltip()

隐藏 tooltip。

调用 tooltip 实例的 hideTooltip 方法

view.hideTooltip(): View;

view.lockTooltip()

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

调用 tooltip 实例的 lockTooltip 方法

view.lockTooltip(): View;

view.unlockTooltip()

将 tooltip 锁定解除。

调用 tooltip 实例的 unlockTooltip 方法

view.unlockTooltip(): View;

view.annotation()

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

view.option()

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

除了可以配置 slider 和 scrollbar 外， 也可以配置 filters 等一些 不是 View 原型上的属性

image.png

view.facet()

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

view.interaction()

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

view.interaction(name: string, cfg?: LooseObject): View;

view.removeInteraction()

移除当前 View 的 interaction。

view.removeInteraction(name: string): void;

Example:

view.removeInteraction('my-interaction');

view.on('eventName', callback)

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

事件上的方法 都是继承自 EventEmitter 类，有 on once emit off getEvents 方法。

view.on('click',(e) => {}); // 点击事件添加

view.on('afterrender',(e) => {}); // 生命周期 渲染完成 监听事件添加

view.off('eventName', callback)

删除图表事件。 如果配置了 callback 只删除 eventName 对应方法配置的监听事件。如果没有配置 callback 则删除 eventName 上全部的监听事件

view.emit('eventName', ...args)

手动出发图表事件。 args 会传给事件回调作为参数

view.theme()

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

view.getTheme()

获取当前 view 的主题配置。

view.getTheme(): LooseObject;

View 生命周期 API

view.render()

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

view.render(isUpdate: boolean = false): void;

image.png

view.clear()

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

view.clear(): void;

image.png

view.destroy()

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

会触发 beforedestroy 事件，没有 afterdestroy 是因为所有事件已经被删除了。

view.destroy(): void;

View 管理 API

View.createView()

创建子 view

view.createView(cfg?: Partial): View

Example:

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

View.removeView()

删除一个子 view

view.removeView(view: View): View;

 /**
   * @title View id，可以由外部传入
   */
  readonly id?: string;
  /**
   * @title 当前 view 的父级 view。
   */
  readonly parent: View;
  /**
   * @title canvas 实例。
   */
  readonly canvas: ICanvas;
  /**
   * @title 前景层
   */
  readonly foregroundGroup: IGroup;
  /**
   * @title 中间层
   */
  readonly middleGroup: IGroup;
  /**
   * @title 背景层
   */
  readonly backgroundGroup: IGroup;
  /**
   * @title view 的绘制范围
   */
  readonly region?: Region;
  /**
   * @title 是否对超出坐标系范围的 Geometry 进行剪切
   */
  readonly limitInPlot?: boolean;
  /**
   * @title 内边距
   * @description 设置图表的内边距，使用方式参考 CSS 盒模型，下图黄色区域即为 padding 的范围。
   * @see ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*pYwiQrdXGJ8AAAAAAAAAAABkARQnAQ)
   * @example
   * 1. padding: 20
   * 2. padding: [ 10, 30, 30 ]
   */
  readonly padding?: ViewPadding;
  /**
   * @title 额外边距
   * @description 设置图表的内边距在padding的基础上增加appendPadding的调整。
   * @example
   * 1. padding: 20
   * 2. padding: [ 10, 30, 30 ]
   */
  readonly appendPadding?: ViewAppendPadding;
  /**
   * @title 是否同步子 view 的 padding
   * @description 是否同步子 view 的 padding，可以是 boolean / SyncViewPaddingFn
   * @example
   *  view1 的 padding 10
   *  view2 的 padding 20
   *  那么两个子 view 的 padding 统一变成最大的 20.
   *
   * 如果是 Funcion，则使用自定义的方式去计算子 view 的 padding，这个函数中去修改所有的 views autoPadding 值
   */
  readonly syncViewPadding?: boolean | SyncViewPaddingFn;
  /**
   * @title 主题
   * @description 设置 view 实例主题
   */
  readonly theme?: LooseObject | string;
  /**
   * @title 图表组件、图形映射等相关的配置。
   */
  readonly options?: Options;
  /**
   * @title 是否可见
   */
  readonly visible?: boolean;

Chart API

而 Chart 是继承自 View，用于提供创建 canvas、已经自适应图表大小等能力，便于开发者使用的类。 要想更好的学习 Chart 的用法，得先学习 View 的用法。

chart.changeSize()

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

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

image.png

chart.forceFit()

自动根据容器大小 resize 画布。 无视 autoFit 配置 获取 画布的 width 和 height 进行 changeSize 修改。和autoFit 不同，只是修改 width 和 height ， 之后 外部的 dom 进行了变化， chart 的宽高也不会发生改, 而 autoFit: true ,在 外部 dom 变化后，依然对 width 和 height 进行了变化。

chart.forceFit(): void;

chart.changeVisible()

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

chart.changeVisible(visible: boolean): Chart;

chart.aria()

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

chart.aria(false ｜ AriaOptions): void

Example:

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

总结

Chart 继承自 View ， 简单的图表 使用 Chart 和 其中的一些 API 足以，但是想要更好的了解图表和更多的关于分面以及了解特殊图表 双轴图等，都需要更好的学习 View 的 API 。 从以上很多 API 可以看出，图表的渲染、更新、清空、销毁都有出发生命周期的事件，通常可以在 这些事件后做一些别的处理。

avatar
文章
阅读
粉丝