Skip to content

Commit 1c2073d

Browse files
i11I04ilkd01632719
i11I04i
and
lkd01632719
authored
docs: add demo&document (#2360)
Co-authored-by: lkd01632719 <[email protected]>
1 parent 9ef190a commit 1c2073d

File tree

10 files changed

+310
-0
lines changed

10 files changed

+310
-0
lines changed

‎site/docs/options/plots/annotation/shape.en.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: shape
3+
order: 1
4+
---
5+
6+
<embed src="@/docs/options/plots/annotation/shape.zh.md"></embed>

‎site/docs/options/plots/annotation/shape.zh.md

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: shape
3+
order: 1
4+
---
5+
6+
通常用来在图表上绘制一个静态的自定义图形，灵活性非常高，当然技术成本也会高一些，需要了解 [G](https://g.antv.antgroup.com/) 的 API 去绘制图形。
7+
8+
## 开始使用
9+
10+
<img alt="shape" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aIpTRZ-_b9wAAAAAAAAAAAAADmJ7AQ/original" width="600" />
11+
12+
上图中的「数据保密」的徽章图案就是使用 `shape` 绘制。在绘制图形时，可以从图表上下文中获取 [document](https://g.antv.antgroup.com/api/builtin-objects/document) 对象，随后使用 [document.createElement](https://g.antv.antgroup.com/api/builtin-objects/document#createelement) 创建基础图形。在下面的示例中我们创建了一个 [Circle](https://g.antv.antgroup.com/api/basic/circle)。
13+
14+
```ts
15+
{
16+
annotations: [
17+
{
18+
type: 'shape',
19+
style: {
20+
x: '80%',
21+
y: '70%',
22+
render: ({ x, y }, context, d) => {
23+
const { document } = context;
24+
const g = document.createElement('g', {});
25+
const c1 = document.createElement('circle', {
26+
style: {
27+
cx: x,
28+
cy: y,
29+
lineWidth: 4,
30+
r: 65,
31+
stroke: 'red',
32+
opacity: 0.3,
33+
},
34+
});
35+
const c2 = document.createElement('circle', {
36+
style: {
37+
cx: x,
38+
cy: y,
39+
lineWidth: 2,
40+
r: 50,
41+
stroke: 'red',
42+
opacity: 0.3,
43+
},
44+
});
45+
const text = document.createElement('text', {
46+
style: {
47+
x,
48+
y,
49+
text: '数据保密',
50+
transform: 'rotate(30)',
51+
fontSize: 20,
52+
fill: 'red',
53+
textAlign: 'center',
54+
textBaseline: 'middle',
55+
fillOpacity: 0.3,
56+
},
57+
});
58+
g.appendChild(c1);
59+
g.appendChild(c2);
60+
g.appendChild(text);
61+
return g;
62+
},
63+
},
64+
},
65+
],
66+
};
67+
```
68+
69+
可以查看[图表徽章水印](/examples/statistics/annotation-shape/#watermark)具体示例。
70+
71+
## 选项
72+
73+
| 属性 | 描述 | 类型 | 默认值 | - |
74+
| ----------- | -------------------------------------------------------- | ---------------------------------- | -------- | --- |
75+
| x | 设置图形的位置 x，支持百分比（`'50%'`）和像素值（`200`） | `number` | `string` | - |
76+
| y | 设置图形的位置 y，支持百分比（`'50%'`）和像素值（`200`） | `number` | `string` | - |
77+
| render | 对应的自定义渲染函数，函数需要返回 G 的 DisplayObject | `(style: object) => DisplayObject` | - |
78+
| { ...rest } | 自定义图形的额外参数，都会作为 `render` 函数的第一个参数属性 | `object` | - |

‎site/examples/statistics/annotation-shape/API.en.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<embed src="@/docs/options/plots/common/overview.en.md"></embed>

‎site/examples/statistics/annotation-shape/API.zh.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<embed src="@/docs/options/plots/common/overview.zh.md"></embed>

‎site/examples/statistics/annotation-shape/demo/interval-point.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Column } from '@ant-design/plots';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
5+
const DemoAnnotationShape = () => {
6+
const data = [
7+
{ x: 'Jan', tick: 9.3, value: 11.5 },
8+
{ x: 'Feb', tick: 10.5, value: 12 },
9+
{ x: 'Mar', tick: 11.2, value: 11.7 },
10+
{ x: 'Apr', tick: 11.2, value: 12.4 },
11+
{ x: 'May', tick: 12.7, value: 13.5 },
12+
{ x: 'Jun', tick: 13.1, value: 11.9 },
13+
{ x: 'Jul', tick: 12.2, value: 14.6 },
14+
{ x: 'Aug', tick: 12.2, value: 17.2 },
15+
{ x: 'Sep', tick: 10.1, value: 16.9 },
16+
{ x: 'Oct', tick: 14.5, value: 15.4 },
17+
{ x: 'Nov', tick: 14.5, value: 16.9 },
18+
{ x: 'Dec', tick: 15.5, value: 17.2 },
19+
];
20+
21+
const config = {
22+
data,
23+
xField: 'x',
24+
yField: 'value',
25+
paddingRight: 30,
26+
sizeField: 20,
27+
coordinate: { transform: [{ type: 'transpose' }] },
28+
axis: { x: { title: false } },
29+
labels: [
30+
{
31+
text: 'value',
32+
position: 'right',
33+
formatter: (v) => `${v}min`,
34+
dx: 4,
35+
textAlign: 'start',
36+
},
37+
],
38+
style: { fillOpacity: 0.65, lineWidth: 1 },
39+
annotations: [
40+
{
41+
type: 'point',
42+
xField: 'x',
43+
yField: 'tick',
44+
shapeField: 'line',
45+
sizeField: 15,
46+
style: { stroke: 'red' },
47+
tooltip: false,
48+
},
49+
],
50+
};
51+
return <Column {...config} />;
52+
};
53+
54+
ReactDOM.render(<DemoAnnotationShape />, document.getElementById('container'));

‎site/examples/statistics/annotation-shape/demo/line-badge.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Line } from '@ant-design/plots';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
5+
const DemoAnnotationShape = () => {
6+
const config = {
7+
data: {
8+
type: 'fetch',
9+
value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/blockchain.json',
10+
transform: [
11+
{
12+
type: 'fold',
13+
fields: ['blockchain', 'nlp'],
14+
key: 'type',
15+
value: 'value',
16+
},
17+
],
18+
},
19+
xField: (d) => new Date(d.date),
20+
yField: 'value',
21+
colorField: 'type',
22+
axis: { x: { labelAutoHide: 'greedy' } },
23+
annotations: [
24+
{
25+
type: 'text',
26+
data: [new Date('2017-12-17'), 100],
27+
shape: 'badge',
28+
style: {
29+
text: '100',
30+
dy: -1,
31+
markerSize: 24,
32+
markerFill: '#6395FA',
33+
markerFillOpacity: 0.55,
34+
},
35+
tooltip: false,
36+
},
37+
],
38+
};
39+
return <Line {...config} />;
40+
};
41+
42+
ReactDOM.render(<DemoAnnotationShape />, document.getElementById('container'));

‎site/examples/statistics/annotation-shape/demo/meta.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "interval-point.js",
9+
"title": {
10+
"zh": "点标记的条形图",
11+
"en": "Interval, Point Annotation"
12+
},
13+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ypE2SbuV6kwAAAAAAAAAAAAADmJ7AQ/original"
14+
},
15+
{
16+
"filename": "line-badge.js",
17+
"title": {
18+
"zh": "徽章标记的折线图",
19+
"en": "Line, Badge Annotation"
20+
},
21+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*INjOS7ExVzYAAAAAAAAAAAAADmJ7AQ/original"
22+
},
23+
{
24+
"filename": "watermark.js",
25+
"title": {
26+
"zh": "徽章水印",
27+
"en": "Watermark"
28+
},
29+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LA11Rqfk2Y4AAAAAAAAAAAAADmJ7AQ/original"
30+
}
31+
]
32+
}

