antvis / antvis/G2

「BUG AntV G2」柱状图加折线图的双轴图中会出现无数据图形占位

Open
#6,308 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

我需要有一张双柱形图+折线图+双坐标轴的chart。
在我把数据处理好传入后发现刻度没有对准中间区域,我以为是柱形图画歪了,仔细检查过后发现其实是存在了一个空数据的柱形图绘制在了坐标轴中:期望为「销售金额」「指标金额」两个柱形图,实际上多了一个未知柱形图。

数据为
```
const TrendChartData = [
{
year: '202401',
name: '销售金额',
amount: 69000000
},
{
year: '202401',
name: '指标金额',
amount: 55000000
},
{
year: '202401',
rateType: '达成率',
rate: 1.3
},
{
year: '202401',
rateType: '同比',
rate: 0.01
},
{
year: '202401',
rateType: '环比',
rate: 0.9
},
{
year: '202402',
name: '销售金额',
amount: 70000000
},
{
year: '202402',
name: '指标金额',
amount: 60000000
},
{
year: '202402',
rateType: '达成率',
rate: 1.3
},
{
year: '202402',
rateType: '同比',
rate: 0.01
},
{
year: '202402',
rateType: '环比',
rate: 1
},
{
year: '202403',
name: '销售金额',
amount: 75000000
},
{
year: '202403',
name: '指标金额',
amount: 65000000
},
{
year: '202403',
rateType: '达成率',
rate: 1.2
},
{
year: '202403',
rateType: '同比',
rate: 0.07
},
{
year: '202403',
rateType: '环比',
rate: 0.8
},
{
year: '202404',
name: '销售金额',
amount: 76000000
},
{
year: '202404',
name: '指标金额',
amount: 70000000
},
{
year: '202404',
rateType: '达成率',
rate: 1.1
},
{
year: '202404',
rateType: '同比',
rate: 0.01
},
{
year: '202404',
rateType: '环比',
rate: 1.1
},
{
year: '202405',
name: '销售金额',
amount: 77000000
},
{
year: '202405',
name: '指标金额',
amount: 75000000
},
{
year: '202405',
rateType: '达成率',
rate: 1.0
},
{
year: '202405',
rateType: '同比',
rate: 0.01
},
{
year: '202405',
rateType: '环比',
rate: 0.9
},
{
year: '202406',
name: '销售金额',
amount: 78000000
},
{
year: '202406',
name: '指标金额',
amount: 80000000
},
{
year: '202406',
rateType: '达成率',
rate: 0.9
},
{
year: '202406',
rateType: '同比',
rate: 0.01
},
{
year: '202406',
rateType: '环比',
rate: 1.2
}
]
```
chart代码按照逻辑来的
```
...
// 柱状图
chart.scale('amount', {
nice: true,
min: 0,
formatter: (val) => {
// 按照千分位格式化加上逗号
if (val == null) {
return;
} else {
return `${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
}
});
chart
.interval()
.position('year*amount')
.color('name', (field) => {
if (!field) {
return;
}
return _nameColor[field];
})
.adjust({
type: 'dodge',
marginRatio: 0.1
});
// 折线图
this.chart.scale('rate', {
nice: true,
min: 0,
formatter: (val) => {
if (val == null) {
return;
} else {
return val;
}
}
});

this.chart
.line()
.position('year*rate')
.color('rateType', (field) => {
if (!field) {
return;
}
return _lineColor[field];
})
.label('rateType', (field) => {
if (!field) {
return;
}

return {
content: (obj) => {
return obj.rate;
},
style: {
fill: _labelColor[field]
}
};
})
.shape('line');
...
```

### 重现链接

_No response_

### 重现步骤

在绘制charts的时候传入的data是两种数据的混合,即又描述了柱形图又描述了折线图就会出现空数据占位图形。

### 预期行为

我希望不显示这个空的柱子。

### 平台

- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]

### 屏幕截图或视频(可选)

image
在官网中的例子,在我本地的例子
image

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the mixed-data configuration shown for interval().position('year*amount') and line().position('year*rate'), focusing on how the shared data is consumed by the interval geometry. Reproduce the chart with the provided TrendChartData and verify that only the two named amount series produce bars, with no empty placeholder bar.

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.