[Bug]: 缩放过程，图例位置不对，或者被裁减

[hustcc]

Describe the bug / 问题描述

案例：https://g2.antv.antgroup.com/examples/general/pie/#pie-base

• 缩放过程，图例位置偏右，没有居中

• 有空间，但是被裁减

Reproduction link / 复现链接

No response

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

No response

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[github-actions]

@hustcc 您好！以下是关于您问题的自动回复：

您好，感谢反馈关于饼图缩放时图例位置偏移和被裁减的问题。针对您的描述，以下是专业建议及解决方案：

问题分析

1. 图例位置未居中
   饼图在缩放或容器尺寸变化时，图例可能出现位置偏右或未居中。
   主要原因是图例的布局未正确设置，或未根据容器变化动态调整。

2. 图例被裁减
   当图表有足够空间时，图例仍然被部分裁切，通常是由于图表的裁剪（clip）或边距（inset/padding）设置不合理。

---

解决方案

1️⃣ 居中图例位置

您可以通过配置 legend 的 position 和 layout 属性，实现图例居中显示。例如：

chart.options({
  legend: {
    color: {
      position: 'top', // 图例在顶部
      layout: {
        justifyContent: 'center', // 主轴居中
      },
    },
  },
});

常用位置参数有 'top', 'right', 'bottom', 'left'，布局可用 'center', 'flex-end' 等。

参考：G2 Legend Position 文档

2️⃣ 防止图例被裁减

请检查 chart 的 clip 和 inset 设置：

• 启用裁剪时，建议设置合适的 inset，为内容留出呼吸空间，防止元素被裁切：

const chart = new Chart({
  container: 'container',
  clip: true,   // 启用裁剪
  inset: 20,    // 内容边距，防止图例被裁剪
});

• 调整图表 padding/margin，可通过 attr 方法为图表或视图动态增加边距：

chart.attr('padding', 20); // 增加整体内边距

参考：G2 Chart Layout 文档

---

建议操作步骤

1. 在初始化 Chart 时，确保设置了合适的 clip 和 inset。
2. 配置 legend 的 position 为 'top' 或其他需要的位置，并通过 layout.justifyContent 居中。
3. 如仍有裁剪问题，适当增加图表的 padding 或 margin。
4. 缩放过程中如果容器尺寸变化，建议在 resize 事件中重新计算 legend 布局。

---

示例代码片段

const chart = new Chart({
  container: 'container',
  clip: true,
  inset: 20,
});

chart.options({
  legend: {
    color: {
      position: 'top',
      layout: { justifyContent: 'center' },
    },
  },
  // ... 你的其他图表配置
});

chart.render();

---

其他建议

• 请确保使用的是最新版本的 G2，部分布局和裁剪功能在旧版本可能表现不一致。
• 若问题依然存在，请补充您的 G2 版本号及相关代码片段，便于进一步定位。

---

如需进一步帮助，欢迎补充更多细节或代码配置！
感谢您的反馈，祝使用愉快！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[moayuisuda]

居中偏移应该已经 5.4.8 修过了
https://stackblitz.com/edit/react-chvm779o-cdshpb5u?file=package.json,src%2Findex.js