‎site/examples/statistics/annotation-shape/demo/watermark.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { Column } from '@ant-design/plots';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
5+
const DemoAnnotationShape = () => {
6+
const data = [
7+
{ month: 'Jan.', profit: 387264, start: 0, end: 387264 },
8+
{ month: 'Feb.', profit: 772096, start: 387264, end: 1159360 },
9+
{ month: 'Mar.', profit: 638075, start: 1159360, end: 1797435 },
10+
{ month: 'Apr.', profit: -211386, start: 1797435, end: 1586049 },
11+
{ month: 'May', profit: -138135, start: 1586049, end: 1447914 },
12+
{ month: 'Jun', profit: -267238, start: 1447914, end: 1180676 },
13+
{ month: 'Jul.', profit: 431406, start: 1180676, end: 1612082 },
14+
{ month: 'Aug.', profit: 363018, start: 1612082, end: 1975100 },
15+
{ month: 'Sep.', profit: -224638, start: 1975100, end: 1750462 },
16+
{ month: 'Oct.', profit: -299867, start: 1750462, end: 1450595 },
17+
{ month: 'Nov.', profit: 607365, start: 1450595, end: 2057960 },
18+
{ month: 'Dec.', profit: 1106986, start: 2057960, end: 3164946 },
19+
{ month: 'Total', start: 0, end: 3164946 },
20+
];
21+
22+
const config = {
23+
data,
24+
xField: 'month',
25+
yField: ['end', 'start'],
26+
colorField: (d) => (d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease'),
27+
axis: { y: { labelFormatter: '~s' } },
28+
tooltip: {
29+
items: [
30+
{ channel: 'y', valueFormatter: '~s' },
31+
{ channel: 'y1', valueFormatter: '~s' },
32+
],
33+
},
34+
annotations: [
35+
{
36+
type: 'shape',
37+
style: {
38+
x: '80%',
39+
y: '70%',
40+
render: ({ x, y }, context, d) => {
41+
const { document } = context;
42+
const g = document.createElement('g', {});
43+
const c1 = document.createElement('circle', {
44+
style: {
45+
cx: x,
46+
cy: y,
47+
lineWidth: 4,
48+
r: 65,
49+
stroke: 'red',
50+
opacity: 0.3,
51+
},
52+
});
53+
const c2 = document.createElement('circle', {
54+
style: {
55+
cx: x,
56+
cy: y,
57+
lineWidth: 2,
58+
r: 50,
59+
stroke: 'red',
60+
opacity: 0.3,
61+
},
62+
});
63+
const text = document.createElement('text', {
64+
style: {
65+
x,
66+
y,
67+
text: '数据保密',
68+
transform: 'rotate(30)',
69+
fontSize: 20,
70+
fill: 'red',
71+
textAlign: 'center',
72+
textBaseline: 'middle',
73+
fillOpacity: 0.3,
74+
},
75+
});
76+
g.appendChild(c1);
77+
g.appendChild(c2);
78+
g.appendChild(text);
79+
return g;
80+
},
81+
},
82+
},
83+
],
84+
};
85+
return <Column {...config} />;
86+
};
87+
88+
ReactDOM.render(<DemoAnnotationShape />, document.getElementById('container'));

‎site/examples/statistics/annotation-shape/index.en.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: Annotation Shape
3+
order: 22
4+
---

‎site/examples/statistics/annotation-shape/index.zh.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 图形标注
3+
order: 22
4+
---

0 commit comments

Comments
 (0)