Skip to content

Commit cd4c0d4

Browse files
interstellarmtinterstellarmt
committed
docs: update document
1 parent bc3b414 commit cd4c0d4

4 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎site/docs/manual/component/slider.en.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ Configure slider handle styles.
244244
| handleLabelCursor | Handle label cursor style. Same as CSS cursor style | string | `default` | |
245245
| handleIconRadius | Handle icon corner radius | number | `2` | |
246246
| handleIconSize | Handle icon size | number | `10` | |
247+
| handleIconShape | Handle icon shape, supports string or custom function | string \| (type: 'start' \| 'end') => DisplayObject | - | |
247248
| handleIconFill | Handle icon fill color | string | `#f7f7f7` | |
248249
| handleIconFillOpacity | Handle icon fill opacity | number | `1` | |
249250
| handleIconStroke | Handle icon stroke | string | `#1D2129` | |
@@ -299,6 +300,19 @@ When configuring slider handle properties in the Slider component, use the `hand
299300
handleIconShadowOffsetX: 10,
300301
handleIconShadowOffsetY: 10,
301302
handleIconCursor: 'pointer',
303+
304+
// Custom handle icon shape
305+
handleIconShape: (type) => {
306+
// type parameter is 'start' or 'end', representing left and right handles
307+
return new Circle({
308+
style: {
309+
r: 8,
310+
fill: type === 'start' ? '#FF6B9D' : '#00D9FF',
311+
stroke: '#fff',
312+
lineWidth: 2,
313+
},
314+
});
315+
},
302316
},
303317
},
304318
},
@@ -662,6 +676,61 @@ chart.render();
662676

663677
## Examples
664678

679+
### Custom Handle Icon
680+
681+
The slider supports customizing the shape of handle icons through the `handleIconShape` property.
682+
683+
```js | ob { inject: true }
684+
import { Chart } from '@antv/g2';
685+
import { Circle } from '@antv/g';
686+
687+
const chart = new Chart({
688+
container: 'container',
689+
autoFit: true,
690+
});
691+
692+
chart.options({
693+
type: 'line',
694+
data: {
695+
type: 'fetch',
696+
value:
697+
'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
698+
},
699+
encode: { x: 'date', y: 'close' },
700+
slider: {
701+
x: {
702+
labelFormatter: (d) => new Date(d).toLocaleDateString(),
703+
style: {
704+
// Custom handle icon shape
705+
handleIconShape: (type) => {
706+
// type parameter is 'start' or 'end', representing left and right handles
707+
return new Circle({
708+
style: {
709+
r: 8,
710+
fill: type === 'start' ? '#1890FF' : '#52C41A',
711+
stroke: '#fff',
712+
lineWidth: 2,
713+
shadowColor: type === 'start' ? '#1890FF' : '#52C41A',
714+
shadowBlur: 10,
715+
},
716+
});
717+
},
718+
handleIconSize: 16,
719+
},
720+
},
721+
},
722+
});
723+
724+
chart.render();
725+
```
726+
727+
**Explanation:**
728+
729+
- `handleIconShape` can be a string (e.g., `'circle'`) or a custom function
730+
- The function receives a `type` parameter with value `'start'` or `'end'`, corresponding to the left and right handles
731+
- The function should return a `DisplayObject` (e.g., `Circle`, `Path`, etc.)
732+
- Different styles can be set for different handles to enhance visual distinction
733+
665734
### Custom Slider
666735

667736
If you don't want to use G2's default slider, you can customize following these steps:

‎site/docs/manual/component/slider.zh.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,7 @@ chart.render();
259259
| handleLabelDy | 手柄标签文字在垂直方向的偏移量 | number | 0 | |
260260
| handleIconRadius | 手柄图标的圆角 | number | `2` | |
261261
| handleIconSize | 手柄图标的尺寸 | number | `10` | |
262+
| handleIconShape | 手柄图标的形状，支持字符串或自定义函数 | string \| (type: 'start' \| 'end') => DisplayObject | - | |
262263
| handleIconFill | 手柄图标的填充色 | string | `#f7f7f7` | |
263264
| handleIconFillOpacity | 手柄图标的填充透明度 | number | `1` | |
264265
| handleIconStroke | 手柄图标的描边 | string | `#1D2129` | |
@@ -312,6 +313,19 @@ chart.render();
312313
handleIconShadowOffsetX: 10,
313314
handleIconShadowOffsetY: 10,
314315
handleIconCursor: 'pointer',
316+
317+
// 自定义手柄图标形状
318+
handleIconShape: (type) => {
319+
// type 为 'start' 或 'end'，分别表示左右手柄
320+
return new Circle({
321+
style: {
322+
r: 8,
323+
fill: type === 'start' ? '#FF6B9D' : '#00D9FF',
324+
stroke: '#fff',
325+
lineWidth: 2,
326+
},
327+
});
328+
},
315329
},
316330
},
317331
});
@@ -942,6 +956,61 @@ chart.render();
942956

943957
## 示例
944958

