Skip to content

Commit a1a41e2

Browse files
xile611xile611
authored
Merge pull request #3552 from VisActor/docs/pictogram-cat
Docs/pictogram cat
2 parents b3cabe0 + edc6ad9 commit a1a41e2

File tree

6 files changed

+556
-117
lines changed

6 files changed

+556
-117
lines changed

‎docs/assets/examples/en/pictogram-chart/pictogram-cat.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
category: examples
3+
group: pictogram chart
4+
title: Cat Stroking For Beginners
5+
keywords: pictogramChart, space
6+
order: 26-1
7+
cover: /vchart/preview/pictogram-cat_1.13.0.png
8+
option: pictogramChart
9+
---
10+
11+
# SVG Cat Stroking For Beginners
12+
13+
Pictogram charts are a form of data visualization that represent specific values or categories in data using graphic symbols (usually in SVG format). This type of chart combines graphic art with data analysis, making the information more visually appealing and intuitive.
14+
15+
## Key Configurations
16+
17+
- Register SVG resources through the `VChart.registerSVG` interface;
18+
- Declare the `svg` attribute as the registered SVG name.
19+
20+
## Code Demo
21+
22+
```javascript livedemo
23+
/** --Add the following code when using in business context-- */
24+
// When using in business context, please additionally import
25+
// import { registerPictogramChart } from '@visactor/vchart';
26+
// registerPictogramChart();
27+
/** --Add the above code when using in business context-- */
28+
VCHART_MODULE.registerPictogramChart();
29+
/** --Delete the above code when using in business context-- */
30+
31+
const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/cat.svg');
32+
const shape = await response.text();
33+
34+
const spec = {
35+
type: 'pictogram',
36+
data: {
37+
id: 'data',
38+
values: [{ name: 'Yes', value: 'Love This' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }]
39+
},
40+
region: [
41+
{
42+
roam: { blank: true }
43+
}
44+
],
45+
seriesField: 'name',
46+
nameField: 'name',
47+
valueField: 'value',
48+
svg: 'cat',
49+
color: {
50+
specified: {
51+
Yes: '#009A00',
52+
'So-so': '#FEB202',
53+
Forbidden: '#FE3E00',
54+
Horror: '#FE2B09',
55+
undefined: 'white'
56+
}
57+
},
58+
interactions: [
59+
{
60+
type: 'element-active-by-legend',
61+
filterField: 'name'
62+
}
63+
],
64+
pictogram: {
65+
style: {
66+
fill: {
67+
scale: 'color',
68+
field: 'name'
69+
}
70+
},
71+
state: {
72+
active: {
73+
fillOpacity: 0.8,
74+
stroke: {
75+
scale: 'color',
76+
field: 'name'
77+
},
78+
lineWidth: 2
79+
},
80+
hover: {
81+
fillOpacity: 0.8,
82+
stroke: {
83+
scale: 'color',
84+
field: 'name'
85+
},
86+
lineWidth: 2
87+
}
88+
}
89+
},
90+
title: { text: 'Cat Stroking For Beginners' },
91+
legends: { orient: 'top', filter: false }
92+
};
93+
94+
VChart.registerSVG('cat', shape);
95+
96+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
97+
vchart.renderSync();
98+
99+
// Just for the convenience of console debugging, DO NOT COPY!
100+
window['vchart'] = vchart;
101+
```
102+
103+
## Related Tutorials
104+
105+
[PictogramChart](link)

‎docs/assets/examples/menu.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1660,6 +1660,13 @@
16601660
"en": "pictogram-chart"
16611661
},
16621662
"children": [
1663+
{
1664+
"path": "pictogram-cat",
1665+
"title": {
1666+
"zh": "新手撸猫指南",
1667+
"en": "Cat Stroking For Beginners"
1668+
}
1669+
},
16631670
{
16641671
"path": "pictogram-seat-map",
16651672
"title": {

‎docs/assets/examples/zh/pictogram-chart/pictogram-cat.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
category: examples
3+
group: pictogram chart
4+
title: Cat Stroking For Beginners
5+
keywords: pictogramChart, space
6+
order: 26-0
7+
cover: /vchart/preview/pictogram-cat_1.13.0.png
8+
option: pictogramChart
9+
---
10+
11+
# 象形图-新手撸猫指南
12+
13+
象形图是一种数据可视化形式，它通过使用图形符号（通常是 SVG 格式）来表示数据中的具体值或类别。这种图表结合了图形艺术和数据分析，使得信息更具视觉吸引力和直观性。
14+
15+
## 关键配置
16+
17+
- 在 SVG 文件中，为图元配置 name 属性，则在图表配置中可以通过 name 配置指定图元样式；
18+
- 通过 `VChart.registerSVG` 接口来注册 svg 资源；
19+
- `svg` 属性声明为注册的 svg 名称
20+
21+
## Code Demo
22+
23+
```javascript livedemo
24+
/** --Add the following code when using in business context-- */
25+
// When using in business context, please additionally import
26+
// import { registerPictogramChart } from '@visactor/vchart';
27+
// registerPictogramChart();
28+
/** --Add the above code when using in business context-- */
29+
VCHART_MODULE.registerPictogramChart();
30+
/** --Delete the above code when using in business context-- */
31+
32+
const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/cat.svg');
33+
const shape = await response.text();
34+
35+
const spec = {
36+
type: 'pictogram',
37+
data: {
38+
id: 'data',
39+
values: [{ name: 'Yes', value: 'Love This' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }]
40+
},
41+
region: [
42+
{
43+
roam: { blank: true }
44+
}
45+
],
46+
seriesField: 'name',
47+
nameField: 'name',
48+
valueField: 'value',
49+
svg: 'cat',
50+
color: {
51+
specified: {
52+
Yes: '#009A00',
53+
'So-so': '#FEB202',
54+
Forbidden: '#FE3E00',
55+
Horror: '#FE2B09',
56+
undefined: 'white'
57+
}
58+
},
59+
interactions: [
60+
{
61+
type: 'element-active-by-legend',
62+
filterField: 'name'
63+
}
64+
],
65+
pictogram: {
66+
style: {
67+
fill: {
68+
scale: 'color',
69+
field: 'name'
70+
}
71+
},
72+
state: {
73+
active: {
74+
fillOpacity: 0.8,
75+
stroke: {
76+
scale: 'color',
77+
field: 'name'
78+
},
79+
lineWidth: 2
80+
},
81+
hover: {
82+
fillOpacity: 0.8,
83+
stroke: {
84+
scale: 'color',
85+
field: 'name'
86+
},
87+
lineWidth: 2
88+
}
89+
}
90+
},
91+
title: { text: 'Cat Stroking For Beginners' },
92+
legends: { orient: 'top', filter: false }
93+
};
94+
95+
VChart.registerSVG('cat', shape);
96+
97+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
98+
vchart.renderSync();
99+
100+
// Just for the convenience of console debugging, DO NOT COPY!
101+
window['vchart'] = vchart;
102+
```
103+
104+
## Related Tutorials
105+
106+
[PictogramChart](link)

0 commit comments

Comments
 (0)