Coordinate

设置坐标系，F2 支持两种坐标系：笛卡尔坐标系和极坐标系，默认使用笛卡尔坐标系。

配置坐标系

直角坐标系

  1. // 选择笛卡尔坐标系
  2. chart.coord('rect');
  3. // 坐标系翻转，绘制条形图时需要
  4. chart.coord({
  5.   transposed: true
  6. });
  7. chart.coord('rect', {
  8.   transposed: true
  9. });

极坐标系

  1. // 选择极坐标系
  2. chart.coord('polar');
  3. // 更多配置
  4. chart.coord('polar', {
  5.   transposed: true, // 坐标系翻转
  6.   startAngle: {Number}, // 起始弧度
  7.   endAngle: {Number}, // 结束弧度
  8.   innerRadius: {Number}, // 内环半径，数值为 0 - 1 范围
  9.   radius: {Number} // 半径，数值为 0 - 1 范围
  10. });
  11.  

获取坐标系对象

chart.get('coord') 返回坐标系对象。不同坐标系下该对象包含的属性不同，具体说明如下：

  • 直角坐标系
属性名 类型 解释
start Object 坐标系的起始点，F2 图表的坐标系原点位于左下角。
end Object 坐标系右上角的画布坐标。
transposed Boolean 是否发生转置，true 表示发生了转置。
isRect Boolean 是否是直角坐标系，直角坐标系下为 true。
  • 极坐标系
属性名 类型 解释
startAngle Number 极坐标的起始角度，弧度制。
endAngle Number 极坐标的结束角度，弧度制。
innerRadius Number 绘制环图时，设置内部空心半径，相对值，0 至 1 范围。
radius Number 设置圆的半径，相对值，0 至 1 范围。
isPolar Boolean 判断是否是极坐标，极坐标下为 true。
transposed Boolean 是否发生转置，true 表示发生了转置。
center Object 极坐标的圆心所在的画布坐标。
circleRadius Number 极坐标的半径值。

示例

环图

  1. const data = [
  2.   { name: '芳华', proportion: 0.4, a: '1' },
  3.   { name: '妖猫传', proportion: 0.2, a: '1' },
  4.   { name: '机器之血', proportion: 0.18, a: '1' },
  5.   { name: '心理罪', proportion: 0.15, a: '1' },
  6.   { name: '寻梦环游记', proportion: 0.05, a: '1' },
  7.   { name: '其他', proportion: 0.02, a: '1' },
  8. ];
  9. const chart = new F2.Chart({
  10.   id: 'ring',
  11.   width: 300,
  12.   height: 300 * 0.64,
  13.   pixelRatio: window.devicePixelRatio,
  14. });
  15. chart.source(data);
  16. chart.legend({
  17.   position: 'right'
  18. });
  19. chart.coord('polar', {
  20.   transposed: true,
  21.   innerRadius: 0.7,
  22. });
  23. chart.axis(false);
  24. chart
  25.   .interval()
  26.   .position('a*proportion')
  27.   .color('name', [
  28.     '#1890FF',
  29.     '#13C2C2',
  30.     '#2FC25B',
  31.     '#FACC14',
  32.     '#F04864',
  33.     '#8543E0',
  34.   ])
  35.   .adjust('stack');
  36.  
  37. chart.render();

半圆

  1. const data = [
  2.   { name: '芳华', proportion: 0.4, a: '1' },
  3.   { name: '妖猫传', proportion: 0.2, a: '1' },
  4.   { name: '机器之血', proportion: 0.18, a: '1' },
  5.   { name: '心理罪', proportion: 0.15, a: '1' },
  6.   { name: '寻梦环游记', proportion: 0.05, a: '1' },
  7.   { name: '其他', proportion: 0.02, a: '1' },
  8. ];
  9. const chart = new F2.Chart({
  10.   id: 'pie',
  11.   width: 300,
  12.   height: 300 * 0.64,
  13.   pixelRatio: window.devicePixelRatio,
  14. });
  15. chart.source(data);
  16. chart.legend({
  17.   position: 'bottom',
  18.   align: 'center'
  19. });
  20. chart.coord('polar', {
  21.   transposed: true,
  22.   startAngle: -Math.PI,
  23.   endAngle: 0,
  24. });
  25. chart.axis(false);
  26. chart
  27.   .interval()
  28.   .position('a*proportion')
  29.   .color('name', [
  30.     '#1890FF',
  31.     '#13C2C2',
  32.     '#2FC25B',
  33.     '#FACC14',
  34.     '#F04864',
  35.     '#8543E0',
  36.   ])
  37.   .adjust('stack');
  38.  
  39. chart.render();

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/coordinate.html