双环型图,pielabel指向错误
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description

`import F2 from '@antv/f2';
const data = [
{ name: '芳华', percent: 0.4, type: '1' },
{ name: '妖猫传', percent: 0.2, type: '1' },
{ name: '机器之血', percent: 0.18, type: '1' },
{ name: '心理罪', percent: 0.15, type: '1' },
{ name: '寻梦环游记', percent: 0.05, type: '1' },
{ name: '其他', percent: 0.12, type: '1' },
{ name: '芳华', percent: 0.4, type: '2' },
{ name: '妖猫传', percent: 0.2, type: '2' },
{ name: '机器之血', percent: 0.18, type: '2' },
{ name: '心理罪', percent: 0.15, type: '2' },
{ name: '寻梦环游记', percent: 0.05, type: '2' },
{ name: '其他', percent: 0.12, type: '2' }
];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.legend({
position: 'right'
});
chart.tooltip(false);
chart.coord('polar', {
transposed: true,
radius: 0.8,
inner: 0.5
});
chart.axis(false);
chart.interval()
.position('type*percent')
.color('name', [
'#1890FF',
'#13C2C2',
'#2FC25B',
'#FACC14',
'#F04864',
'#8543E0'
])
.adjust('stack');
chart.legend(false);
chart.pieLabel({
sidePadding: 30,
sidePadding: 10,
inflectionOffset: 20,
lineHeight: 48,
// adjustOffset: 50,
activeShape: true,
label1: function label1(value) {
return {
text: value.percent,
fill: '#343434',
fontWeight: 'bold'
};
},
label2: function label2(value) {
return {
text: value.name,
fill: '#999'
};
}
});
chart.interaction('pie-select', {
startEvent: 'tap',
animate: {
duration: 300,
easing: 'backOut'
},
cancelable: true
});
chart.render();`
如图所示label全部指向了第一个环形图
Contributor guide
Research direction
Start with the supplied F2 reproduction, focusing on chart.pieLabel and the dual-ring interval chart created with position('type*percent'). Verify how labels are assigned when both rings share the same name values. Done means labels point to the corresponding ring rather than all pointing to the first ring, with the reproduction still rendering correctly.
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
- Clearly specified
- Newbie friendliness
- 35/100