[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();
```
渲染完后:
随便点击一下图例后:
### Version / 版本
🆕 5.x
### OS / 操作系统
- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor 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