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') 返回坐标系对象。不同坐标系下该对象包含的属性不同,具体说明如下:

  • 直角坐标系
属性名类型解释
startObject坐标系的起始点,F2 图表的坐标系原点位于左下角。
endObject坐标系右上角的画布坐标。
transposedBoolean是否发生转置,true 表示发生了转置。
isRectBoolean是否是直角坐标系,直角坐标系下为 true。
  • 极坐标系
属性名类型解释
startAngleNumber极坐标的起始角度,弧度制。
endAngleNumber极坐标的结束角度,弧度制。
innerRadiusNumber绘制环图时,设置内部空心半径,相对值,0 至 1 范围。
radiusNumber设置圆的半径,相对值,0 至 1 范围。
isPolarBoolean判断是否是极坐标,极坐标下为 true。
transposedBoolean是否发生转置,true 表示发生了转置。
centerObject极坐标的圆心所在的画布坐标。
circleRadiusNumber极坐标的半径值。

示例

环图

  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