antvis / antvis/G2Plot

🐛 [BUG] 「折线图」组件高度的变化,导致label显示有问题

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

问题描述进一步细化:使用当前用例数据,组件高度的变化,会导致label显示有问题,截图如下
测试地址: https://stackblitz.com/edit/react-nxqldi?file=src/index.js
期望效果( height: 200 ):
![image](https://user-images.githubusercontent.com/21041458/168547431-da8926cb-2006-45c1-ac8b-4ae783846bd8.png)

高度变化后的效果( height: 500 ):
![image](https://user-images.githubusercontent.com/21041458/168547464-18e13053-e03d-4bfb-8d50-d3f1013d328d.png)

高度变化后的效果( height: 700 ):
![image](https://user-images.githubusercontent.com/21041458/168547507-55efb143-21f1-4fea-ba8a-211a77927b9e.png)

g2plot 折线图 默认Layout如下:
```js
layout: [
{ type: 'limit-in-plot' },
{ type: 'path-adjust-position' },
{ type: 'point-adjust-position' },
{ type: 'limit-in-plot', cfg: { action: 'hide' } },
],
```

合理猜测,g2中 Geometry label 这几个默认的内置布局函数,计算异常
1. pathAdjustPosition: 适用于 point geometry 的数据标签位置自动调整布局方法

[`src/geometry/label/layout/path/adjust-position.ts`](https://github.com/antvis/G2/blob/e62d824c1722fffac6973a53b0d80bd608a238f9/src/geometry/label/layout/path/adjust-position.ts#L70)

![image](https://user-images.githubusercontent.com/21041458/168547830-df3abd0c-ae4f-4506-9f35-34abf25bf3b8.png)

2. layout可以调整为 overlap、fixed-overlap ,但在当前给出的测试场景下,相对于默认的效果来说,可能这两种layout都不太能够被接受,截图如下。
default
![image](https://user-images.githubusercontent.com/21041458/168547549-a3bdac99-e219-486a-957b-d364027ccfdc.png)

fixed-overlap
![image](https://user-images.githubusercontent.com/21041458/168547581-e4417337-9251-46aa-8991-023885ec56f2.png)

overlap
![image](https://user-images.githubusercontent.com/21041458/168547623-3faff29e-f7fc-418c-8dd2-771c3382038b.png)

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect src/geometry/label/layout/path/adjust-position.ts, especially the pathAdjustPosition behavior. Reproduce the line-chart label issue at heights 200, 500, and 700, then verify that labels remain correctly positioned across those heights without unacceptable overlap.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.