antvis / antvis/G2

图例文本省略混乱

Open
#5,935 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

在绘制如下两条折线图的时候,图例'Tokyo'的文本会被部分省略,而'London'没有被省略。此外,'Tokyo '(插入空格)、'Tokyx'、'Tokyoo'不会被省略。
![image](https://github.com/antvis/G2/assets/96937007/4bc30d00-7e1f-42d4-9934-98f2c24ac5dd)

### 重现链接

https://codesandbox.io/p/sandbox/bug-legend-xh6vwx

### 重现步骤

```Javascript
import { Chart } from '@antv/g2';

const data = [
{ month: 'Jan', city: 'Tokyo', temperature: 7 },
{ month: 'Jan', city: 'London', temperature: 3.9 },
{ month: 'Feb', city: 'Tokyo', temperature: 6.9 },
{ month: 'Feb', city: 'London', temperature: 4.2 },
{ month: 'Mar', city: 'Tokyo', temperature: 9.5 },
{ month: 'Mar', city: 'London', temperature: 5.7 },
{ month: 'Apr', city: 'Tokyo', temperature: 14.5 },
{ month: 'Apr', city: 'London', temperature: 8.5 },
{ month: 'May', city: 'Tokyo', temperature: 18.4 },
{ month: 'May', city: 'London', temperature: 11.9 },
{ month: 'Jun', city: 'Tokyo', temperature: 21.5 },
{ month: 'Jun', city: 'London', temperature: 15.2 },
{ month: 'Jul', city: 'Tokyo', temperature: 25.2 },
{ month: 'Jul', city: 'London', temperature: 17 },
{ month: 'Aug', city: 'Tokyo', temperature: 26.5 },
{ month: 'Aug', city: 'London', temperature: 16.6 },
{ month: 'Sep', city: 'Tokyo', temperature: 23.3 },
{ month: 'Sep', city: 'London', temperature: 14.2 },
{ month: 'Oct', city: 'Tokyo', temperature: 18.3 },
{ month: 'Oct', city: 'London', temperature: 10.3 },
{ month: 'Nov', city: 'Tokyo', temperature: 13.9 },
{ month: 'Nov', city: 'London', temperature: 6.6 },
{ month: 'Dec', city: 'Tokyo', temperature: 9.6 },
{ month: 'Dec', city: 'London', temperature: 4.8 },
];

const chart = new Chart({
container: 'container',
autoFit: true,
});

chart
.data(data)
.encode('x', 'month')
.encode('y', 'temperature')
.encode('color', 'city')
.scale('x', {
range: [0, 1],
})
.scale('y', {
nice: true,
})
.axis('y', { labelFormatter: (d) => d + '°C' });

chart.line().encode('shape', 'smooth');

chart.point().encode('shape', 'point').tooltip(false);

chart.render();

```

### 预期行为

期望看到两个图例的文本能够被完整地显示出来,而不被省略

### 平台

- 操作系统: Windows
- 网页浏览器: Google Chrome, Microsoft Edge

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

_No response_

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and the Chart entry point, focusing on how the generated legend labels are measured and truncated. Verify the behavior with the Tokyo and London data, then confirm that both labels remain fully visible and that the existing reproduction no longer shows inconsistent omission.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.