Skip to content

Commit 12781a9

Browse files
arcsin1arcsin1
authored
docs: 增加histogram的example和文档 (#1422)
* docs: 增加histogram的文档 增加histogram的文档 * style: 简化代码 * style: rebase和简化代码
1 parent fa64dd6 commit 12781a9

File tree

11 files changed

+467
-0
lines changed

11 files changed

+467
-0
lines changed

‎examples/histogram/basic/API.en.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: API
3+
---
4+
5+
# 配置属性
6+
7+
## 图表容器
8+
9+
- 见 [通用配置](TODO)
10+
11+
## 数据映射
12+
13+
### data 📌
14+
15+
**必选**, _array object_
16+
17+
功能描述： 设置图表数据源
18+
19+
默认配置： 无
20+
21+
数据源为对象集合，例如：`[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]`。
22+
23+
### meta
24+
25+
**可选**, _object_
26+
27+
功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。
28+
29+
默认配置： 无
30+
31+
| 细分配置项名称 | 类型 | 功能描述 |
32+
| -------------- | ---------- | ------------------------------------------- |
33+
| alias | _string_ | 字段的别名 |
34+
| formatter | _function_ | callback 方法，对该字段所有值进行格式化处理 |
35+
| values | _string[]_ | 枚举该字段下所有值 |
36+
| range | _number[]_ | 字段的数据映射区间，默认为[0,1] |
37+
38+
```js
39+
const data = [
40+
{ value: 20 },
41+
{ value: 34 },
42+
{ value: 56 },
43+
{ value: 67 }
44+
];
45+
46+
const HistogramPlot = new Histogram(document.getElementById('container'), {
47+
data,
48+
// highlight-start
49+
meta: {
50+
range: {
51+
min: 0,
52+
tickInterval: 2,
53+
},
54+
value: {
55+
max: 20,
56+
nice: true,
57+
alias: '数量',
58+
formatter:(v)=>{return `${v}个`}
59+
}
60+
},
61+
// highlight-end
62+
binField: 'value',
63+
});
64+
HistogramPlot.render();
65+
```
66+
67+
### binField 📌
68+
69+
**必选**, _string_
70+
71+
功能描述： 设置直方图绘制 (进行分箱) 的字段。
72+
73+
默认配置： 无
74+
75+
### binWidth 📌
76+
77+
**可选**, _string_
78+
79+
功能描述： 设置直方图的分箱宽度，binWidth 影响直方图分成多少箱, 不能与binNumber一起使用。
80+
81+
默认配置： Sturges formula 计算得到
82+
83+
### binNumber 📌
84+
85+
**可选**, _string_
86+
87+
功能描述： 设置直方图的分箱数量，binNumber 会影响直方图分箱后每个柱子的宽度。
88+
89+
默认配置： 无
90+
91+
## 图形样式
92+
93+
columnStyle ✨
94+
95+
**可选**, _object_
96+
97+
功能描述： 设置直方图柱子样式。
98+
99+
100+
| 细分配置 | 类型 | 功能描述 |
101+
| ------------- | ------ | ---------- |
102+
| fill | string | 填充颜色 |
103+
| stroke | string | 描边颜色 |
104+
| lineWidth | number | 描边宽度 |
105+
| lineDash | number | 虚线描边 |
106+
| opacity | number | 整体透明度 |
107+
| fillOpacity | number | 填充透明度 |
108+
| strokeOpacity | number | 描边透明度 |
109+
110+

‎examples/histogram/basic/API.zh.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: API
3+
---
4+
5+
# 配置属性
6+
7+
## 图表容器
8+
9+
- 见 [通用配置](TODO)
10+
11+
## 数据映射
12+
13+
### data 📌
14+
15+
**必选**, _array object_
16+
17+
功能描述： 设置图表数据源
18+
19+
默认配置： 无
20+
21+
数据源为对象集合，例如：`[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]`。
22+
23+
### meta
24+
25+
**可选**, _object_
26+
27+
功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。
28+
29+
默认配置： 无
30+
31+
| 细分配置项名称 | 类型 | 功能描述 |
32+
| -------------- | ---------- | ------------------------------------------- |
33+
| alias | _string_ | 字段的别名 |
34+
| formatter | _function_ | callback 方法，对该字段所有值进行格式化处理 |
35+
| values | _string[]_ | 枚举该字段下所有值 |
36+
| range | _number[]_ | 字段的数据映射区间，默认为[0,1] |
37+
38+
```js
39+
const data = [
40+
{ value: 20 },
41+
{ value: 34 },
42+
{ value: 56 },
43+
{ value: 67 }
44+
];
45+
46+
const HistogramPlot = new Histogram(document.getElementById('container'), {
47+
data,
48+
// highlight-start
49+
meta: {
50+
range: {
51+
min: 0,
52+
tickInterval: 2,
53+
},
54+
value: {
55+
max: 20,
56+
nice: true,
57+
alias: '数量',
58+
formatter:(v)=>{return `${v}个`}
59+
}
60+
},
61+
// highlight-end
62+
binField: 'value',
63+
});
64+
HistogramPlot.render();
65+
```
66+
67+
### binField 📌
68+
69+
**必选**, _string_
70+
71+
功能描述： 设置直方图绘制 (进行分箱) 的字段。
72+
73+
默认配置： 无
74+
75+
### binWidth 📌
76+
77+
**可选**, _string_
78+
79+
功能描述： 设置直方图的分箱宽度，binWidth 影响直方图分成多少箱, 不能与binNumber一起使用。
80+
81+
默认配置： Sturges formula 计算得到
82+
83+
### binNumber 📌
84+
85+
**可选**, _string_
86+
87+
功能描述： 设置直方图的分箱数量，binNumber 会影响直方图分箱后每个柱子的宽度。
88+
89+
默认配置： 无
90+
91+
## 图形样式
92+
93+
columnStyle ✨
94+
95+
**可选**, _object_
96+
97+
功能描述： 设置直方图柱子样式。
98+
99+
100+
| 细分配置 | 类型 | 功能描述 |
101+
| ------------- | ------ | ---------- |
102+
| fill | string | 填充颜色 |
103+
| stroke | string | 描边颜色 |
104+
| lineWidth | number | 描边宽度 |
105+
| lineDash | number | 虚线描边 |
106+
| opacity | number | 整体透明度 |
107+
| fillOpacity | number | 填充透明度 |
108+
| strokeOpacity | number | 描边透明度 |
109+
110+

‎examples/histogram/basic/demo/basic.ts

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Histogram } from '@antv/g2plot';
2+
3+
const data = [
4+
{ value: 1.2 },
5+
{ value: 3.4 },
6+
{ value: 3.7 },
7+
{ value: 4.3 },
8+
{ value: 5.2 },
9+
{ value: 5.8 },
10+
{ value: 6.1 },
11+
{ value: 6.5 },
12+
{ value: 6.8 },
13+
{ value: 7.1 },
14+
{ value: 7.3 },
15+
{ value: 7.7 },
16+
{ value: 8.3 },
17+
{ value: 8.6 },
18+
{ value: 8.8 },
19+
{ value: 9.1 },
20+
{ value: 9.2 },
21+
{ value: 9.4 },
22+
{ value: 9.5 },
23+
{ value: 9.7 },
24+
{ value: 10.5 },
25+
{ value: 10.7 },
26+
{ value: 10.8 },
27+
{ value: 11.0 },
28+
{ value: 11.0 },
29+
{ value: 11.1 },
30+
{ value: 11.2 },
31+
{ value: 11.3 },
32+
{ value: 11.4 },
33+
{ value: 11.4 },
34+
{ value: 11.7 },
35+
{ value: 12.0 },
36+
{ value: 12.9 },
37+
{ value: 12.9 },
38+
{ value: 13.3 },
39+
{ value: 13.7 },
40+
{ value: 13.8 },
41+
{ value: 13.9 },
42+
{ value: 14.0 },
43+
{ value: 14.2 },
44+
{ value: 14.5 },
45+
{ value: 15 },
46+
{ value: 15.2 },
47+
{ value: 15.6 },
48+
{ value: 16.0 },
49+
{ value: 16.3 },
50+
{ value: 17.3 },
51+
{ value: 17.5 },
52+
{ value: 17.9 },
53+
{ value: 18.0 },
54+
{ value: 18.0 },
55+
{ value: 20.6 },
56+
{ value: 21 },
57+
{ value: 23.4 },
58+
];
59+
60+
const histogramPlot = new Histogram('container', {
61+
data,
62+
binField: 'value',
63+
tooltip: {
64+
showMarkers: false,
65+
position: 'top',
66+
},
67+
interactions: [
68+
{
69+
name: 'element-highlight',
70+
},
71+
],
72+
});
73+
74+
histogramPlot.render();

