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图