[Bug]: 外部容器宽度为100%，内部pie组件想要平分3份时legend样式会向左侧移动

[jierui555]

Describe the bug / 问题描述

    <div style={{ flex: '0 0 33%' }}>
      <Pie {...config} />
    </div>

    <div style={{ flex: '0 0 33%' }}>
      <Pie {...config} />
    </div>
  </div>
</div>

采用百分比进行平分，就会有这个问题

Reproduction link / 复现链接

https://stackblitz.com/edit/vitejs-vite-c8b4qiaj?file=src%2Fcharts.jsx

Steps to Reproduce the Bug or Issue / 重现步骤

    <div style={{ flex: '0 0 33%' }}>
      <Pie {...config} />
    </div>

    <div style={{ flex: '0 0 33%' }}>
      <Pie {...config} />
    </div>
  </div>
</div>

采用这个层级形式会复现

Version / 版本

🆕 2.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[dosubot]

Hi @jierui555! I'm Dosu and I’m helping the ant-design-charts team.

这个 Pie 图 legend 向左偏移的问题，其实是 ant-design-charts 在 flex 布局下没有自动处理 legend 的空间和对齐，尤其是用百分比宽度分栏时，legend 的布局会受到父容器和 G2 内部定位的影响。当前没有官方自动适配方案，开发者需要手动管理 legend 的布局和空间 [相关讨论]。

常见解决方法：

1. 将 legend 渲染到图表外部，比如和 Pie 图并列的 div，用 CSS 或父容器布局手动留出空间（如设置 margin-bottom 或调整容器高度），这样 legend 不会覆盖或错位。

2. 如果必须放在图表内部，可以用 ref 获取 legend 的高度，然后动态调整 chart 容器的 padding 或 margin，避免重叠或偏移。

3. 利用 legend 的 position、layout.justifyContent、alignItems、size、length 等属性，可以微调 legend 的对齐方式。例如：

   legend: {
     position: 'right',
     layout: {
       justifyContent: 'center',
       alignItems: 'center',
     },
     size: 80, // 控制宽度或高度
     length: 120, // 控制主轴长度
   }

4. 设置 autoFit: false 并手动调整图表宽高，有时可以缓解部分 legend 渲染问题 [临时方案]。

最佳实践是将 legend 独立出来，用 React/CSS 管理布局，避免让 Pie 图和 legend 在同一个 flex 子项里自动分配空间。这样可以彻底规避 legend 偏移或重叠的问题 [源码分析]。

如果需要更具体的代码示例或有特殊布局需求，可以补充说明。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[lxfu1]

如线下沟通，版本冲突导致。

[DJGDragon]

遇到了同样的问题 请问是什么版本冲突导致的？