Skip to content

Commit a4effad

Browse files
authored
docs: add FAQ about title rendering issues when manually setting padding (#6554)
* docs: add FAQ about title rendering issues when manually setting padding * docs: beautify FAQ document format
1 parent 05d5bcd commit a4effad

File tree

2 files changed

+102
-0
lines changed

2 files changed

+102
-0
lines changed

site/docs/manual/FAQ/index.en.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: 'Frequently Asked Questions (FAQ)'
3+
order: 4
4+
---
5+
6+
## Title Not Rendering After Manually Setting Padding
7+
8+
### Problem Description
9+
10+
When using AntV G2 to render charts, manually setting the `padding` can cause the chart title to not render properly or disappear entirely.
11+
12+
Related issue: [Title is not displayed after setting](https://github.com/antvis/G2/issues/6549)
13+
14+
### Cause Analysis
15+
16+
G2 dynamically calculates the space required for all components by default, but once a fixed `padding` value is specified, this automatic adjustment logic is skipped, which may lead to incomplete rendering of the components.
17+
18+
### Solutions
19+
20+
There are two ways to resolve this issue:
21+
22+
#### 1. Use the Default Layout (Recommended)
23+
24+
Allow G2 to automatically calculate the optimal spacing to ensure that all components are rendered correctly:
25+
26+
```javascript
27+
chart
28+
.interval()
29+
.encode('x', 'category')
30+
.encode('y', 'value')
31+
.encode('color', 'type');
32+
```
33+
34+
#### 2. Set Padding Correctly
35+
36+
If you must manually set the `padding`, make sure to reserve enough space for dynamically generated components:
37+
38+
```javascript
39+
chart
40+
.padding(50)
41+
.interval()
42+
.encode('x', 'category')
43+
.encode('y', 'value')
44+
.encode('color', 'type');
45+
```
46+
47+
### Notes
48+
49+
- When manually setting `padding`, it is recommended to debug and find the appropriate values.
50+
- Consider the space requirements for titles, legends, and other components.
51+
- If a specific layout is not required, it's better to use G2's automatic layout system.

site/docs/manual/FAQ/index.zh.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: '常见问题 FAQ'
3+
order: 4
4+
---
5+
6+
## 手动设置 Padding 后标题无法渲染
7+
8+
### 问题描述
9+
10+
在使用 AntV G2 绘制图表时,手动设置 `padding` 可能会导致图表标题无法正常显示或完全消失。
11+
12+
相关问题:[设置完 title 不显示](https://github.com/antvis/G2/issues/6549)
13+
14+
### 原因分析
15+
16+
G2 默认会动态计算所有组件所需的间距,但一旦指定了固定的 `padding` 值,这个自动调整的逻辑就会被跳过,可能导致组件显示不完整。
17+
18+
### 解决方案
19+
20+
有两种方式可以解决这个问题:
21+
22+
#### 1. 使用默认布局(推荐)
23+
24+
让 G2 自动计算最佳间距,确保所有组件正常显示:
25+
26+
```javascript
27+
chart
28+
.interval()
29+
.encode('x', 'category')
30+
.encode('y', 'value')
31+
.encode('color', 'type');
32+
```
33+
34+
#### 2. 正确设置 Padding
35+
36+
如果确实需要手动设置 `padding`,请确保为动态生成的组件预留足够空间:
37+
38+
```javascript
39+
chart
40+
.padding(50)
41+
.interval()
42+
.encode('x', 'category')
43+
.encode('y', 'value')
44+
.encode('color', 'type');
45+
```
46+
47+
### 注意事项
48+
49+
- 手动设置 `padding` 时,建议通过调试确定合适的数值
50+
- 需要考虑标题、图例等组件的空间需求
51+
- 在不需要特定布局时,优先使用 G2 的自动布局功能

0 commit comments

Comments
 (0)