antv g2字体阴影_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

指定多个维度，每个维度作为树的一级，展开多层图表