[Bug]: 双轴图的图例分类异常

[xiaoke-1]

Describe the bug / 问题描述

柱线混合的双轴图,图例里显示的都是柱状图的图例

Reproduction link / 复现链接

https://g2.antv.antgroup.com/examples/general/dual/#dual-axis-line-bar

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

官方示例里可直接复现
https://g2.antv.antgroup.com/examples/general/dual/#dual-axis-line-bar

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[github-actions]

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

您好，感谢反馈“双轴图图例分类异常”的问题！

---

问题分析

您描述的现象是：柱线混合的双轴图，图例只显示柱状图的分类，线图的图例未展示。通过您给出的官方示例链接可以直接复现此问题。

这种情况通常发生在双轴图配置不正确，图例只关联了一个视觉通道（如 color），或没有分别配置柱状图和线图的图例。

---

解决建议

1. 检查并分别配置图例

   双轴图通常由两个图层（如 interval 柱状图、line 折线图）组成。需要分别为每个图层配置 legend，且要确保 encode 的 color 分别对应不同的数据字段。

   import { Chart } from '@antv/g2';
   
   const chart = new Chart({
     container: 'container',
     autoFit: true,
   });
   
   // 柱状图
   chart
     .interval()
     .data(barData)
     .encode('x', 'category')
     .encode('y', 'barValue')
     .encode('color', 'barType')
     .legend('color', {
       position: 'top',
       title: '柱状图分类',
     });
   
   // 折线图
   chart
     .line()
     .data(lineData)
     .encode('x', 'category')
     .encode('y', 'lineValue')
     .encode('color', 'lineType')
     .legend('color', {
       position: 'top',
       title: '折线图分类',
     });
   
   chart.render();

   注意：如果两图层 encode 的 color 字段相同，图例会合并，只显示一组分类。建议分别配置，且字段名不要冲突。

2. 自定义图例布局和样式

   利用 legend 配置自定义标题、位置、布局等，增强区分度：

   .legend('color', {
     position: 'top',
     layout: {
       justifyContent: 'center',
     },
     title: '自定义图例标题',
     itemMarker: 'circle',
     itemSpacing: 8,
   });

3. 官方文档参考

   • G2 图例配置文档
   • legend() API 用法

---

额外建议

• 若使用 G2Plot 或其他高级封装，图例配置方式可能不同，请明确使用的库和版本。
• 若问题依然存在，请补充具体代码片段和版本信息，便于进一步定位。

---

总结

请确保双轴图的每个图层都正确配置 legend，且 color 映射字段不冲突。这样图例才能完整显示所有分类。

如需进一步协助，请补充相关代码和版本信息。感谢您的反馈！

---

G2 项目智能助手

---

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