‎examples/histogram/basic/demo/binWidth.ts

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { Histogram } from '@antv/g2plot';
2+
3+
const data = [
4+
{ value: 1.2 },
5+
{ value: 3.4 },
6+
{ value: 3.7 },
7+
{ value: 4.3 },
8+
{ value: 5.2 },
9+
{ value: 5.8 },
10+
{ value: 6.1 },
11+
{ value: 6.5 },
12+
{ value: 6.8 },
13+
{ value: 7.1 },
14+
{ value: 7.3 },
15+
{ value: 7.7 },
16+
{ value: 8.3 },
17+
{ value: 8.6 },
18+
{ value: 8.8 },
19+
{ value: 9.1 },
20+
{ value: 9.2 },
21+
{ value: 9.4 },
22+
{ value: 9.5 },
23+
{ value: 9.7 },
24+
{ value: 10.5 },
25+
{ value: 10.7 },
26+
{ value: 10.8 },
27+
{ value: 11.0 },
28+
{ value: 11.0 },
29+
{ value: 11.1 },
30+
{ value: 11.2 },
31+
{ value: 11.3 },
32+
{ value: 11.4 },
33+
{ value: 11.4 },
34+
{ value: 11.7 },
35+
{ value: 12.0 },
36+
{ value: 12.9 },
37+
{ value: 12.9 },
38+
{ value: 13.3 },
39+
{ value: 13.7 },
40+
{ value: 13.8 },
41+
{ value: 13.9 },
42+
{ value: 14.0 },
43+
{ value: 14.2 },
44+
{ value: 14.5 },
45+
{ value: 15 },
46+
{ value: 15.2 },
47+
{ value: 15.6 },
48+
{ value: 16.0 },
49+
{ value: 16.3 },
50+
{ value: 17.3 },
51+
{ value: 17.5 },
52+
{ value: 17.9 },
53+
{ value: 18.0 },
54+
{ value: 18.0 },
55+
{ value: 20.6 },
56+
{ value: 21 },
57+
{ value: 23.4 },
58+
];
59+
60+
const histogramPlot = new Histogram('container', {
61+
data,
62+
binField: 'value',
63+
binWidth: 4,
64+
tooltip: {
65+
showMarkers: false,
66+
position: 'top',
67+
},
68+
interactions: [
69+
{
70+
name: 'element-highlight',
71+
},
72+
],
73+
/** range 为 x 轴代表字段，count 为 y 轴统计个数字段 */
74+
meta: {
75+
range: {
76+
min: 0,
77+
tickInterval: 2,
78+
},
79+
count: {
80+
max: 20,
81+
nice: true,
82+
},
83+
},
84+
});
85+
86+
histogramPlot.render();

0 commit comments

Comments
 (0)