Skip to content

Commit 171d82e

Browse files
tangying1027tangying1027
authored
chore: 放大镜组件文档 (#2085)
* chore: 放大镜组件文档 * chore(release): release (#2090) * chore: 增加堆叠分组柱状图
1 parent b7620c9 commit 171d82e

File tree

4 files changed

+363
-0
lines changed

4 files changed

+363
-0
lines changed

‎site/examples/component/magnifier/demo/magnifier-dynamic.jsx‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
/** @jsx jsx */
2+
import { Axis, Canvas, Chart, Component, jsx, Legend, Line, Magnifier } from '@antv/f2';
3+
4+
const context = document.getElementById('container').getContext('2d');
5+
6+
const data = [
7+
{
8+
date: '2017-06-05',
9+
value: 0.04,
10+
},
11+
{
12+
date: '2017-06-06',
13+
value: 0.04,
14+
},
15+
{
16+
date: '2017-06-07',
17+
value: 0.05,
18+
},
19+
{
20+
date: '2017-06-08',
21+
value: 0.03,
22+
},
23+
{
24+
date: '2017-06-09',
25+
value: 0.02,
26+
},
27+
{
28+
date: '2017-06-10',
29+
value: 0.03,
30+
},
31+
{
32+
date: '2017-06-11',
33+
value: 0.02,
34+
},
35+
{
36+
date: '2017-06-12',
37+
value: 0.02,
38+
},
39+
{
40+
date: '2017-06-13',
41+
value: 0.03,
42+
},
43+
{
44+
date: '2017-06-14',
45+
value: 0.04,
46+
},
47+
{
48+
date: '2017-06-15',
49+
value: 0.08,
50+
},
51+
{
52+
date: '2017-06-16',
53+
value: 0.05,
54+
},
55+
{
56+
date: '2017-06-17',
57+
value: 0.04,
58+
},
59+
{
60+
date: '2017-06-18',
61+
value: 0.04,
62+
},
63+
{
64+
date: '2017-06-19',
65+
value: 0.1,
66+
},
67+
{
68+
date: '2017-06-20',
69+
value: 0.07,
70+
},
71+
{
72+
date: '2017-06-21',
73+
value: 0.05,
74+
},
75+
{
76+
date: '2017-06-22',
77+
value: 0.04,
78+
},
79+
{
80+
date: '2017-06-23',
81+
value: 0.03,
82+
},
83+
{
84+
date: '2017-06-24',
85+
value: 0.03,
86+
},
87+
{
88+
date: '2017-06-25',
89+
value: 0.02,
90+
},
91+
{
92+
date: '2017-06-26',
93+
value: 0.04,
94+
},
95+
{
96+
date: '2017-06-27',
97+
value: 0.03,
98+
},
99+
{
100+
date: '2017-06-28',
101+
value: 0.03,
102+
},
103+
{
104+
date: '2017-06-29',
105+
value: 0.03,
106+
},
107+
{
108+
date: '2017-06-30',
109+
value: 0.02,
110+
},
111+
{
112+
date: '2017-07-01',
113+
value: 0.03,
114+
},
115+
{
116+
date: '2017-07-02',
117+
value: 0.04,
118+
},
119+
{
120+
date: '2017-07-03',
121+
value: 0.04,
122+
},
123+
{
124+
date: '2017-07-04',
125+
value: 0.03,
126+
},
127+
{
128+
date: '2017-07-05',
129+
value: 0.01,
130+
},
131+
{
132+
date: '2017-07-06',
133+
value: 0.02,
134+
},
135+
{
136+
date: '2017-07-07',
137+
value: 0.04,
138+
},
139+
{
140+
date: '2017-07-08',
141+
value: 0.04,
142+
},
143+
{
144+
date: '2017-07-09',
145+
value: 0.02,
146+
},
147+
{
148+
date: '2017-07-10',
149+
value: 0.03,
150+
},
151+
{
152+
date: '2017-07-11',
153+
value: 0.03,
154+
},
155+
{
156+
date: '2017-07-12',
157+
value: 0.04,
158+
},
159+
{
160+
date: '2017-07-13',
161+
value: 0.04,
162+
},
163+
{
164+
date: '2017-07-14',
165+
value: 0.04,
166+
},
167+
{
168+
date: '2017-07-15',
169+
value: 0.04,
170+
},
171+
{
172+
date: '2017-07-16',
173+
value: 0.02,
174+
},
175+
{
176+
date: '2017-07-17',
177+
value: 0.02,
178+
},
179+
{
180+
date: '2017-07-18',
181+
value: 0.03,
182+
},
183+
{
184+
date: '2017-07-19',
185+
value: 0.03,
186+
},
187+
{
188+
date: '2017-07-20',
189+
value: 0.03,
190+
},
191+
{
192+
date: '2017-07-21',
193+
value: 0.04,
194+
},
195+
{
196+
date: '2017-07-22',
197+
value: 0.02,
198+
},
199+
{
200+
date: '2017-07-23',
201+
value: 0.02,
202+
},
203+
{
204+
date: '2017-07-24',
205+
value: 0.02,
206+
},
207+
];
208+
class DynamicLine extends Component {
209+
constructor(props) {
210+
super(props);
211+
this.state = {
212+
data,
213+
};
214+
}
215+
216+
didMount() {
217+
setInterval(() => {
218+
this.setState((prevState) => {
219+
const prevData = prevState.data;
220+
const last = prevData[prevData.length - 1];
221+
const nextDate = new Date(last.date);
222+
nextDate.setDate(nextDate.getDate() + 1);
223+
const nextX = nextDate.toISOString().slice(0, 10);
224+
const nextY = Math.max(0, last.value + (Math.random() - 0.5) * 0.005);
225+
return {
226+
data: [...prevData, { date: nextX, value: nextY }],
227+
};
228+
});
229+
}, 1000);
230+
}
231+
232+
render() {
233+
const { data } = this.state;
234+
return (
235+
<Chart data={data}>
236+
<Axis field="value" />
237+
<Axis
238+
field="date"
239+
tickCount={2}
240+
style={{
241+
label: {
242+
align: 'between',
243+
},
244+
}}
245+
/>
246+
<Line x="date" y="value" color="#D6BB91" />
247+
<Magnifier focusRange={[data.length - 9, data.length - 1]} />
248+
<Legend />
249+
</Chart>
250+
);
251+
}
252+
}
253+
254+
const { props } = (
255+
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
256+
<DynamicLine />
257+
</Canvas>
258+
);
259+
260+
const canvas = new Canvas(props);
261+
canvas.render();

‎site/examples/component/magnifier/demo/meta.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "magnifier-dynamic.jsx",
9+
"title": "放大镜组件",
10+
"screenshot": "https://mdn.alipayobjects.com/huamei_khb4xj/afts/img/A*ir8yTK7fyD8AAAAAaiAAAAgAeq2NAQ/original"
11+
}
12+
]
13+
}

