antvis / antvis/G2Plot

🐛 [BUG]双轴折线图在特定数据情况下, Y轴没有贴着容器

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

### 🐛 Bug description [Please make everyone to understand it]

> Please provide a link by forking these links [G2Plot](https://codesandbox.io/s/g2plot-issue-template-gzfdq?file=/index.ts) or GitHub repo, a minimal reproduction.

![demo6](https://user-images.githubusercontent.com/30228406/185575329-b6d5b7eb-e9c5-42fe-9607-d69721832fcc.gif)

在这个[官方案例](https://g2plot.antv.vision/zh/examples/dual-axes/dual-line#dual-line)当中, 把下面的代码换成我给的这份
```tsx
import { DualAxes } from '@antv/g2plot';

const data2 = [
{
group: "当前库存",
value: 66622,
xField: "华东5仓",
valueRight: 66622,
},
{
group: "当前库存",
value: 8891,
xField: "华东3仓",
valueRight: 8891,
},
{
group: "当前库存",
value: 8882,
xField: "华东8仓",
valueRight: 8882,
},
{
group: "当前库存",
value: 6661,
xField: "华东1仓",
valueRight: 6661,
},
{
group: "当前库存",
value: 6611,
xField: "华东2仓",
valueRight: 6611,
},
{
group: "当前库存",
value: 2344,
xField: "华东6仓",
valueRight: 2344,
},
{
group: "当前库存",
value: 2311,
xField: "华东4仓",
valueRight: 2311,
},
{
group: "当前库存",
value: 222,
xField: "华东7仓",
valueRight: 222,
},
{
group: "当前库存",
value: 66,
xField: "名称很长名称很长名称很长名称很长名称很长名称很长名称很长名称很长名称很长名称很长名称很长",
valueRight: 66,
},
];

const dualAxes = new DualAxes('container', {
"data": [
[],
data2
],
"xField": "xField",
"yField": [
"value",
"valueRight"
],
"geometryOptions": [
{
"geometry": "column",
"isGroup": true,
"seriesField": "group",
},
{
"geometry": "line",
"isGroup": true,
"seriesField": "group",
}
],
});

dualAxes.render();

```

经过反复测试对比, 当X轴中某个维度字段特别长时才会出现这个问题.

* _Required_ **Link to minimal reproduction**:

### 📷 Step to reproduce

### 🏞 Expected result

### 🚑 Any additional [like screenshots]

* **G2Plot Version**:
* **Platform**:

Contributor guide

Open the contributing guide

Research direction

Start with the official DualAxes dual-line example and replace its data with the supplied TypeScript reproduction. Inspect the chart layout behavior when an xField label is very long, especially the Y-axis position relative to the container. Done means the Y-axis remains flush with the container for this reproduction without breaking the dual-axis chart.

Written by the indexing model from the issue text.

Assessment

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