antvis / antvis/G2Plot

🐛 [BUG] 堆叠条形图和堆叠柱形图设置样式lineCap='round'时,图形显示不正确

Open
#3,152 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

官网示例代码添加属性,即可复现

条形图:https://antv-g2plot.gitee.io/zh/examples/bar/stacked#basic
```diff
const stackedBarPlot = new Bar('container', {
data: data.reverse(),
isStack: true,
xField: 'value',
yField: 'year',
seriesField: 'type',
+ barStyle:{
+ lineCap: 'round',
+ },
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'left', 'middle', 'right'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
});

stackedBarPlot.render();

```
柱形图:https://antv-g2plot.gitee.io/zh/examples/column/stacked#basic
```diff
fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
.then((data) => data.json())
.then((data) => {
const stackedColumnPlot = new Column('container', {
- data,
+ data:data.map((d,i) => ({...d, value: i})),
isStack: true,
xField: 'year',
yField: 'value',
seriesField: 'type',
+ columnStyle: {
+ lineCap: 'round',
+ },
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
});

stackedColumnPlot.render();
});
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue using the stacked bar and stacked column examples linked in the report, adding the shown barStyle or columnStyle with lineCap set to round. Start from the Bar and Column configuration entry points and trace stacked interval rendering. Done means both stacked charts display correctly with rounded line caps.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
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.