antvis / antvis/F2

双环型图,pielabel指向错误

Open
#901 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8k
Forks
637
PR merge metrics
No merged PRs in 30d

Description

![image](https://user-images.githubusercontent.com/25792077/83235815-0e5fa580-a1c5-11ea-8da9-1bd697a85957.png)

`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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.