959+
### 自定义手柄图标
960+
961+
缩略轴支持自定义手柄图标的形状，可以通过 `handleIconShape` 属性实现。
962+
963+
```js | ob { inject: true }
964+
import { Chart } from '@antv/g2';
965+
import { Circle } from '@antv/g';
966+
967+
const chart = new Chart({
968+
container: 'container',
969+
autoFit: true,
970+
});
971+
972+
chart.options({
973+
type: 'line',
974+
data: {
975+
type: 'fetch',
976+
value:
977+
'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
978+
},
979+
encode: { x: 'date', y: 'close' },
980+
slider: {
981+
x: {
982+
labelFormatter: (d) => new Date(d).toLocaleDateString(),
983+
style: {
984+
// 自定义手柄图标形状
985+
handleIconShape: (type) => {
986+
// type 参数为 'start' 或 'end'，分别表示左右手柄
987+
return new Circle({
988+
style: {
989+
r: 8,
990+
fill: type === 'start' ? '#1890FF' : '#52C41A',
991+
stroke: '#fff',
992+
lineWidth: 2,
993+
shadowColor: type === 'start' ? '#1890FF' : '#52C41A',
994+
shadowBlur: 10,
995+
},
996+
});
997+
},
998+
handleIconSize: 16,
999+
},
1000+
},
1001+
},
1002+
});
1003+
1004+
chart.render();
1005+
```
1006+
1007+
**说明：**
1008+
1009+
- `handleIconShape` 可以是字符串（如 `'circle'`）或自定义函数
1010+
- 函数接收 `type` 参数，值为 `'start'` 或 `'end'`，分别对应左右手柄
1011+
- 函数需要返回一个 `DisplayObject` 对象（如 `Circle`、`Path` 等）
1012+
- 可以为不同的手柄设置不同的样式，增强视觉区分度
1013+
9451014
### 自定义缩略轴（Slider）
9461015

9471016
如果不希望使用 G2 默认的缩略轴，就可以按照以下几步自定义：

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@
2727
"en": "Custom Styling"
2828
},
2929
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*4R5xQLskh7wAAAAARZAAAAgAemJ7AQ/original"
30+
},
31+
{
32+
"filename": "slider-handle-icon.ts",
33+
"title": {
34+
"zh": "自定义手柄图标形状",
35+
"en": "Custom Handle Icon Shape"
36+
},
37+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NqwdTIfo1IAAAAAASZAAAAgAemJ7AQ/original"
3038
},
3139
{
3240
"filename": "slider-multi-axis-view.ts",

‎site/examples/component/slider/demo/slider-handle-icon.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Chart } from '@antv/g2';
2+
import { Circle, Path, Group } from '@antv/g';
3+
4+
const chart = new Chart({
5+
container: 'container',
6+
autoFit: true,
7+
});
8+
9+
chart.options({
10+
type: 'line',
11+
data: {
12+
type: 'fetch',
13+
value:
14+
'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
15+
},
16+
encode: { x: 'date', y: 'close' },
17+
slider: {
18+
x: {
19+
values: [0.3, 0.7],
20+
labelFormatter: (d) => new Date(d).toLocaleDateString(),
21+
// 自定义手柄图标 - 钻石形状带渐变
22+
handleIconShape: (type) => {
23+
const group = new Group();
24+
25+
// 创建钻石形状路径
26+
const diamond = new Path({
27+
style: {
28+
d: [
29+
['M', 0, -8], // 上顶点
30+
['L', 6, 0], // 右顶点
31+
['L', 0, 8], // 下顶点
32+
['L', -6, 0], // 左顶点
33+
['Z'], // 闭合
34+
],
35+
// 使用渐变填充
36+
fill:
37+
type === 'start'
38+
? 'l(90) 0:#667eea 1:#764ba2' // 紫色渐变
39+
: 'l(90) 0:#f093fb 1:#f5576c', // 粉色渐变
40+
stroke: '#fff',
41+
lineWidth: 2,
42+
shadowColor: type === 'start' ? '#667eea' : '#f5576c',
43+
shadowBlur: 8,
44+
shadowOffsetY: 2,
45+
},
46+
});
47+
48+
// 添加内部高光效果
49+
const highlight = new Path({
50+
style: {
51+
d: [['M', 0, -6], ['L', 3, -1], ['L', 0, -3], ['Z']],
52+
fill: 'rgba(255, 255, 255, 0.6)',
53+
},
54+
});
55+
56+
// 添加中心圆点装饰
57+
const centerDot = new Circle({
58+
style: {
59+
cx: 0,
60+
cy: 0,
61+
r: 2,
62+
fill: '#fff',
63+
opacity: 0.8,
64+
},
65+
});
66+
67+
group.appendChild(diamond);
68+
group.appendChild(highlight);
69+
group.appendChild(centerDot);
70+
71+
return group;
72+
},
73+
handleIconSize: 20,
74+
// 美化选区样式
75+
selectionFill:
76+
'l(0) 0:rgba(102, 126, 234, 0.1) 1:rgba(245, 87, 108, 0.1)',
77+
selectionStroke: '#667eea',
78+
selectionLineWidth: 2,
79+
// 美化滑轨样式
80+
trackFill: '#f5f7fa',
81+
trackSize: 18,
82+
// 美化手柄标签样式
83+
handleLabelFill: '#4a5568',
84+
handleLabelFontSize: 12,
85+
handleLabelFontWeight: 600,
86+
},
87+
},
88+
style: {
89+
stroke: '#667eea',
90+
lineWidth: 2,
91+
},
92+
});
93+
94+
chart.render();

0 commit comments

Comments
 (0)