antvis / antvis/G2Plot

🐛 [BUG]饼图具有相同的 colorField 的数据,在启用 pie-legend-active 交互时会报 Cannot read properties of undefined (reading 'setMatrix')

Open
#3,861 0 comments 0 reactions 0 assignees View on GitHub
Bug
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Bug description [Please make everyone to understand it]
指定的 colorField 在 data 中有相同的值时,鼠标移入 legend 触发 pie-legend-active 交互则会报错
https://stackblitz.com/edit/vitejs-vite-tonau9rh?file=src%2FPieComponent.tsx

### 📷 Step to reproduce

```
import { useEffect, useRef } from 'react';
import { Pie } from '@antv/g2plot';

export default function PieComponent() {
const ref = useRef(null);
const pie = useRef(null);

useEffect(() => {
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
if (ref.current) {
const piePlot = new Pie(ref.current, {
appendPadding: 10,
data,
angleField: 'value',
colorField: 'country',
radius: 0.8,
label: {
type: 'outer',
content: '{name} {percentage}',
},
interactions: [
{ type: 'pie-legend-active' },
{ type: 'element-active' },
],
});
piePlot.render();
pie.current = piePlot;
}

return () => {
if (pie.current) {
pie.current.destroy();
pie.current = null;
}
};
}, []);
return

;
}

```
鼠标移入饼图的 legend 上会报 `TypeError: Cannot read properties of undefined (reading 'setMatrix')`

![Image](https://github.com/user-attachments/assets/bbb054bd-a1f0-4d1b-9725-096cc61619d8)

同时 label 也没有内容

![Image](https://github.com/user-attachments/assets/53908809-6594-41eb-9289-60d006e182d3)

### 🏞 Expected result

不报错且有正常显示的 label
### 🚑 Any additional [like screenshots]

* **G2Plot Version**: 2.4.33
* **Platform**: chrome

Contributor guide

Open the contributing guide

Research direction

Start with the reproducible example in src/PieComponent.tsx from the linked StackBlitz project, using G2Plot 2.4.33 in Chrome. Reproduce the error by hovering the pie legend with duplicate colorField values, then inspect the pie-legend-active interaction. Done means no setMatrix error occurs and the labels display normally.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.