antv-g2学习手册-下

最新推荐文章于 2025-10-08 11:59:37 发布

原创

最新推荐文章于 2025-10-08 11:59:37 发布 · 3.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文深入探讨G2图表库的功能，包括视图与图表的创建、分面设置、交互配置、基础图表绘制及几何标记使用。同时介绍了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){
   
   },
})