[Bug]: 双轴分面图的图例只显示最后绘制的轴的图例，且左右轴刻度都一样

[muyoulongjingcha]

Describe the bug / 问题描述

我绘制了一个柱形+折线的双轴分面图，但是

1. 图例只显示了后绘制的折线图的图例，交换绘制顺序后，只显示了柱形图的图例，图例缺失一部分。
2. 左右轴的数据值相差较大，但是刻度却自动同步了，这在单独的双轴图中就是按照各自的值生成的刻度
3. y轴只在第一个分面显示了，后边的分面没有y轴，希望第一个分面显示左轴，最后一个分面显示右轴

如下图所示：

复现代码如下：
g2-demo.html

const data = [
    { name: '薪金', date: '20210121', leftKey: '指标1', leftValue: 2.7, rightKey: '指标A', rightValue: 13 },
    { name: '薪金', date: '20210121', leftKey: '指标2', leftValue: 1.5, rightKey: '指标B', rightValue: 18 },
    { name: '薪金', date: '20210121', leftKey: '指标3', leftValue: 3.3, rightKey: '指标C', rightValue: 22 },
    { name: '薪金', date: '20210121', leftKey: '指标4', leftValue: 1.4, rightKey: '指标D', rightValue: 26 },
    { name: '货币', date: '20210121', leftKey: '指标1', leftValue: 2.2, rightKey: '指标A', rightValue: 17 },
    { name: '货币', date: '20210121', leftKey: '指标2', leftValue: 5.6, rightKey: '指标B', rightValue: 44 },
    { name: '货币', date: '20210121', leftKey: '指标3', leftValue: 3.1, rightKey: '指标C', rightValue: 31 },
    { name: '货币', date: '20210121', leftKey: '指标4', leftValue: 2.5, rightKey: '指标D', rightValue: 18 },
    { name: '现金', date: '20210121', leftKey: '指标1', leftValue: 1.3, rightKey: '指标A', rightValue: 29 },
    { name: '现金', date: '20210121', leftKey: '指标2', leftValue: 3.6, rightKey: '指标B', rightValue: 36 },
    { name: '现金', date: '20210121', leftKey: '指标3', leftValue: 2.1, rightKey: '指标C', rightValue: 66 },
    { name: '现金', date: '20210121', leftKey: '指标4', leftValue: 1.5, rightKey: '指标D', rightValue: 52 },

    { name: '薪金', date: '20210122', leftKey: '指标1', leftValue: 4.2, rightKey: '指标A', rightValue: 48 },
    { name: '薪金', date: '20210122', leftKey: '指标2', leftValue: 2.8, rightKey: '指标B', rightValue: 33 },
    { name: '薪金', date: '20210122', leftKey: '指标3', leftValue: 5.1, rightKey: '指标C', rightValue: 65 },
    { name: '薪金', date: '20210122', leftKey: '指标4', leftValue: 1.9, rightKey: '指标D', rightValue: 21 },
    { name: '货币', date: '20210122', leftKey: '指标1', leftValue: 3.6, rightKey: '指标A', rightValue: 55 },
    { name: '货币', date: '20210122', leftKey: '指标2', leftValue: 4.9, rightKey: '指标B', rightValue: 41 },
    { name: '货币', date: '20210122', leftKey: '指标3', leftValue: 2.3, rightKey: '指标C', rightValue: 38 },
    { name: '货币', date: '20210122', leftKey: '指标4', leftValue: 5.4, rightKey: '指标D', rightValue: 67 },
    { name: '现金', date: '20210122', leftKey: '指标1', leftValue: 1.7, rightKey: '指标A', rightValue: 25 },
    { name: '现金', date: '20210122', leftKey: '指标2', leftValue: 3.3, rightKey: '指标B', rightValue: 59 },
    { name: '现金', date: '20210122', leftKey: '指标3', leftValue: 4.0, rightKey: '指标C', rightValue: 44 },
    { name: '现金', date: '20210122', leftKey: '指标4', leftValue: 2.1, rightKey: '指标D', rightValue: 30 },

    { name: '薪金', date: '20210123', leftKey: '指标1', leftValue: 3.8, rightKey: '指标A', rightValue: 52 },
    { name: '薪金', date: '20210123', leftKey: '指标2', leftValue: 1.2, rightKey: '指标B', rightValue: 27 },
    { name: '薪金', date: '20210123', leftKey: '指标3', leftValue: 4.5, rightKey: '指标C', rightValue: 39 },
    { name: '薪金', date: '20210123', leftKey: '指标4', leftValue: 2.6, rightKey: '指标D', rightValue: 43 },
    { name: '货币', date: '20210123', leftKey: '指标1', leftValue: 2.9, rightKey: '指标A', rightValue: 22 },
    { name: '货币', date: '20210123', leftKey: '指标2', leftValue: 5.2, rightKey: '指标B', rightValue: 50 },
    { name: '货币', date: '20210123', leftKey: '指标3', leftValue: 3.7, rightKey: '指标C', rightValue: 29 },
    { name: '货币', date: '20210123', leftKey: '指标4', leftValue: 1.8, rightKey: '指标D', rightValue: 15 },
    { name: '现金', date: '20210123', leftKey: '指标1', leftValue: 4.1, rightKey: '指标A', rightValue: 61 },
    { name: '现金', date: '20210123', leftKey: '指标2', leftValue: 2.4, rightKey: '指标B', rightValue: 34 },
    { name: '现金', date: '20210123', leftKey: '指标3', leftValue: 3.9, rightKey: '指标C', rightValue: 70 },
    { name: '现金', date: '20210123', leftKey: '指标4', leftValue: 1.3, rightKey: '指标D', rightValue: 24 },
];

