antv-g2学习手册-上

G2所构建出的图表是由一系列独立的图形元素组合而成的:

1. 数据Data：可视化最基础的部分
2. 图形属性Attribute：负责将数据中的变量映射到图形空间
3. 几何标记Geometry：即在图表中实际看到的图形元素，如点，线，多边形等，每个几何标记对象含有多个图形属性，G2的核心就是建立数据中的一系列变量到图形属性的映射
4. 度量Scale：数据空间到图形属性空间的转换桥梁，每一个图形属性都对应着一个或者多个度量
5. 坐标系Coordinate：描述了数据是如何映射到图形所在的平面的，同一个几何标记在不同坐标系下会有不同的表现。
6. 可视化组件Component：图标辅助元素，用于增强图标的可读性和可理解性
7. 分面Facet：描述如何将数据分解为各个子集，以及如何对这些子集作图并联合进行展示，主要用于多维数据分析

View视图

View是拥有独立数据源，并且能够绘制多个图形的容器，里面会包含Geometry，组件，交互，事件等，而Chart是继承于View。

数据

G2支持的数据格式如下：

[
	{key:value},
	{key:value},
]

数据重载
当chart实例创建完毕之后，通过chart.data(data)装载数据

数据更新
G2更新数据的方式有两种

1. 图表数据更新（前后数据结构不发生变化），更新后马上刷新图表

	chart.changeData(data)

2. 仅需要更新数据，但不需要马上更新图表

	chart.data(newData);//更新
	chart.render();//更新图表

注：更新数据时还可以清除图表上的所有元素，重新定义图形语法，改变图表类型和各种配置

	chart().line().position(x*y);
	chart.render();
	chart.clear();//清理所有图形
	chart.data(newData);//加载新数据
	chart.interval().position(x*y).color("z");//重新定义图形语法
	chart.render();

图表组成

度量配置

度量(Scale)用于定义数据的类型和展示方式，主要用于:

• 生成坐标轴刻度值
• 显示图例项
• 格式化数据展示文本

度量的定义

chart.scale(defs:object)同时设置多个度量

chart.scale(field:string,cfg:object)定义单个度量

注意：不同的度量类型有不同的配置项

获取度量的方法

• chart.getScalesByDim(‘x’|‘y’)获取x，y轴对应的度量，注意：多轴图时y轴可能有多个度量对应
• chart.getScaleByField(filed) 根据字段名获取度量

注：方法可以在Chart和View上使用，获取到度量后可以使用度量的属性和度量的方法

度量类型

G2按照数值是否连续对数据进行分类：

1. 分类（非连续）数据，又分为有序分类和无序分类
2. 连续数据，时间也是一种连续数据类型
3. 常量度量，数据是一种常量，只有单个值

度量的类型：

• 分类度量：
  • cat:分类度量
  • timeCat:时间分类度量
• 连续度量
  • linear:线性度量
  • time:连续的时间度量
  • log:log度量
  • pow:pow度量
  • quantize:分段度量，用户可以指定不均匀的分段
  • quantile:等分度量，根据数据的分部自动计算分段
• 常量度量
  • identity：常量度量

G2默认不需要进行度量的配置，因为代码内部已经根据数据的形式对度量进行了假设，计算过程如下：

• 查看用户是否制定了对应字段的数据类型（type）
• 如果没有，判断字段的第一条数据的字段类型
  • 如果数据中不存在对应的字段，则为‘identity’
  • 如果是数据则为‘linear’
  • 如果是字符串，判断是否是时间格式，如果是时间格式则为时间类型‘time’
  • 否则是分类类型‘cat’

可以手动更改度量的类型chart.scale('date',{type:'timeCat'})

度量的配置项

度量的通用配置项：

名称	类型	说明
type	string	度量类型
values	any[]	定义域
min	any	定义域的最小值，在分类型度量中为序号
max	any	定义域中的最大值
range	[number,number]	值域的最小，最大值
tickCount	number	期望的tick数量，非最终结果（作用域生成坐标轴的刻度数和图例上的图例项个数）
formatter	func(value,index)	格式化函数，用于tooltip,tick等展示（坐标轴，图例和label的文本都会受到影响）
tickMethod	string/func(scale)	计算ticks的方法
alias	string	显示在坐标轴、图例上的标题

