Skip to content

Commit c9245ee

Browse files
zhangzhonghezhangzhonghe
authored
docs(word-cloud): 添加词云图文档和demo (#1571)
* docs(word-cloud): 添加词云图文档和demo * docs: remove autoFit option * docs: 示例autoFit选项设为false
1 parent 4663b95 commit c9245ee

File tree

13 files changed

+351
-2
lines changed

13 files changed

+351
-2
lines changed

‎__tests__/unit/plots/word-cloud/style-spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ describe('word-cloud', () => {
2424

2525
data.forEach((item: DataItem) => {
2626
// DataSet 处理之后会多出两个无用的数据
27-
if (!item.text) return;
27+
if (!item.hasText) return;
2828

2929
// 字体
3030
expect(item.font).toBe('Impact');

‎examples/word-cloud/basic/API.en.md

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
title: API
3+
---
4+
5+
## 配置属性
6+
7+
### 图表容器
8+
9+
`markdown:common/chart-options.en.md`
10+
11+
### 数据映射
12+
13+
#### data 📌
14+
15+
**必选**, _array object_
16+
17+
功能描述： 设置图表数据源
18+
19+
默认配置： 无
20+
21+
数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
22+
23+
#### wordField
24+
25+
**必选**, _string_
26+
27+
功能描述： 单词内容在数据中所对应的字段名
28+
29+
默认配置： 无
30+
31+
#### weightField
32+
33+
**必选**, _string_
34+
35+
功能描述： 单词所占权重在数据中所对应的字段名
36+
37+
默认配置： 无
38+
39+
#### imageMask
40+
41+
**可选**, _HTMLImageElement_
42+
43+
功能描述： 设置一张图片，然后图表就可以根据该图片的形状进行渲染，必须是已加载完成的图片对象
44+
45+
默认配置： 无
46+
47+
#### timeInterval
48+
49+
**可选**, _number_
50+
51+
功能描述： 设置绘制程序最大的执行时间，单位毫秒，如果时间设置过短可能会只绘制一部分词语
52+
53+
默认配置：2000
54+
55+
#### wordStyle
56+
57+
**可选**, _object_
58+
59+
功能描述： 设置每个词语的样式
60+
61+
默认配置： 无
62+
63+
| 细分配置 | 类型 | 默认值 | 功能描述 |
64+
| ------------- | ---------- | ---------------- | ---------------------- |
65+
| fontFamily | _string \| function_ | 'Verdana' | 词云的字体 |
66+
| fontWeight | _string \| number \| function_ | 'normal' | 设置字体的粗细 |
67+
| padding | _number \| function_ | 1 | 每个单词所占的盒子的内边距，默认为 1。 越大单词之间的间隔越大。|
68+
| fontSize | _number[] \| function_ | [20, 60] | 字体的大小范围，比如 [10, 20] 表示最小字体是 10，最大 20 |
69+
| rotation | _number[]_ | [0, 90] | 旋转的最小角度和最大角度 默认 [0, 90] |
70+
| rotationSteps | _number_ | 2 | 旋转实际的步数,越大可能旋转角度越小, 默认是 2 |
71+
| rotateRatio | _number_ | 0.5 | 旋转的比率 [0, 1]，默认是 0.5 也就是 50%可能发生旋转 |
72+
73+
以上，某些属性可以设置为一个函数，其函数的参数是一个`object`，其属性如下
74+
75+
| 细分配置 | 类型 | 功能描述 |
76+
| -------- | ------------------------------------- | --------------------------------------------------- |
77+
| text | _string_ | 文本内容 |
78+
| value | _number_ | 该文本所占权重 |
79+
| font | _string_ | 字体 |
80+
| style | _"normal" \| "italic" \| "oblique"_ | 字体样式 |
81+
| weight | _number \| string_ | 文本粗细 |
82+
| rotate | _number_ | 旋转角度 |
83+
| size | _number_ | 字体大小 |
84+
| padding | _number_ | 一个单词所占的盒子的内边距，值越大单词之间的间隔越大 |
85+
| hasText | _boolean_ | 是否包含文本 |
86+
| width | _number_ | 单词所占盒子的宽度 |
87+
| height | _number_ | 单词所占盒子的高度 |
88+
| x | _number_ | x 轴坐标 |
89+
| y | _number_ | y 轴坐标 |
90+
91+
`markdown:common/meta.en.md`
92+
93+
### 图形样式
94+
95+
`markdown:common/color.en.md`
96+
97+
### tooltip
98+
99+
`markdown:common/tooltip.en.md`
100+
101+
### axis
102+
103+
xAxis、yAxis 配置相同。
104+
105+
`markdown:common/axis.en.md`
106+
107+
### legend
108+
109+
`markdown:common/legend.en.md`
110+
111+
### theme
112+
113+
`markdown:common/theme.en.md`
114+
115+
### 事件
116+
117+
`markdown:common/events.en.md`
118+
119+
#### 图表方法
120+
121+
`markdown:common/chart-methods.en.md`

‎examples/word-cloud/basic/API.zh.md

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
title: API
3+
---
4+
5+
## 配置属性
6+
7+
### 图表容器
8+
9+
`markdown:common/chart-options.zh.md`
10+
11+
### 数据映射
12+
13+
#### data 📌
14+
15+
**必选**, _array object_
16+
17+
功能描述： 设置图表数据源
18+
19+
默认配置： 无
20+
21+
数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
22+
23+
#### wordField
24+
25+
**必选**, _string_
26+
27+
功能描述： 单词内容在数据中所对应的字段名
28+
29+
默认配置： 无
30+
31+
#### weightField
32+
33+
**必选**, _string_
34+
35+
功能描述： 单词所占权重在数据中所对应的字段名
36+
37+
默认配置： 无
38+
39+
#### imageMask
40+
41+
**可选**, _HTMLImageElement_
42+
43+
功能描述： 设置一张图片，然后图表就可以根据该图片的形状进行渲染，必须是已加载完成的图片对象
44+
45+
默认配置： 无
46+
47+
#### timeInterval
48+
49+
**可选**, _number_
50+
51+
功能描述： 设置绘制程序最大的执行时间，单位毫秒，如果时间设置过短可能会只绘制一部分词语
52+
53+
默认配置：2000
54+
55+
#### wordStyle
56+
57+
**可选**, _object_
58+
59+
功能描述： 设置每个词语的样式
60+
61+
默认配置： 无
62+
63+
| 细分配置 | 类型 | 默认值 | 功能描述 |
64+
| ------------- | ---------- | ---------------- | ---------------------- |
65+
| fontFamily | _string \| function_ | 'Verdana' | 词云的字体 |
66+
| fontWeight | _string \| number \| function_ | 'normal' | 设置字体的粗细 |
67+
| padding | _number \| function_ | 1 | 每个单词所占的盒子的内边距，默认为 1。 越大单词之间的间隔越大。|
68+
| fontSize | _number[] \| function_ | [20, 60] | 字体的大小范围，比如 [10, 20] 表示最小字体是 10，最大 20 |
69+
| rotation | _number[]_ | [0, 90] | 旋转的最小角度和最大角度 默认 [0, 90] |
70+
| rotationSteps | _number_ | 2 | 旋转实际的步数,越大可能旋转角度越小, 默认是 2 |
71+
| rotateRatio | _number_ | 0.5 | 旋转的比率 [0, 1]，默认是 0.5 也就是 50%可能发生旋转 |
72+
73+
以上，某些属性可以设置为一个函数，其函数的参数是一个`object`，其属性如下
74+
75+
| 细分配置 | 类型 | 功能描述 |
76+
| -------- | ------------------------------------- | --------------------------------------------------- |
77+
| text | _string_ | 文本内容 |
78+
| value | _number_ | 该文本所占权重 |
79+
| font | _string_ | 字体 |
80+
| style | _"normal" \| "italic" \| "oblique"_ | 字体样式 |
81+
| weight | _number \| string_ | 文本粗细 |
82+
| rotate | _number_ | 旋转角度 |
83+
| size | _number_ | 字体大小 |
84+
| padding | _number_ | 一个单词所占的盒子的内边距，值越大单词之间的间隔越大 |
85+
| hasText | _boolean_ | 是否包含文本 |
86+
| width | _number_ | 单词所占盒子的宽度 |
87+
| height | _number_ | 单词所占盒子的高度 |
88+
| x | _number_ | x 轴坐标 |
89+
| y | _number_ | y 轴坐标 |
90+
91+
`markdown:common/meta.zh.md`
92+
93+
### 图形样式
94+
95+
`markdown:common/color.zh.md`
96+
97+
### tooltip
98+
99+
`markdown:common/tooltip.zh.md`
100+
101+
### axis
102+
103+
xAxis、yAxis 配置相同。
104+
105+
`markdown:common/axis.zh.md`
106+
107+
### legend
108+
109+
`markdown:common/legend.zh.md`
110+
111+
### theme
112+
113+
`markdown:common/theme.zh.md`
114+
115+
### 事件
116+
117+
`markdown:common/events.zh.md`
118+
119+
#### 图表方法
120+
121+
`markdown:common/chart-methods.zh.md`

‎examples/word-cloud/basic/demo/basic.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { WordCloud } from '@antv/g2plot';
2+
3+
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world-population.json')
4+
.then((res) => res.json())
5+
.then((data) => {
6+
const wordCloud = new WordCloud('container', {
7+
data,
8+
width: 600,
9+
height: 500,
10+
autoFit: false,
11+
wordField: 'x',
12+
weightField: 'value',
13+
color: '#6262ff',
14+
wordStyle: {
15+
fontFamily: 'Verdana',
16+
fontSize: [24, 80],
17+
},
18+
});
19+
20+
wordCloud.render();
21+
});

‎examples/word-cloud/basic/demo/image-mask.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { WordCloud } from '@antv/g2plot';
2+
3+
const imageMask = new Image();
4+
imageMask.crossOrigin = '';
5+
imageMask.src = 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*07tdTIOmvlYAAAAAAAAAAABkARQnAQ';
6+
7+
// 等待图片加载完成
8+
imageMask.onload = () => {
9+
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json')
10+
.then((res) => res.json())
11+
.then((data) => {
12+
const wordCloud = new WordCloud('container', {
13+
data,
14+
// 宽高设置最好根据 imageMask 做调整
15+
width: 600,
16+
height: 400,
17+
autoFit: false,
18+
wordField: 'name',
19+
weightField: 'value',
20+
imageMask,
21+
wordStyle: {
22+
fontFamily: 'Verdana',
23+
fontSize: [8, 32],
24+
},
25+
});
26+
27+
wordCloud.render();
28+
});
29+
};

‎examples/word-cloud/basic/demo/meta.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "basic.ts",
9+
"title": {
10+
"zh": "词云图",
11+
"en": "basic Word Cloud chart"
12+
},
13+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*SEgST634CwUAAAAAAAAAAABkARQnAQ"
14+
},
15+
{
16+
"filename": "image-mask.ts",
17+
"title": {
18+
"zh": "词云图-图片遮罩",
19+
"en": "Word Cloud chart - image mask"
20+
},
21+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*id4CSZIMCtsAAAAAAAAAAABkARQnAQ"
22+
}
23+
]
24+
}

‎examples/word-cloud/basic/design.en.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/word-cloud/basic/design.zh.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/word-cloud/basic/index.en.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 词云图
3+
order: 0
4+
---

‎examples/word-cloud/basic/index.zh.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 词云图
3+
order: 0
4+
---

‎gatsby-config.js

+8
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,14 @@ module.exports = {
207207
en: 'Stock Charts',
208208
},
209209
},
210+
{
211+
slug: 'word-cloud',
212+
icon: 'other',
213+
title: {
214+
zh: '词云图',
215+
en: 'Word Cloud Charts',
216+
},
217+
},
210218
// OTHERS
211219
{
212220
slug: 'general',

‎src/plots/word-cloud/index.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,17 @@ export class WordCloud extends Plot<WordCloudOptions> {
1717
*/
1818
protected getDefaultOptions(): Partial<WordCloudOptions> {
1919
return deepMix({}, super.getDefaultOptions(), {
20+
timeInterval: 2000,
2021
tooltip: {
2122
showTitle: false,
2223
showMarkers: false,
2324
showCrosshairs: false,
2425
},
2526
wordStyle: {
26-
fontSize: [10, 60],
27+
fontFamily: 'Verdana',
28+
fontWeight: 'normal',
29+
padding: 1,
30+
fontSize: [20, 60],
2731
rotation: [0, 90],
2832
rotationSteps: 2,
2933
rotateRatio: 0.5,

‎src/plots/word-cloud/types.ts

+3
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,11 @@ export interface DataItem {
2020
size: number;
2121
/** 一个单词所占的盒子的内边距，值越大单词之间的间隔越大 */
2222
padding: number;
23+
/** 是否包含文本 */
2324
hasText?: boolean;
25+
/** 单词所占盒子的宽度 */
2426
width?: number;
27+
/** 单词所占盒子的高度 */
2528
height?: number;
2629
/** x 轴坐标 */
2730
x?: number;

0 commit comments

Comments
 (0)