‎site/examples/component/magnifier/index.en.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Dynamic Line Chart with Magnifier
3+
order: 10
4+
---
5+
6+
Dynamic line chart combined with the Magnifier component can display real-time data changes and allow users to focus on the latest data details.
7+
8+
## Code Demo
9+
10+
- [Dynamic Line Chart with Magnifier](./demo/magnifier-dynamic.jsx): A dynamic line chart with magnifier functionality for detailed view of the latest data changes.
11+
12+
```jsx
13+
import { jsx, Canvas, Chart, Line, Axis, Magnifier } from '@antv/f2';
14+
15+
const { props } = (
16+
<Canvas context={context}>
17+
<Chart data={data}>
18+
<Line x="time" y="value" color="#1890FF" />
19+
<Magnifier
20+
focusRange={[data.length - 9, data.length - 1]}
21+
frameStyle={{
22+
background: '#fff',
23+
boxShadow: '0 2px 8px rgba(24,144,255,0.15)',
24+
}}
25+
/>
26+
<Axis field="value" />
27+
<Axis field="time" />
28+
</Chart>
29+
</Canvas>
30+
);
31+
```
32+
33+
## Use Cases
34+
35+
- Real-time data monitoring and display
36+
- Scenarios requiring focus on the latest data
37+
- Visualization of streaming data such as stocks or sensors

‎site/examples/component/magnifier/index.zh.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: 放大镜
3+
order: 10
4+
---
5+
6+
放大镜（Magnifier）组件可用于在动态图表中聚焦和放大最新的数据详情，适合实时数据监控、流式数据可视化等场景。
7+
8+
## 代码演示
9+
10+
- [动态折线图放大镜](./demo/magnifier-dynamic.jsx)：结合放大镜功能的动态折线图，便于聚焦最新数据变化。
11+
12+
```jsx
13+
import { jsx, Canvas, Chart, Line, Axis, Magnifier } from '@antv/f2';
14+
15+
const { props } = (
16+
<Canvas context={context}>
17+
<Chart data={data}>
18+
<Line x="time" y="value" color="#1890FF" />
19+
<Magnifier
20+
focusRange={[data.length - 9, data.length - 1]}
21+
frameStyle={{
22+
background: '#fff',
23+
boxShadow: '0 2px 8px rgba(24,144,255,0.15)',
24+
}}
25+
/>
26+
<Axis field="value" />
27+
<Axis field="time" />
28+
</Chart>
29+
</Canvas>
30+
);
31+
```
32+
33+
## 参数说明
34+
35+
| 参数 | 说明 | 类型 | 默认值 |
36+
| ---------- | ------------------- | ------------------------------------ | ------ |
37+
| focusRange | 聚焦的数据范围索引 | [number, number] | - |
38+
| radius | 放大镜半径，支持 px | number \| string | '50px' |
39+
| position | 放大镜中心位置 | [number, number] \| [string, string] | - |
40+
| offsetX | 放大镜 X 方向偏移量 | number \| string | - |
41+
| offsetY | 放大镜 Y 方向偏移量 | number \| string | - |
42+
| frameStyle | 放大镜外框样式 | object | - |
43+
| lineStyle | 放大镜内折线样式 | object | - |
44+
| lines | 放大镜内辅助线配置 | array | - |
45+
46+
## 使用场景
47+
48+
放大镜组件适用于以下场景：
49+
50+
1. 实时数据监控与展示
51+
2. 需要聚焦最新数据的场景
52+
3. 股票、传感器等流式数据可视化

0 commit comments

Comments
 (0)