注：tickMethod用来计算ticks的方法，不用的度量类型可能有不同的计算方法

• wilkinson-extended 数字ticks的计算方法，linear类型度量内置的计算方法
• r-pretty 数字ticks的计算方法，ticks的nice效果很好，但是tickCount的精度太差
• time 时间ticks的计算方法，计算出一个tickInterval，坐标刻度之间的间隔固定
• time-pretty 时间ticks的计算方法，会对年，月进行优化，time类型度量内置的计算方法
• log 计算数字的ticks方法，按照log的函数来计算，生成[0,10,100,1000]类似的ticks
• pow 计算数字的ticks方法，按照pow的函数来计算，生成[0,4,9,16]类似的ticks
• quantile：计算数字的ticks方法，根据统计学上的几分位概念计算ticks，表现的是数据的分布

也可以自己实现ticks的方法

所有连续度量都支持的配置项

nice：是否优化显示度量的刻度值，设置该值后会对min,max进行优化显示

度量的方法

• scale(value) 将数据转换成0-1的值
• invert(value) 将0-1转换成原始数据
• getTicks() 获取生成的ticks
• getText(value) 格式化文本

坐标系配置

坐标系，Coordinate，将对象的位置映射到图形平面上，描述了数据是如何映射到图形所在的平面。位置通常由两个坐标x和y决定。

注意：目前G2还不支持三维坐标系

坐标系类型

坐标系笼统分为笛卡尔坐标系和非笛卡尔坐标系两种，非笛卡尔坐标系即极坐标，由角度和半径这两个维度来确定位置

G2中可用的坐标系类型如下:

名字	描述	配置语法
cartesian/rect	笛卡尔坐标系，G2默认坐标系	chart.coordinate(‘rect’)或chart.coordinate(‘cartesian’)
polar	极坐标系	chart.coordinate(‘polar’)
helix	螺旋坐标系，基于阿基米德螺旋线	chart.coordiante(‘helix’)
theta	一种特殊的极坐标系，半径长度固定，仅仅将数据映射到角度，常用于饼图的绘制	chart.coordiante('theta’）或者chart.coordinate(‘polar’).transpose()

坐标系的变换

变换方法	描述	配合语法
rotate	旋转，默认按照坐标系中心旋转	chart.coordinate().rotate(-Math.PI*0.25)
scale	缩放，默认按照坐标系中心缩放	chart.coordinate(‘rect’).scale(0.7,1.2)
transpose	x,y轴置换	chart.coordiante(‘rect’).transpose()
reflect	镜像，沿x轴方向或者沿y轴方向映射	chart.coordiante().reflect(‘x’);chart.coordiante().reflect(‘y’)

坐标轴配置

坐标轴和坐标作为图表的引导元素，可以将图形和原始值进行映射关联。在G2中，坐标轴是自动生成的，内容是由scale度量控制的，而渲染的细节则是由主题控制

坐标轴组成

坐标轴配置

chart.axis()用于坐标轴样式的配置

注意：坐标轴的内容是由scale度量控制的，chart.axis()只用于控制坐标轴的外观配置

title配置

G2的默认主题中，是关闭了title的展示的

//配置title样式
chart.axis('x',{
	title:{
		style:{fill:"#1890ff"}
	}
})

默认情况下，G2会为每条坐标轴生成标题，标题名默认为该轴对应数据字段的属性名。当需要为坐标轴设置别名时，则需要通过chart.scale()接口，为对应的scale度量设置alias别名属性来改变坐标轴标题

label配置

坐标轴文本的内容同样也受scale度量的控制，G2默认会生成所有的label内容，可以通过chart.scale()接口改变对应坐标轴label的显示

chart.scale('scale',{
	ticks:[0,20,40],
	foramtter:(val)=>{}
})

设置坐标轴数值范围

坐标轴的数值范围受数据的约束，同时也可以通过chart.scale()接口进行配置。

chart.scale('sales',{
	min:0,
	max:200
})

设置坐标轴刻度线个数

默认的坐标轴刻度线个数是5个，可以通过chart.scale(name:{tickCount:value})自定义坐标轴刻度线个数

设置坐标轴刻度线间距

对于连续类型的数据，G2支持设置坐标轴刻度线的间距(tickInterval)属性，通过chart.scale(name:{tickInterval:value})进行配置。

注意：tickInterval为原始数据值的差值，并且tickCount和tickInterval不可以同时声明

设置坐标系两端留白

对于分类数据的坐标轴两边默认会留下一定的留白，连续数据的坐标轴的两端则没有留白
两端的留白可以通过chart.scale(name:{range:[]})进行配置，分类数据的range的默认值是[1/(count-1),1-1/(count-1)]，count代表数据的个数，可以修改这个值来改变留白的大小

Tooltip配置

提示消息Tooltip,是指当鼠标悬停在图形上时，以提示框的形式展示该点的值，数据单位等，帮助用户快速获取图形的关键数据

G2提供的Tooltip组件由以下部分组成：

• crosshairs：tooltip辅助线，用于辅助定位数据在坐标系的位置
• marker：突出当前数据点的位置
• tooltip：展示数据信息的内容框

配置项详解

G2提供了三个层级的Tooltip开关配置

1. Chart：控制整个图表的tooltip开关，当chart.tooltip(false)将tooltip关闭时，view及geometry上的tooltip配置均不生效，整个图表tooltip关闭
2. View：控制当前View的tooltip开关，当view.tooltip(false)将tooltip关闭时，当前view tooltip将被关闭，其下所有Geometry几何标记的tooltip配置均不生效
3. Geometry：控制当前的Geometry几何标记的tooltip开关，当geometry.tooltip(false)将tooltip关闭时，该Geometry的数据将不展示在tooltip内容框中

注：Chart/View上的tooltip()接口用于控制tooltip的显示样式配置，Geometry上的tooltip()接口用于tooltip显示内容的配置

内容配置

对于tooltip显示内容的定制，需要使用geometry.tooltip()接口，同时还可以通chart.tooltip({itemTpl:‘xxx’})配合使用

	chart.tooltip({
		showCrosshairs:true,//展示Tooltip辅助线
		shared:true,
		showTitle:false,
		itemTpl:"<li>{year}有{value}个</li>"
	})

Tooltip相关事件

//tooltip显示时触发
chart.on('tooltip:show',(ev)=>{
	const {tooltip,items,title,x,y}=ev;
	//x:当前鼠标的x坐标
	//y:当前鼠标的y坐标
	//tooltip:当前的tooltip对象
	//items:数组对象，当前tooltip显示的每条内容
	//title:tooltip标题
})
//tooltip内容变更时触发
chart.on('tooltip:change',(ev)=>{
	const {tooltip,items,title,x,y}=ev;//变量内容同上
})
//tooltip消失时触发
chart.on('tooltip:hide',(ev)=>{
	const {tooltip} =ev;
	//tooltip:当前的tooltip对象
})

图例配置

图例（legend）是图表的辅助元素，使用颜色，大小，形状区分不同的数据类型，用于图表中数据的筛选。G2会根据设置图形属性映射以及数据的类型自动生成不同的图例，当一个变量对应了多个图形属性，G2会对图例进行合并。

• shape,color,size这三个图形属性如果判断接收的参数是数据源的字段时，会自动生成不同的图例
• shape 属性，会根据不同的shape类型生成图例
• color属性，会赋予不同的图例项不同的颜色来区分
• size属性，在图例上显示图形的大小

图例类型

在G2中，根据数据的类型，提供了两种图例

图例组成

G2中图例分为连续图例和分类图例两种，由于两种图例的结构不同，所以配置项也存在差异


注意：图例同坐标轴一样，其内容也是由scale度量控制的，而渲染的细节，则是由主题控制。G2同样开放了chart.legend()接口供用户进行个性化配置

图例配置

通过chart.legend()接口对图例进行配置

• 隐藏图例

	chart.legend(false);//隐藏全部图例
	chart.legend('x',false);//只隐藏x维度对应的图例

• 更改图例位置
  G2为图例提供了12个显示位置，通过position属性进行配置

	chart.legend('x',{
		position:'bottom'
	};//更改x维度对应的图例的显示位置

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

转载自原文链接, 如需删除请联系管理员。

原文链接：antv-g2学习手册-上，转载请注明来源！