图表 - Chart

阅读时间约 4 分钟

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

string | HTMLElement required

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

ChartCfg.autoFit

boolean optional default: false

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

ChartCfg.width

number optional

图表宽度。

ChartCfg.height

number optional

图表高度。

ChartCfg.padding

'auto' | number | number[] optional default: 'auto'

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

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

ChartCfg.appendPadding

'auto' | number | number[] optional

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

ChartCfg.defaultInteractions

string[] optional default: ['tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text']

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

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

ChartCfg.limitInPlot

boolean optional

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

ChartCfg.pixelRatio

number optional default: window.devicePixelRatio

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

ChartCfg.renderer

'canvas' | 'svg' optional default: 'canvas'

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

ChartCfg.theme

ThemObject | string optional

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

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

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

ChartCfg.visible

boolean optional default: true

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;

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 外的图表组件,目前支持 sliderscrollbar。详细 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 的参数说明。

参数名类型描述
idstringView id,可以由外部传入
visibleboolean是否可见。
regionRegionview 的绘制范围
paddingnumber|number[]设置图表的内边距,使用方式参考 CSS 盒模型
appendPaddingnumber|number[]设置图表的内边距在 padding 的基础上增加 appendPading 的调整
syncViewPaddingboolean | SyncViewPaddingFn是否同步子 view 的 padding。 比如: view1 的 padding 10, view2 的 padding 20, 那么两个子 view 的 padding 统一变成最大的 20。如果是 Funcion,则使用自定义的方式去计算子 view 的 padding,这个函数中去修改所有的 views autoPadding 值
limitInPlotboolean是否对超出坐标系范围的 Geometry 进行剪切
themestring|object设置 view 实例主题