// 初始化图表实例
const chart = new G2.Chart({
    container: 'chart',
    width: 800,
    height: 400,
    paddingTop: 120,
    paddingRight: 60,
    paddingBottom: 60,
    paddingLeft: 60,
});

const facetRect = chart.facetRect().data(data).encode('x', 'name');
const facetView = facetRect.view();
facetView.attr('frame', false)
    .interaction('tooltip', {crosshairs: false, shared: true})
    .interaction('elementHighlight', {background: true, region: true});
facetView.interval()
    .encode('x', 'date')
    .encode('y', 'leftValue')
    .encode('color', 'leftKey')
    .axis('x', {title: null})
    .axis('y', {title: null})
    .transform({type: 'stackY'});
facetView.line()
    .encode('x', 'date')
    .encode('y', 'rightValue')
    .encode('color', 'rightKey')
    .axis('x', {title: null})
    .axis('y', {position: 'right',title: null})
    .scale('y', {independent: true});

chart.render();

Reproduction link / 复现链接

No response

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

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[github-actions]

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

您好，感谢反馈 G2 5.x 关于双轴分面图图例与刻度同步的问题！针对您的两个核心问题，下面做详细解答与建议。

---

1️⃣ 图例只显示最后绘制的轴的图例，缺失另一部分

问题原因：

• 在 G2 5.x，分面视图（facetView）中，如果 interval 和 line 两个几何（geom）都用 encode('color', ...)，默认情况下只会根据最后一个 mark 的 color 渲染图例，导致另一个图例缺失。

解决方法：

• 需要分别为 interval 和 line mark 显式配置 legend，确保两个图例都能显示。例如：

facetView.interval()
  .encode('x', 'date')
  .encode('y', 'leftValue')
  .encode('color', 'leftKey')
  .legend('color', {}) // 显式开启 interval 的 color 图例

facetView.line()
  .encode('x', 'date')
  .encode('y', 'rightValue')
  .encode('color', 'rightKey')
  .legend('color', {}) // 显式开启 line 的 color 图例

建议：可通过 legend('color', {...}) 进一步自定义样式、位置等属性。

---

2️⃣ 左右轴数据差异大但刻度同步，导致展示不合理

问题原因：

• G2 默认会尝试同步同名通道的 scale（如都用 encode('y', ...)），导致左右轴刻度一致，即使数据范围差异很大。

解决方法：

• 需要为右轴的 line mark 显式设置 scale('y', {independent: true})，让其 y 轴独立，不与左侧 interval 的 y 轴同步。

