coord简介

coord是指图表中的坐标系，通过对这个属性的配置可以改变坐标系类型及展现方式。

目前G2中的坐标系可以分为直角坐标系和极坐标系两大类，具体分类见下表：

注意：从上表可以看出，虽然G2既支持直角坐标系也支持极坐标系，但这两种图都是2D平面图，事实也是如此， 目前的G2还不支持绘制3D图。

坐标系对应图表

直角坐标系可画图表类型

折线图柱状图分组图

等等

极坐标系可画图表类型

极坐标系表示的图表常被用于周期性数据，比如时间和方向数据

饼图雷达图

等等

Coord配置

之前也提到过，像scale一样，coord也有属性式和函数式两种配置方式：

属性式

coord:{ type: {string}, // 坐标系类型声明，默认为rect，可取值: rect polar theta map helix gauge clock cfg: {object}, // 对应各个 type 坐标系属性配置，同 `chart.coord(type, cfg)` 中的 cfg actions: {array} // 声明坐标系需要进行的变换操作,可取值:rotate scale reflect transpose }

从以上代码中可以看出，coord一共包含3个可配置属性

其中重点讲解actions参数，其支持的变换操作如下：

rotate(angle): 坐标系旋转，angle 表示旋转的度数，单位为角度。scale(sx, sy): 坐标系缩放，sx 代表 x 方向缩放比例，sy 代表 y 方向缩放比例，单位为数值。reflect('' | 'x' | 'y'): 坐标系转置，将 x 或者 y 的起始、结束值倒置。transpose(): 将坐标系 x 轴和 y 轴转置。

actions属性的配置方式如下：

actions: [ [ 'transpose' ], [ 'rotate', 90 ], [ 'scale', 1, -1 ], [ 'reflect', 'x' ]]

各种变换的示例将在下面“直角坐标系配置”部分中进行讲解。

函数式

chart.coord(type:{string},cfg:{object}).transpose().rotate(angle);

这两种配置中的type和cfg属性配置是一一对应的，但是需要注意的是：属性设置中的actions配置可以通过链式设置的方式来调用。

说完coord的类型和配置形式，下面说一下每种coord具体类型的配置，假设基初代码如下:

html代码：

<div id="root"></div>

JS代码：

 const data=[ {name:"apple",value:2,time:"1996-05-01"}, {name:"orange",value:3,time:"1996-05-02"}, {name:"banana",value:4,time:"1996-05-03"}, ]; const chart=new G2.Chart({ container:"root", width:400, height:400, options:{ scales:{ name:{ type: "cat" } }， coord:{ type:"rect", cfg:{}, actions:[] } } }); console.log(chart); chart.source(data); chart.interval().position("name*value").color("name",["red","black","pink","blue"]); chart.render();

效果如下：

直角坐标系配置

rect配置

注意：rect类型中时一般不需要配置cfg属性，actions可配置。

transpose变换coord配置如下：

coord：{ type:"rect", actions:[ ["transpose"] ]}

tranapose变换(将x轴与y轴转置)

rotate变换coord配置如下：

注意：默认以坐标系中心沿顺时针旋转

coord：{ type:"rect", actions:[ ["rotate"，90] //绕坐标系中心绕顺时针旋转90度 ]}

rotate(旋转变换)

reflect变换coord配置如下：

coord：{ type:"rect", actions:[ ["reflect"，"x"]， //将x轴方向换成相反的方向 //["reflect"，"y"] //将x轴y轴方向都换成相反的方向 ]}

reflect(x轴反向)

reflect(x轴y轴都反向)

scale变换coord配置如下：

coord：{ type:"rect", actions:[ ["scale",0.5,1]， //将x轴缩小0.5倍，y轴不变 ]}

scale变换之前

scale变换之后

从上图的对比中我们可以看出，scale变换后x轴缩小为原来的0.5倍，而y轴保持不变。

极坐标系配置

极坐标均可以进行如下属性配置：

chart.coord('polar' || 'theta' || 'helix', { startAngle: 弧度, // 起始弧度,用Math.PI表示，如：-Math.PI/2 endAngle: 弧度, // 结束弧度，用Math.PI表示，如：Math.PI/2 innerRadius: 0 至 1 范围的数值, // 用于空心部分的半径设置 radius: 0 至 1 范围的数值 // 实心圆的半径大小设置});

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

polar配置

因为polar是通过 半径来反映数据 的，所以常 与interval形状配合 绘制玫瑰图。

示例：

coord:{ type:"polar", cfg:{ startAngle:-Math.PI/2, //起始角度为-π/2 endAngle:Math.PI, //结束角度为π/2，也就是说可用于画图的角度为-π/2~π innerRadius:0.5， //空心部分是0.5 radius:0.5 //实心部分是0.5，因此两者半径一样大 } }, actions:[] //actions配置参照直角坐标系 }

chart.interval().position("name*value").color("name",["red","black","pink","blue"]);

polar玫瑰图

theta配置

因为theta是通过 角度大小来反映数据 的，所以常 与intervalStack层叠形状配合 绘制饼图或者环图。

示例：

coord:{ type:"theta", cfg:{ startAngle:-Math.PI/2, //起始角度为-π/2 endAngle:Math.PI/2, //结束角度为π/2，也就是说可用于画图的角度为-π/2~π innerRadius:0.5， //空心部分是0.5 radius:0.5 //实心部分是0.5，因此两者半径一样大 } }, actions:[] //actions配置参照直角坐标系 }

chart.intervalStack().position("value").color("name",["red","black","pink","blue"]);

注意：因为intervalStack是层叠图（即一个坐标轴的点是定的，只有一个变量），因此position只能接受一个变量作为可变参数。

theta环图

helix

螺旋坐标系，基于阿基米德螺旋线，常用于周期性数据的表示，是一种不常用的一种坐标系。

示例：

coord:{ type:"helix", cfg:{ startAngle:-Math.PI/2, //起始角度为-π/2 endAngle:5*Math.PI, //结束角度为π/2，也就是说可用于画图的角度为-π/2~5π innerRadius:0.5， //空心部分是0.5 radius:0.5 //实心部分是0.5，因此两者半径一样大 } }, actions:[] //actions配置参照直角坐标系 }

helix图