Coordinate 坐标系

5 min read

坐标系介绍

坐标系是将两种位置标度结合在一起组成的 2 维定位系统,描述了数据是如何映射到图形所在的平面。

G2 包含了两种类型坐标系(polar、theta、helix 均属于极坐标),目前所有的坐标系均是 2 维的。

如何设置坐标系

G2 默认提供的坐标系类型为笛卡尔坐标系,当不满足用户需求时,可以通过调用下面的语法声明需要使用的坐标系:

chart.coord('coordType'[, cfg]);
coordType说明
rect直角坐标系,目前仅支持二维,由 x, y 两个互相垂直的坐标轴构成。
polar极坐标系,由角度和半径 2 个维度构成。
theta一种特殊的极坐标系,半径长度固定,仅仅将数据映射到角度,常用于饼图的绘制。
helix螺旋坐标系,基于阿基米德螺旋线。

坐标系类型及配置

坐标系可以分为笛卡尔坐标系和非笛卡尔坐标系,非笛卡尔坐标系即极坐标(helix 螺旋坐标系也是极坐标的一种),由角度和半径这两个维度来确定位置。

利用极坐标可生成饼图、玫瑰图和雷达图等,常被用于周期性数据,比如时间和方向数据。

坐标系类型的变换会改变几何标记的形状:在极坐标系中,矩形将变为圆环的一部分,而地图中两点间的最短路径也将不是直线。

例如下图展示的层叠柱状图,在不同坐标系下就变换成了其他的图表类型:

image | left

上图左侧为层叠柱状图,中间的饼图则是层叠柱状图在极坐标下对 x y 两个坐标轴进行转置后的结果,其中 x 轴被映射为半径,y 轴被映射成了角度。而最右边的牛眼图则相反,y 轴映射为半径。

坐标系配置

极坐标均支持 startAngleendAngle 这两个属性配置。

(1)对于 polartheta 这两种坐标系类型,可以进行如下属性的配置:

chart.coord('polar' || 'theta' || 'helix', {
  startAngle: 弧度, // 起始弧度
  endAngle: 弧度, // 结束弧度
  innerRadius: 01 范围的数值, // 用于空心部分的半径设置
  radius: 01 范围的数值 // 实心圆的半径大小设置
});

效果如图所示:

chart.coord('theta', { innerRadius: 0.5 });

image | left

chart.coord('polar', {
  radius: 0.5,
  startAngle: -Math.PI / 6,
  endAngle: 7 * Math.PI /6
});

image | left

chart.coord('helix', {
  startAngle: 0.5 * Math.PI,
  endAngle: 12.5 * Math.PI,
  radius: 0.8
});

image | left

这里需要说明的是,G2 极坐标默认的起始角度和结束角度如下图所示:

image | left

坐标系变换

G2 提供的坐标系支持一系列的变换操作:

  • rotate: 旋转,默认按照坐标系中心旋转;
  • scale: 放大、缩小,默认按照坐标系中心放大、缩小;
chart.coord('rect').scale(0.7, 1.2);

image | left

  • transpose: x,y 轴交换,例如柱状图转换成水平柱状图(条形图);

image | left

  • reflect: 镜像,沿 x 方向镜像或者沿 y 轴方向映射。

image | left

以下是 G2 中坐标系变换的使用语法,当需要进行多种坐标系变换时,可以直接进行链式调用,如下代码所示:

chart.coord().rotate(90).scale(1.3, 5).reflect('x').transpose();

相关实例