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],//指定视图的留白 })

注：

为了让用户更好更快的指定视图的绘制区域，start和end只接受0到1范围的数据View的绘制起始点是画布左上角view并不负责最后的画布绘制，统一由chart对象进行渲染，即chart.render() view.data(data)//为View载入数据 view.interval().position('x*y').color('x')//使用图形语法绘制图表 chart.render();//由chart负责统一的渲染

绘制分面

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

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

如何设置分面

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有：

鼠标的ActionChart/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类型解释pointcircle,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,linehollow开头的图形都是空心的lineline,dot,dash,smooth,hv,vh,hvh,vhvhv,vh,hvh,vhv用于绘制阶梯线图areaarea,smooth,line,smooth-linearea和smooth-line是填充内容的区域图，其他图表是空心的线图intervalrect,hollow-rect,line,tick,funnel,pyramidhollow-rect是空心的矩形，line和tick都是线段，funnel用于绘制漏斗图；pyramid用于绘制金字塔图polygonpolygonschemabox,candleedgeline,vhv,smooth,arcvhv:直角折线，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学习手册-中