antv-g2学习手册-下

绘制视图View

G2的图表Chart，可以创建多个视图View，每个View各自又可以创建其子View，所以在G2中，View是支持嵌套的。每个View同Chart一样，拥有自己独立的数据源，坐标系，几何标记，Tooltip以及图例。Chart也是一种特殊的View；

如何创建视图

直接通过调用chart.createView()即可创建View对象，此时会默认创建一个绘图区域于Chart相同的视图，然后可以通过region属性指定view的绘图区域。

//创建chart对象
const chart = new G2.chart({
	container:'container',
	autoFit:false,
	width:1000,
	height:500
});
//创建视图
const view = chart.createView({
	region:{
		start:{x:,y:}//指定该视图绘制的其实位置，x y 为[0-1]范围的数据
		end:{x:,y:}//指定该视图绘制的结束位置，x y 为[0-1]范围的数据
	}，
	padding:[20,40],//指定视图的留白
})

注：

1. 为了让用户更好更快的指定视图的绘制区域，start和end只接受0到1范围的数据
2. View的绘制起始点是画布左上角
3. view并不负责最后的画布绘制，统一由chart对象进行渲染，即chart.render()

view.data(data)//为View载入数据
view.interval().position('x*y').color('x')//使用图形语法绘制图表
chart.render();//由chart负责统一的渲染

绘制分面

分面，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中。
分面提供了两个功能：

1. 按照指定的维度划分数据集
2. 对图表进行排版

如何设置分面

chart.facet(type,{
	fileds:['field1','field2'],
	showTitile:true,//显示标题
	padding:10,//每个分面之间的间距
	/*
	*创建每个分面中的视图
	*@param view 视图对象
	*@param facet facet中有行列等信息
	*@return {null}
	*/
	eachView(view,facet){},
})

说明:

• type用于指定分面的类型
• fileds属性用于指定数据集划分依据的字段
• eachView回调函数中创建各个视图的图表类型

分面的类型

分面类型	说明
rect	默认类型，指定2个维度作为行列，形成图表的矩阵
list	指定一个维度，可以指定一行有几列，超出自动换行
circle	指定一个维度，沿着圆分布
tree	指定多个维度，每个维度作为树的一级，展开多层图表
mirror	指定一个维度，形成镜像图表
matrix	指定一个维度，形成矩阵分面

rect矩阵分面

//矩阵分面以cut字段划分列，以clarity字段划分行
//可以将fields中的行或者列设置为null，变成单行或者单列的分面
chart.facet('rect',{
	fields:['cut','clarity'],
	eachView(view){}
})

list水平列表分面

//通过设置cols属性来指定每行可显示分面的个数，超出时会自动换行
chart.facet('list',{
	fields:['cut'],
	cols:3,//超出三个换行
	padding:30,
	eachView(view){}
})

circle图形分面

chart.facet('circle',{
	fields:['clarity'],
	eachView(view,facet){}
})

tree树形分面

树形分面一般用于展示存在层次结构的数据，展示的是整体和部分之间的关系

chart.facet('tree',{
	field:['grade','class'],
	line:{//用于配置线的显示属性
		style:{
			stroke:"#00a3d7"
		},
		smooth:'true'//各个数节点的连接线是否是平滑的曲线，默认为false
	},
	eachView(view,facet){}
})

mirror镜像分面

镜像分面用于对比两类数据的场景，例如男女的比例，正确错误的对比等、
通过配置transpose属性为true，可以将镜像分面翻转

chart.facet('mirror',{
	fields:['gender'],
	transpose:true,
	padding:[0,48,0,0],
	eachView(view){}
})

matrix矩阵分面

矩阵分面用于对比数据中多个字段之间的关系

chart.facet('matrix',{
	fields:['SepalLength','SepalWidth','PetalLength','PetalWidth'],
	eachView(view,facet){}
})

为图表配置交互

内置的交互

• tooltip：鼠标在chart上移动时显示提示信息
• legend-active：鼠标移动到图例选项时，图例项高亮对应的图形高亮
• legend-filter：分类图例的勾选
• continuous-filter：连续图例的过滤

可以通过chart上的配置项defaultInteractions更改内置的交互

new Chart({
	container:'container',
	width:500,
	height:500,
	defaultInteractions:['tooltip'] //仅保留tooltip
})

配置交互

可以通过chart上的两个接口来添加和移除交互

• chart.interaction(name,[cfg]) 添加或者修改交互
• chart.removeInteraction(name) 移除交互

添加或者修改交互时的第二个参数cfg用于修改已经定义好的交互行为；

在交互语法中一个交互可以由多个交互环节组成，每个交互环节可以有多个触发和反馈，所以在配置交互时可以配置每个环节，每个环节都是数组，都有trigger和action;
交互环节有：

• showEnable：标识交互可以发生
• start：交互开始
• processing： 交互持续
• end：交互结束
• rollback：回滚

修改交互的默认交互

修改tooltip的触发，改成点击绘图区域内部时显示tooltip

chart.interaction('tooltip',{
	start:[{trigger:'plot:click',action:'tooltip:show'}]
})

• trigger触发了一个交互环节的事件名，是所有Chart支持的事件
• action触发的反馈，可以是字符串也可以是数组，是所有内置和用户自定义的Action，参考交互反馈Action列表
  • 字符串由‘actionName:method’组成
  • 数组时可以使用相同的action，也可以使用不同的action，例如[‘element-active:clear’,‘element-active:active’,‘mask:clear’]

除了trigger和action之外还有其他几个可选属性

