坐标系配置

坐标系,Coordinate,可将对象的位置映射到图形平面上,描述了数据是如何映射到图形所在的平面。位置通常由两个坐标 x 和 y 决定,目前 G2 还不支持三维坐标系。最常见的坐标系为笛卡尔坐标系,此外还有极坐标系和各种地图投影等。

坐标系类型

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

坐标系类型的变换会改变几何标记的形状:比如在极坐标系中,矩形将变为圆环的一部分,而地图中两点间的最短路径也将不是直线。所以我们使用极坐标来生成饼图、玫瑰图和雷达图等,常用于表达周期性数据。

下图展示的层叠柱状图,在不同坐标系下的形状变化:

image.png

(1)为层叠柱状图绘制在笛卡尔坐标系下;(2)为层叠柱状图绘制在极坐标系下,我们称之为牛眼图,此时 y 轴映射为半径;(3)展示的饼图则是层叠柱状图在极坐标下对 x y 两个坐标轴进行转置后的结果,其中 x 轴被映射为半径,y 轴被映射成了角度。

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

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

坐标系变换

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

变换方法描述配置语法
rotate旋转,默认按照坐标系中心旋转。image.pngchart.coordinate().rotate(-Math.PI * 0.25);
scale缩放,默认按照坐标系中心进行缩放坐标系配置 - 图3chart.coordinate('rect').scale(0.7, 1.2);
transposex,y 轴置换,例如柱状图转换成水平柱状图(条形图)坐标系配置 - 图4chart.coordinate('rect').transpose();
reflect镜像,沿 x 方向镜像或者沿 y 轴方向映射:坐标系配置 - 图5chart.coordinate().reflect('x'); chart.coordinate().reflect('y');

API

更详细的配置使用,详见 API