antvis / antvis/F2

数据较多时饼图线条显示不完整

Open
#1,204 3 comments 1 reaction 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/50546350/130952408-1482fbe3-c1dc-49bd-b89b-d24264e63ebd.png)

```
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: '

\n

\n

\n
'
});
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.