坐标系 - Coordinate

阅读时间约 3 分钟

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

第一种直接传入 CoordinateOption 配置。

(option?: CoordinateOption) => CoordinateController;

chart.coordinate({
  type: 'polar',
  cfg: {
    radius: 0.85,
  },
  actions: [['transpose']],
});

CoordinateOption 坐标系总配置：

参数名	类型	默认值	描述
type	string	'rect'	坐标系类型
cfg	CoordinateCfg	-	坐标系配置项，目前常用于极坐标
actions	CoordinateActions[]	-	坐标系变换操作

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 坐标系配置项，目前常用于极坐标：

参数名	类型	默认值	描述
startAngle	number	-	用于极坐标，配置起始弧度
endAngle	number	-	用于极坐标，配置结束弧度
radius	number	-	用于极坐标，配置极坐标半径，0-1 范围的数值
innerRadius	number	-	用于极坐标，极坐标内半径，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