坐标系 - Coordinate

阅读时间约 2 分钟

配置坐标系,之前的调用方法为 coord,将在 V4.1 移除。有三种调用方法:

第一种 直接传入 CoordinateOption 配置。

(option?: CoordinateOption) => CoordinateController;
chart.coordinate({
  type: 'polar',
  cfg: {
    radius: 0.85,
  },
  actions: [['transpose']],
});

CoordinateOption 坐标系总配置:

参数名类型是否必选默认值描述
typestring'rect'坐标系类型
cfgCoordinateCfg-坐标系配置项,目前常用于极坐标
actionsCoordinateActions[]-坐标系变换操作

CoordinateOption.type 坐标系类型:

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

CoordinateCfg 坐标系配置项,目前常用于极坐标:

参数名类型是否必选默认值描述
startAnglenumber-用于极坐标,配置起始弧度
endAnglenumber-用于极坐标,配置结束弧度
radiusnumber-用于极坐标,配置极坐标半径,0-1 范围的数值
innerRadiusnumber-用于极坐标,极坐标内半径,0 -1 范围的数值

CoordinateActions 坐标系变换操作:

包括旋转,缩放,镜像映射和置换等。可以通过 CoordinateOption.actions 传入,或者 CoordinateController 进一步调用方法实现坐标系变化操作。

type CoordinateActions =
  | ['rotate', number] // 配置旋转度数,使用弧度制
  | ['reflect', 'x' | 'y'] // 沿 x 方向镜像或者沿 y 轴方向映射
  | ['scale', number, number] // 沿着 x 和 y 方向的缩放比率
  | ['transpose']; //  x,y 轴置换,常用于条形图和柱状图之间的转换
chart
  .coordinate() // 默认创建直角坐标系
  .transpose() // x,y 轴置换
  .scale(1, 1) // 沿着 x 和 y 方向的缩放比率 1, 1
  .rotate(Math.PI * 0.4) // 旋转 Math.PI * 0.4
  .reflect('x'); // 沿 x 方向镜像

第二种 第一个参数指明坐标系类型,第二个参数传入 CoordinateOption 配置。

(type: string, coordinateCfg?: CoordinateCfg): CoordinateController;
// 创建极坐标,并设定半径为 0.85
chart.coordinate('polar', { radius: 0.85 });

// 默认创建直角坐标系
chart.coordinate();

第三种 是第一种和第二种的结合

(type: string | CoordinateOption, coordinateCfg?: CoordinateCfg): CoordinateController