圆角玉珏图 的endAngle 看起来配置失效

[kun6696]

问题描述

如下重现步骤

重现链接

https://g2.antv.antgroup.com/zh/examples/general/radial/#bar-cornered-radial

重现步骤

1、进去页面
2、复制如下参数

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.coordinate({ type: 'radial', startAngle: Math.PI/2, endAngle: 0 });

chart
  .interval()
  .data({
    // Data is collected by the end of 2022.11.09
    value: [
      { name: 'G', star: 814 },
      { name: 'G2', star: 11425 },
      { name: 'G2Plot', star: 2320 },
      { name: 'S2', star: 968 },
      { name: 'F2', star: 7346 },
      { name: 'L7', star: 2888 },
      { name: 'G6', star: 9314 },
      { name: 'X6', star: 3985 },
      { name: 'AVA', star: 1151 },
    ],
    transform: [{ type: 'sortBy', fields: [['star', true]] }],
  })
  .encode('x', 'name')
  .encode('y', 'star')
  .scale('y', { type: 'sqrt' })
  .encode('color', 'name')
  .encode('size', 40)
  .style('radius', 20)
  .label({
    text: 'star',
    position: 'outside',
    autoRotate: true,
    rotateToAlignArc: true,
    dx: 4,
  })
  .axis('x', { title: false })
  .axis('y', false)
  .animate('enter', { type: 'waveIn', duration: 1000 });

chart.render();

3、可以看到有问题的图形,看起来只有最外层的角度是0度的感觉，然后中间的数据也不是按照其值的大小排布的。

预期行为

希望endAngle配置正确

平台

• 操作系统: [macOS]
• 网页浏览器: [Google Chrome]

屏幕截图或视频（可选）

补充说明（可选）

No response

[pearmini]

感兴趣修复一下吗🤣

[中级任务]

[kun6696]

我先接下来看看

[kun6696]

这个问题我看了一下，目前能够支持的角度绘制是当endAgnle >= startAngle 并且两个角度在同一周期里是能够满足正确绘制。我这里方案可能有点取巧了，就是关于cordinate 里面具体绘制逻辑我还没看。这个方案是我打算将option的coordinate参数的角度做一个转换。映射到0~2*Math.PI之间。并且 startAngle <= endAngle。代码可以类似这样：

在极坐标里面加这样的逻辑。

如果可以的话，我就编码了。

[kun6696]

@pearmini 看一下我上面

[pearmini]

@kun6696 我觉得没有问题。

[pearmini]

closed by: #6010