Skip to content

Commit c4c4f36

Browse files
mingchengBQXBQXyayeahustcceleliauk
authored
docs: 改造「核心概念 - 转换（Transform）- symmetryY」文档 (#6748)
* docs: enhance symmetryY transform documentation 📚 - Add usage scenarios with examples - Include a table of common application scenarios - Update configuration options and examples - Add FAQ section with example code for symmetric bar chart * docs: 改造「核心概念 - 标记（Mark）- shape」文档 (#6667) (#6740) * docs: update transform.diffY (#6729) * docs: update transform.diffY * docs: update code review * docs: 改造文档「核心概念 - 转换（Transform）- normalizeY (#6727) * docs: 更新 normalizeY 文档，增加使用场景和配置项说明 * docs: 更新 normalizeY 文档，增加配置项说明和示例 * docs: 更新 normalizeY 文档，修复YAML 前置标记 * docs: update wordcloud doc (#6734) Co-authored-by: chenying <cy01387976@antgroup.com> * fix: element event error (#6750) * docs: enhance symmetryY transform documentation 📚 - Add usage scenarios with examples - Include a table of common application scenarios - Update configuration options and examples - Add FAQ section with example code for symmetric bar chart --------- Co-authored-by: bqxbqx <132878537+BQXBQX@users.noreply.github.com> Co-authored-by: yayea <111431640+yayea@users.noreply.github.com> Co-authored-by: hustcc <i@hust.cc> Co-authored-by: 梦想跟老登一样厉害 <148364842+eleliauk@users.noreply.github.com> Co-authored-by: Orcish-Y <orcish.y@gmail.com> Co-authored-by: chenying <cy01387976@antgroup.com>
1 parent f60963d commit c4c4f36

File tree

1 file changed

+147
-53
lines changed

1 file changed

+147
-53
lines changed

‎site/docs/manual/core/transform/symmetryY.zh.md‎

Lines changed: 147 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,174 @@ title: symmetryY
33
order: 2
44
---
55

6+
## 概述
7+
68
按照指定通道分组，给每组的 y 和 y1 通道添加偏移，实现对称效果。
79

8-
## 开始使用
10+
## 使用场景
911

10-
<img alt="symmetryY" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Vf-FQZH-5FMAAAAAAAAAAAAADmJ7AQ/original" width="600" />
12+
symmetry y（Y轴对称）通常用于强调或突出数据的对称性、对比或镜像关系。以下是常见的应用场景，结合图表类型和实际案例来说明：
13+
`
14+
| **场景** | **图表类型** | **说明** | **示例** |
15+
| ---------------- | ---------------- | --------------------------------------------------------------- | ---------------------- |
16+
| **对比两组数据** | 柱状图、条形图 | 两组数据分别显示在Y轴两侧，直观展示对比差异（如A/B测试结果）。 | 男性 vs 女性收入分布 |
17+
| **镜像关系分析** | 折线图、面积图 | 数据围绕Y轴对称分布，展示正负关联（如收益与亏损、进出口平衡）。 | 公司月度盈利与亏损对比 |
18+
| **对称分布验证** | 箱线图、小提琴图 | 检查数据是否对称分布（如正态分布检验）。 | 身高/体重的对称性分析 |
19+
| **双向偏差展示** | 误差条形图 | 同时显示正向和负向偏差（如预测值与实际值的差异）。 | 天气预报误差范围 |
1120

12-
```ts
13-
import { Chart } from '@antv/g2';
21+
### 用途总结
22+
1. **对比分析**：快速识别两组数据的差异或相似性。
23+
2. **对称验证**：检验数据是否符合对称分布（如正态性）。
24+
3. **双向表达**：同时展示正向和负向趋势（如盈亏、误差）。
25+
4. **自然规律可视化**：揭示自然界或科学中的对称现象（如物理、生物）。
1426

15-
const chart = new Chart({
16-
container: 'container',
17-
});
27+
## 配置项
1828

19-
chart.data({
20-
type: 'fetch',
21-
value: 'https://assets.antv.antgroup.com/g2/unemployment-by-industry.json',
22-
transform: [{
23-
type: 'map',
24-
callback: (d) => ({
25-
...d,
26-
date: new Date(d.date),
27-
})
28-
}],
29-
});
29+
| 属性 | 描述 | 类型 | 默认值 |
30+
| ------- | ---------------------------------------------------------------- | -------------------- | ------ |
31+
| groupBy | 指定分组通道，可以是单个通道名称、也可以是多个通道（字符串数组） | `string \| string[]` | `x` |
3032

31-
chart
32-
.area()
33-
.transform({ type: 'stackY' })
34-
.transform({ type: 'symmetryY' })
35-
.encode('x', 'date')
36-
.encode('y', 'unemployed')
37-
.encode('color', 'industry');
33+
### groupBy
3834

39-
chart.render();
35+
在 `symmetryY` 执行的时候，需要将数据进行分组，在每个分组中执行 `symmetryY` 的计算逻辑。比如对于面积图，需要把同一个 x 值下的 y 数据变成一个组，然后在组内做最大最小值的处理逻辑，所以 `groupBy` 设置为 `x` 通道。
36+
37+
理论上，`groupBy` 可以设置为所有的通道值，具体可以参考 [encode](/manual/core/encode) 文档。所有的枚举值如下：
38+
39+
```ts
40+
export type ChannelTypes =
41+
| 'x'
42+
| 'y'
43+
| 'z'
44+
| 'x1'
45+
| 'y1'
46+
| 'series'
47+
| 'color'
48+
| 'opacity'
49+
| 'shape'
50+
| 'size'
51+
| 'key'
52+
| 'groupKey'
53+
| 'position'
54+
| 'series'
55+
| 'enterType'
56+
| 'enterEasing'
57+
| 'enterDuration'
58+
| 'enterDelay'
59+
| 'updateType'
60+
| 'updateEasing'
61+
| 'updateDuration'
62+
| 'updateDelay'
63+
| 'exitType'
64+
| 'exitEasing'
65+
| 'exitDuration'
66+
| 'exitDelay'
67+
| `position${number}`;
4068
```
4169

42-
## 选项
70+
## 示例
4371

44-
| 属性 | 描述 | 类型 | 默认值 |
45-
|-------------------|------------------------------------------------|-----------------------------------|-----------------------|
46-
| groupBy | 指定分组通道 | `string \| string[]` | `x` |
72+
以下是简单的示例代码，用请注意 `.transform({ type: 'symmetryY' })` 转换以及对比对应的输出：
73+
74+
```ts
75+
import { Chart } from "@antv/g2";
76+
77+
const chart = new Chart({ container: "container" });
78+
79+
chart.options({
80+
type: "area",
81+
data: {
82+
type: "fetch",
83+
value: "https://assets.antv.antgroup.com/g2/unemployment-by-industry.json",
84+
transform: [
85+
{
86+
type: "map",
87+
callback: (d) => ({
88+
...d,
89+
date: new Date(d.date),
90+
}),
91+
},
92+
],
93+
},
94+
encode: { x: "date", y: "unemployed", color: "industry" },
95+
transform: [{ type: "stackY" }, { type: "symmetryY" }],
96+
});
97+
98+
chart.render();
99+
```
47100

48-
## FAQ
101+
以上的代码就能得到渲染对应的图：
49102

50-
- 怎么绘制一个对称的条形图？
103+
<img alt="symmetryY" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Vf-FQZH-5FMAAAAAAAAAAAAADmJ7AQ/original" width="600" />
51104

52-
同样的，使用这个 transform 即可，如下：
105+
同时，怎么绘制一个对称的条形图？同样的，使用这个 transform 即可，如下：
53106

54107
```ts
55-
import { Chart } from '@antv/g2';
108+
import { Chart } from "@antv/g2";
56109

57-
const chart = new Chart({
58-
container: 'container',
110+
const chart = new Chart({ container: "container" });
111+
112+
chart.options({
113+
type: "interval",
59114
width: 800,
60115
height: 300,
116+
data: [
117+
{ x: "A", y: 100 },
118+
{ x: "B", y: 200 },
119+
{ x: "C", y: 300 },
120+
{ x: "D", y: 250 },
121+
],
122+
encode: { x: "x", y: "y", color: "x" },
123+
transform: [{ type: "stackY" }, { type: "symmetryY" }],
124+
scale: { x: { padding: 0.5 } },
125+
coordinate: { transform: [{ type: "transpose" }] },
126+
legend: false,
61127
});
62128

63-
chart.coordinate({ transform: [{ type: 'transpose' }] });
64-
65-
chart
66-
.interval()
67-
.data([
68-
{ x: 'A', y: 100 },
69-
{ x: 'B', y: 200 },
70-
{ x: 'C', y: 300 },
71-
{ x: 'D', y: 250 },
72-
])
73-
.transform({ type: 'stackY' })
74-
.transform({ type: 'symmetryY' })
75-
.encode('x', 'x')
76-
.encode('y', 'y')
77-
.encode('color', 'x')
78-
.scale('x', { padding: 0.5 })
79-
.legend(false);
129+
chart.render();
130+
```
131+
132+
请注意最后 `.transform({ type: 'symmetryY' })` 的转换函数。
133+
134+
### 漏斗图
135+
136+
symmetryY 还有个比较重要的一个应用场景是[漏斗图](https://g2.antv.antgroup.com/examples/general/funnel/#funnel)（[对比漏斗图](https://g2.antv.antgroup.com/examples/general/funnel/#mirror-funnel)、[转化漏斗图](https://g2.antv.antgroup.com/examples/general/funnel/#funnel-annotation)）、[金字塔图](https://g2.antv.antgroup.com/examples/general/funnel/#pyramid)，用于展现数据的转化以及结果的呈现。例如，比较典型的漏斗图展现如下：
137+
138+
<img alt="symmetryY" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-mJbR6QvImkAAAAAAAAAAAAAemJ7AQ/fmt.webp" width="600" />
139+
140+
对应的示例代码为：
141+
142+
```ts
143+
import { Chart } from "@antv/g2";
144+
145+
const chart = new Chart({ container: "container" });
146+
147+
chart.options({
148+
type: "interval",
149+
autoFit: true,
150+
data: [
151+
{ action: "浏览网站", pv: 50000 },
152+
{ action: "放入购物车", pv: 35000 },
153+
{ action: "生成订单", pv: 25000 },
154+
{ action: "支付订单", pv: 15000 },
155+
{ action: "完成交易", pv: 8000 },
156+
],
157+
encode: { x: "action", y: "pv", color: "action", shape: "funnel" },
158+
transform: [{ type: "symmetryY" }],
159+
scale: { x: { padding: 0 } },
160+
coordinate: { transform: [{ type: "transpose" }] },
161+
animate: { enter: { type: "fadeIn" } },
162+
axis: false,
163+
labels: [
164+
{
165+
text: (d) => `${d.action}\
166+
${d.pv}`,
167+
position: "inside",
168+
transform: [{ type: "contrastReverse" }],
169+
},
170+
],
171+
});
80172

81173
chart.render();
82174
```
175+
176+
具体更多的案例，可以参考以上提供的图表示例页面链接。

0 commit comments

Comments
 (0)