• isEnable(context):是否可以触发
• callback(context):触发后执行完所有action的方法后会调用回调函数
• once:boolean,是否在一个环节内仅能执行一次
• debounce：延迟执行
  • wait:等待时间
  • immediate：是否马上执行
• throttle 增加阀值，控制执行的频率
  • wait：等待时间
  • leading：是否马上执行
  • trailing：执行完毕后再执行一次debounce和throttle的机制

context交互的上下文

交互的上下文提供了一系列进行判定条件的函数，帮助用户在isEnable中方便的判断，以上面tooltip的为例，如果不适用’plot:click’事件而仅使用’click’事件时需要判定是否在绘图区域内判定

chart.interaction('tooltip',{
	start:[{
		trigger:'click',
		isEnable(context) {
			return context.isInPlot();//返回事件触发时是否在view内部
			//context详情 interface.d.ts 1597行
		},
		action:'tooltip:show'
	}]
})

所有的交互列表

G2中所有的交互都是通过registerInteraction方法注册的

G2.reisterInteraction(name,cfg)

交互列表过多，详情参考这里

交互反馈Action的列表

G2提供的Action有：

• 鼠标的Action
• Chart/View上的Action
• 图标元素Element的Action
• 组件的Action
• 数据操作的Action
• 辅助交互图形的Action

详情参考这里

绘制基础图表

Geometry几何标记

G2中并没有特定的图表类型（柱状图，散点图，折线图等）的概念，所有的图表都是通过组合一系列图形语法元素绘制而成的；
G2默认提供了9种几何标记：

geometry类型	描述
point	点，用于绘制各种点图
path	路径，无序的点连接而成的一条线，常用语路径图的绘制
line	线，点按照x轴连接成一条线，构成线图
area	填充线图跟坐标系之间构成区域图，也可以指定上下范围
interval	使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图，饼图等图表
polygon	多边形，可以用来构建色块图，地图等图表类型
edge	两点之间的链接，用于构建树图和关系图中的边、流程图中的连接线
schema	自定义图形，用于构建箱型图（或者称箱须图）、蜡烛图（或者称K线图，股票图）等图表
heatmap	用于热力图的绘制

对于每一种几何标记来说，在绘制时还可以对应不同的形状（shape）
G2中各种geometry内置提供的shape类型

geometry类型	shape类型	解释
point	circle,square,bowtie,diamond,hexagon,triangle,triangle-down,hollow-circle,holllow-square,hollow-bowtie,hoolow-diamond,hollow-hexagon,hollow-triangle,hollow-triangle-down,cross,tick,plus,hyphen,line	hollow开头的图形都是空心的
line	line,dot,dash,smooth,hv,vh,hvh,vhv	hv,vh,hvh,vhv用于绘制阶梯线图
area	area,smooth,line,smooth-line	area和smooth-line是填充内容的区域图，其他图表是空心的线图
interval	rect,hollow-rect,line,tick,funnel,pyramid	hollow-rect是空心的矩形，line和tick都是线段，funnel用于绘制漏斗图；pyramid用于绘制金字塔图
polygon	polygon
schema	box,candle
edge	line,vhv,smooth,arc	vhv:直角折线，arc：弧线分为笛卡尔坐标系，极坐标系，带权重和不带权重四种情况

使用滑块

G2中slider作为数据范围的选择插件，适用于大数据量的图表绘制，帮助用户更好的关注某一范围的数据可视化结果。

使用方法

如果使用G2 core进行自定义按需引入，可以参考：

import Slider from '@antv/g2/lib/chart/controller/slider';
import { registerComponentController, Chart } from '@antv/g2/lib/core';

// 引入 slider 组件
registerComponentController('slider', Slider);
const chart = new Chart({});
chart.option('slider', {end: 0.8});

如果是全量引入，那么slider作为G2内置组件，可以直接使用

import { Chart } from '@antv/g2';
const chart = new Chart({});
chart.option('slider', {end: 0.8});
chart.render();

配置项

Slider全量配置项请参考 文件：@antv/g2/lib/chart/controller/slider.d.ts

渲染引擎 Canvas or SVG

HTML5提供了Canvas和SVG两种绘图技术，其中Canvas是基于脚本，通过JavaScript指令来动态绘图，而SVG则是使用XML文档来描述矢量图。
G2默认使用Canvas提供图表的渲染，同时提供SVG以供用户进行选择，用户只需要在创建chart实例时，声明renderer属性即可；

const chart = new Chart({
	container:'container',
	width:500,
	height:400,
	renderer:'svg'
});

Canvas和SVG比较

使用场景

Canvas提供的绘图能力更底层，适合做到像素级的图形处理，能动态渲染和绘制大数据量的图形。

SVG抽象层次更高，声明描述式的接口功能更丰富，内置了大量的图形、滤镜和动画等，方便进行文档元素的维护，也能导出为文件脱离浏览器环境使用。

性能对比

从底层来看，Canvas的性能受画布尺寸影响更大，SVG的性能受图形元素个数影响更大。
在小数据量的情况下，SVG的方案通常内存占用会更小，做缩放、平移等操作的时候玩玩帧率也更高

使用方法

全量引入的情况下：

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 400,
  height: 300,
  renderer: 'svg',
});

按需引入的情况下：

// 注册 G engine
import * as CanvasEngine from '@antv/g-canvas';
import * as SVGEngine from '@antv/g-svg';
import { registerEngine } from '@antv/g2/lib/core';

registerEngine('canvas', CanvasEngine); // 注册 Canvas 渲染引擎
registerEngine('svg', SVGEngine); // 注册 SVG 渲染引擎

antv-g2学习手册-上
antv-g2学习手册-中