antvis/G2

如何在geoView上添加interval(饼图)? #6167

CullenNg posted onGitHub

问题描述

如何在 geoView 上添加 “饼图” ? 有例子可以提供吗?

想要实现如下效果: screenshot-20240410-094912

目前成功添加了 "point" 和 “text",但是 “interval” 不成功;

🙏🙏🙏

重现链接

https://codesandbox.io/p/sandbox/map-pie-j2vrwl?file=%2Findex.ts%3A7%2C36

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


这里的 point 和 text 都是一个数据对应一个图形,所以相同的 interval 只能绘制一个条,并不能绘制完整的饼图。如果希望实现图中效果的话,目前比较好的方法是用 Point Mark + 自定义饼图形状。

function ShapePie(style, context) {
  const { document } = context;
  return (...context) => {
     // 这里根据 context 去绘制饼图
     // 借助 d3 计算饼图的 path
  };
}

register("shape.point.pie", ShapeTriangle);

chart.options({
  children: [
    {
      type: 'point',
      data: londonCentroids,
      encode: {
        x: 'cx',
        y: 'cy',
        shape: 'pie',
      },
    },
  ],
});
posted by pearmini about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests