数据较多时饼图线条显示不完整
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description

```
import F2 from '@antv/f2';
const data = [{"fanAreaValue":24,"fanAreaValueDesc":"24.00%","fanAreaDesc":"IT、互联网","const":"const"},{"fanAreaValue":10,"fanAreaValueDesc":"10.00%","fanAreaDesc":"公务员","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"医护人员","const":"const"},{"fanAreaValue":3,"fanAreaValueDesc":"3.00%","fanAreaDesc":"外卖员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"学生","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"房产中介","const":"const"},{"fanAreaValue":5,"fanAreaValueDesc":"5.00%","fanAreaDesc":"教育科研","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"服务人员","const":"const"},{"fanAreaValue":15,"fanAreaValueDesc":"15.00%","fanAreaDesc":"网约车司机","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"自媒体从业人员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"蓝领工人","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"设计师","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"货运司机","const":"const"}]
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.coord('polar', {
transposed: true,
radius: 0.9,
innerRadius: 0.5
});
chart.axis(false);
chart.legend(false);
chart.tooltip(false);
chart.guide()
.html({
position: [ '50%', '50%' ],
html: '
});
chart.interval()
.position('const*fanAreaValue')
.adjust('stack')
.color('fanAreaDesc', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]);
chart.pieLabel({
sidePadding: 30,
activeShape: true,
label1: function label1(data) {
return {
text: data.fanAreaValueDesc,
fill: '#343434',
fontWeight: 'bold'
};
},
label2: function label2(data) {
return {
text: data.fanAreaDesc,
fill: '#999'
};
},
onClick: function onClick(ev) {
const data = ev.data;
if (data) {
$('#title').text(data.type);
$('#money').text(data.money);
}
}
});
chart.render();
```
根据官网例子改写数据后, 显示出bug
Contributor guide
Research direction
Reproduce the issue with the provided F2.Chart setup and data, focusing first on chart.pieLabel() and chart.render(). Inspect how pie-label connector lines are laid out when many slices and labels are present. Done means all expected pie-chart lines render completely for this dataset without breaking the existing label behavior.
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