facetView.line()
  .encode('x', 'date')
  .encode('y', 'rightValue')
  .encode('color', 'rightKey')
  .axis('y', {position: 'right'})
  .scale('y', {independent: true}) // 关键，右轴独立

若需要进一步自定义刻度，可以通过 axis('y', {tickCount: ...}) 配合 scale('y', {domain: [...]}) 调整。

---

3️⃣ 其他建议

• 色彩区分：为 interval 和 line 的 color 通道分别指定 palette，如 scale('color', {palette: 'tableau10'})，便于区分。
• legend 合并/分组：如需将两个图例合并显示，可参考 G2 官方 legend 组件文档 进一步定制。
• 分面图适配：分面视图下，每个 facet 都是独立的 view，需确保每个视图内的 mark 都做了如上配置。

---

✅ 代码修正建议（示例）

facetView.interval()
  .encode('x', 'date')
  .encode('y', 'leftValue')
  .encode('color', 'leftKey')
  .legend('color', {}) // interval 图例

facetView.line()
  .encode('x', 'date')
  .encode('y', 'rightValue')
  .encode('color', 'rightKey')
  .axis('y', {position: 'right'})
  .scale('y', {independent: true})
  .legend('color', {}) // line 图例

---

📚 参考文档

• G2 Legend 配置
• G2 Axis & Scale 配置

---

如仍有问题，请补充更详细的代码或截图，方便进一步定位。感谢您的使用与反馈！

---

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

[muyoulongjingcha]

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

您好，感谢反馈 G2 5.x 关于双轴分面图图例与刻度同步的问题！针对您的两个核心问题，下面做详细解答与建议。

1️⃣ 图例只显示最后绘制的轴的图例，缺失另一部分

问题原因：

• 在 G2 5.x，分面视图（facetView）中，如果 interval 和 line 两个几何（geom）都用 encode('color', ...)，默认情况下只会根据最后一个 mark 的 color 渲染图例，导致另一个图例缺失。

解决方法：

• 需要分别为 interval 和 line mark 显式配置 legend，确保两个图例都能显示。例如：

facetView.interval()
.encode('x', 'date')
.encode('y', 'leftValue')
.encode('color', 'leftKey')
.legend('color', {}) // 显式开启 interval 的 color 图例

facetView.line()
.encode('x', 'date')
.encode('y', 'rightValue')
.encode('color', 'rightKey')
.legend('color', {}) // 显式开启 line 的 color 图例

建议：可通过 legend('color', {...}) 进一步自定义样式、位置等属性。

2️⃣ 左右轴数据差异大但刻度同步，导致展示不合理

问题原因：

• G2 默认会尝试同步同名通道的 scale（如都用 encode('y', ...)），导致左右轴刻度一致，即使数据范围差异很大。

解决方法：

• 需要为右轴的 line mark 显式设置 scale('y', {independent: true})，让其 y 轴独立，不与左侧 interval 的 y 轴同步。

facetView.line()
.encode('x', 'date')
.encode('y', 'rightValue')
.encode('color', 'rightKey')
.axis('y', {position: 'right'})
.scale('y', {independent: true}) // 关键，右轴独立

若需要进一步自定义刻度，可以通过 axis('y', {tickCount: ...}) 配合 scale('y', {domain: [...]}) 调整。

3️⃣ 其他建议

• 色彩区分：为 interval 和 line 的 color 通道分别指定 palette，如 scale('color', {palette: 'tableau10'})，便于区分。
• legend 合并/分组：如需将两个图例合并显示，可参考 G2 官方 legend 组件文档 进一步定制。
• 分面图适配：分面视图下，每个 facet 都是独立的 view，需确保每个视图内的 mark 都做了如上配置。

✅ 代码修正建议（示例）

facetView.interval()
.encode('x', 'date')
.encode('y', 'leftValue')
.encode('color', 'leftKey')
.legend('color', {}) // interval 图例

facetView.line()
.encode('x', 'date')
.encode('y', 'rightValue')
.encode('color', 'rightKey')
.axis('y', {position: 'right'})
.scale('y', {independent: true})
.legend('color', {}) // line 图例

📚 参考文档

• G2 Legend 配置
• G2 Axis & Scale 配置

如仍有问题，请补充更详细的代码或截图，方便进一步定位。感谢您的使用与反馈！

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

经测试，添加legend('color', {})无效果，scale('y', {independent: true})在原代码中已经设置

[github-actions]

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

您好，感谢反馈 G2 5.x 双轴分面图相关问题！针对您提到的三个问题，分析如下，并给出建议：

---

1. 图例只显示最后绘制的轴的图例，图例缺失

原因

G2 分面图（facet）中，同一 View 下多个几何标记（如 interval/bar 和 line）默认会合并 color 图例，导致只显示最后一个 mark 的图例项。

解决方法

• 分别为 interval 和 line 设置 legend 配置，并在 mark 级显式声明 legend。
• 可用 mark 的 legend 属性分别开启 color 图例：

facetView.interval()
  // ...其他配置
  .legend({ color: {} }); // 显式开启 interval 的 color 图例

facetView.line()
  // ...其他配置
  .legend({ color: {} }); // 显式开启 line 的 color 图例

• 如果还未分开，可以考虑将 interval 和 line 拆分到不同的 view（复杂场景）。
• 有时还需调整 legend 的 position 或 offset，避免重叠。

---

2. 左右轴刻度自动同步，未按各自数据范围显示

原因

G2 mark 默认会同步同一方向的坐标轴 scale，导致左右轴刻度一致。

解决方法

• 为右轴 mark 配置独立 scale，即 .scale('y', {independent: true})，这样该 mark 的 y 轴不与其他 mark 共享 scale：

facetView.line()
  // ...其他配置
  .scale('y', {independent: true});

• 如果 interval 也需要独立刻度，可同理处理。

---

3. 分面仅第一个显示左轴，最后一个显示右轴

原因

G2 分面（facet）默认所有分面都显示同样的坐标轴，无法自动只显示首/末分面的 y 轴。

解决方法

• 通过分面视图的自定义配置，在 facetRect.eachView 方法中判断当前分面 index，仅在第一个分面设置左 y 轴，最后一个分面设置右 y 轴，其余分面隐藏 y 轴。
• 代码示例：

const facetRect = chart.facetRect()
  .data(data)
  .encode('x', 'name')
  .eachView((view, facet, facetIndex, facets) => {
    // 左轴只在第一个分面显示
    view.axis('y', {position: 'left', title: null, show: facetIndex === 0});
    // 右轴只在最后一个分面显示
    view.axis('y', {position: 'right', title: null, show: facetIndex === facets.length - 1});
    // 其他分面不显示 y 轴
  });

• 也可以用 show: false 隐藏不需要的轴。

---

🌟 推荐代码优化示例

const chart = new G2.Chart({ /* ... */ });

const facetRect = chart.facetRect()
  .data(data)
  .encode('x', 'name')
  .eachView((view, facet, facetIndex, facets) => {
    view.interaction('tooltip', { crosshairs: false, shared: true });
    view.interaction('elementHighlight', { background: true, region: true });

    // 柱状图（左轴）
    view.interval()
      .encode('x', 'date')
      .encode('y', 'leftValue')
      .encode('color', 'leftKey')
      .legend({ color: {} }) // 显式开启图例
      .axis('y', { position: 'left', title: null, show: facetIndex === 0 })
      .transform({ type: 'stackY' });

    // 折线图（右轴）
    view.line()
      .encode('x', 'date')
      .encode('y', 'rightValue')
      .encode('color', 'rightKey')
      .legend({ color: {} }) // 显式开启图例
      .axis('y', { position: 'right', title: null, show: facetIndex === facets.length - 1 })
      .scale('y', { independent: true });
  });

chart.render();

---

📝 总结

• 图例配置：分别为 interval/line 设置 legend，避免只显示最后一个 mark 的图例。
• 坐标轴刻度：右轴 mark 设置 scale 独立，避免同步。
• 分面轴显示：利用 eachView 判断分面 index，定制每个分面轴的显示。

如需进一步定制 legend 或 axis 样式，可参考 G2 官方文档 与 axis。

如问题仍未解决，请补充最小复现 demo 或详细报错信息，感谢您的支持！

---

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