antvis / antvis/G2

[Bug]: 复合视图图例表现错乱

Open
#7,022 1 comment 0 reactions 0 assignees View on GitHub
bug 🐛
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

我用复合视图绘制了多个饼图,点击某个饼图的图例会影响其他饼图,并且其他饼图的图例消失。

### Reproduction link / 复现链接

_No response_

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

示例代码:
```javascript
import { Chart } from "@antv/g2";

const data = [
{ group: "一组", item: "工作一", percent: 10 },
{ group: "一组", item: "工作二", percent: 20 },
{ group: "一组", item: "工作三", percent: 30 },
{ group: "一组", item: "工作四", percent: 20 },
{ group: "一组", item: "工作五", percent: 20 },
{ group: "二组", item: "工作一", percent: 45 },
{ group: "二组", item: "工作二", percent: 25 },
{ group: "二组", item: "工作三", percent: 20 },
{ group: "二组", item: "工作四", percent: 5 },
{ group: "二组", item: "工作五", percent: 5 },
];

const chart = new Chart({ container: "container", width: 1200, height: 400 });
const spaceFlex = chart.spaceFlex();

spaceFlex
.interval()
.style({ stroke: 'white' })
.coordinate({ type: "theta" })
.title({ title: '一组工作情况', align: 'center' })
.data(data.filter((item) => item.group === "一组"))
.transform({ type: "stackY" })
.encode("y", "percent")
.encode("color", "item")
.label({ position: "outside", text: (d) => `${d.item}: ${d.percent}%` })
.legend({ color: { position: "bottom", layout: { justifyContent: "center" } } });

spaceFlex
.interval()
.style({ stroke: 'white' })
.coordinate({ type: "theta" })
.title({ title: '二组工作情况', align: 'center' })
.data(data.filter((item) => item.group === "二组"))
.transform({ type: "stackY" })
.encode("y", "percent")
.encode("color", "item")
.label({ position: "outside", text: (d) => `${d.item}: ${d.percent}%` })
.legend({ color: { position: "bottom", layout: { justifyContent: "center" } } });

chart.render();
```

渲染完后:
Image

随便点击一下图例后:
Image

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

Open the contributing guide

Research direction

Start with the provided G2 composite-chart reproduction using two pie charts and inspect the legend interaction behavior after rendering. Confirm that clicking one pie chart's legend does not affect the other chart or make its legend disappear; the issue is fixed when both legends remain independent.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.