G2 包含了 8 种不同的坐标系,目前所有的坐标系均是 2 维的。
G2 默认提供的坐标系类型为笛卡尔坐标系,当不满足用户需求时,可以通过调用下面的语法声明需要使用的坐标系:
坐标系可以分为笛卡尔坐标系和非笛卡尔坐标系,非笛卡尔坐标系有以下两种:
- 极坐标(helix 螺旋坐标系也是极坐标的一种),由角度和半径这两个维度来确定位置。
- 地图投影,由经度和纬度组成。利用极坐标可生成饼图、玫瑰图和雷达图等,常被用于环形数据,比如时间和方向数据。
坐标系类型的变换会改变几何标记的形状:在极坐标系中,矩形将变为圆环的一部分,而地图中两点间的最短路径也将不是直线。
例如下图展示的层叠柱状图,在不同坐标系下就变换成了其他的图表类型:
上图左侧为层叠柱状图,中间的饼图则是层叠柱状图在极坐标下对 x y 两个坐标轴进行转置后的结果,其中 x 轴被映射为半径,y 轴被映射成了角度。而最右边的牛眼图则相反,y 轴映射为半径。
(1)对于 polar
和 theta
这两种坐标系类型,可以进行如下属性的配置:
chart.coord('polar' || 'theta', {
endAngle: 弧度, // 结束角度
radius: 数值 // 实心圆的半径大小设置
});
效果如图所示:
这里需要说明的是,G2 极坐标默认的起始角度和结束角度如下图所示:
(2) 地理坐标系,需要配合不同的地理投影算法使用。
目前 G2 提供的地理投影坐标系类型如下:
(3) 螺旋坐标系支持的配置参数
chart.coord('helix', {
startAngle: Math.PI, // 螺旋线起点弧度
endAngle: 7 * Math.PI // 螺线线终点弧度
});
G2 提供的坐标系支持一系列的变换操作:
- scale: 放大、缩小,默认按照坐标系中心放大、缩小;
- transpose: x,y 轴交换,例如柱状图转换成水平柱状图(条形图);
- reflect: 镜像, 沿 x 方向镜像或者沿 y 轴方向映射。
以下是 G2 中坐标系变换的使用语法,当需要进行多种坐标系变换时,可以直接进行链式调用,如下代码所示: