Merge pull request #3552 from VisActor/docs/pictogram-cat

Docs/pictogram cat
VisActor · Dec 11, 2024 · a1a41e2 · a1a41e2
2 parents b3cabe0 + edc6ad9
commit a1a41e2
Show file tree

Hide file tree

Showing 6 changed files with 556 additions and 117 deletions.
diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-cat.md b/docs/assets/examples/en/pictogram-chart/pictogram-cat.md
@@ -0,0 +1,105 @@
+---
+category: examples
+group: pictogram chart
+title: Cat Stroking For Beginners
+keywords: pictogramChart, space
+order: 26-1
+cover: /vchart/preview/pictogram-cat_1.13.0.png
+option: pictogramChart
+---
+
+# SVG Cat Stroking For Beginners
+
+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.
+
+## Key Configurations
+
+- Register SVG resources through the `VChart.registerSVG` interface;
+- Declare the `svg` attribute as the registered SVG name.
+
+## Code Demo
+
+```javascript livedemo
+/** --Add the following code when using in business context-- */
+// When using in business context, please additionally import
+// import { registerPictogramChart } from '@visactor/vchart';
+// registerPictogramChart();
+/** --Add the above code when using in business context-- */
+VCHART_MODULE.registerPictogramChart();
+/** --Delete the above code when using in business context-- */
+
+const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/cat.svg');
+const shape = await response.text();
+
+const spec = {
+  type: 'pictogram',
+  data: {
+    id: 'data',
+    values: [{ name: 'Yes', value: 'Love This' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }]
+  },
+  region: [
+    {
+      roam: { blank: true }
+    }
+  ],
+  seriesField: 'name',
+  nameField: 'name',
+  valueField: 'value',
+  svg: 'cat',
+  color: {
+    specified: {
+      Yes: '#009A00',
+      'So-so': '#FEB202',
+      Forbidden: '#FE3E00',
+      Horror: '#FE2B09',
+      undefined: 'white'
+    }
+  },
+  interactions: [
+    {
+      type: 'element-active-by-legend',
+      filterField: 'name'
+    }
+  ],
+  pictogram: {
+    style: {
+      fill: {
+        scale: 'color',
+        field: 'name'
+      }
+    },
+    state: {
+      active: {
+        fillOpacity: 0.8,
+        stroke: {
+          scale: 'color',
+          field: 'name'
+        },
+        lineWidth: 2
+      },
+      hover: {
+        fillOpacity: 0.8,
+        stroke: {
+          scale: 'color',
+          field: 'name'
+        },
+        lineWidth: 2
+      }
+    }
+  },
+  title: { text: 'Cat Stroking For Beginners' },
+  legends: { orient: 'top', filter: false }
+};
+
+VChart.registerSVG('cat', shape);
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related Tutorials
+
+[PictogramChart](link)
diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json
@@ -1660,6 +1660,13 @@
         "en": "pictogram-chart"
       },
       "children": [
+        {
+          "path": "pictogram-cat",
+          "title": {
+            "zh": "新手撸猫指南",
+            "en": "Cat Stroking For Beginners"
+          }
+        },
         {
           "path": "pictogram-seat-map",
           "title": {

diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-cat.md b/docs/assets/examples/zh/pictogram-chart/pictogram-cat.md
@@ -0,0 +1,106 @@
+---
+category: examples
+group: pictogram chart
+title: Cat Stroking For Beginners
+keywords: pictogramChart, space
+order: 26-0
+cover: /vchart/preview/pictogram-cat_1.13.0.png
+option: pictogramChart
+---
+
+# 象形图-新手撸猫指南
+
+象形图是一种数据可视化形式，它通过使用图形符号（通常是 SVG 格式）来表示数据中的具体值或类别。这种图表结合了图形艺术和数据分析，使得信息更具视觉吸引力和直观性。
+
+## 关键配置
+
+- 在 SVG 文件中，为图元配置 name 属性，则在图表配置中可以通过 name 配置指定图元样式；
+- 通过 `VChart.registerSVG` 接口来注册 svg 资源；
+- `svg` 属性声明为注册的 svg 名称
+
+## Code Demo
+
+```javascript livedemo
+/** --Add the following code when using in business context-- */
+// When using in business context, please additionally import
+// import { registerPictogramChart } from '@visactor/vchart';
+// registerPictogramChart();
+/** --Add the above code when using in business context-- */
+VCHART_MODULE.registerPictogramChart();
+/** --Delete the above code when using in business context-- */
+
+const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/cat.svg');
+const shape = await response.text();
+
+const spec = {
+  type: 'pictogram',
+  data: {
+    id: 'data',
+    values: [{ name: 'Yes', value: 'Love This' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }]
+  },
+  region: [
+    {
+      roam: { blank: true }
+    }
+  ],
+  seriesField: 'name',
+  nameField: 'name',
+  valueField: 'value',
+  svg: 'cat',
+  color: {
+    specified: {
+      Yes: '#009A00',
+      'So-so': '#FEB202',
+      Forbidden: '#FE3E00',
+      Horror: '#FE2B09',
+      undefined: 'white'
+    }
+  },
+  interactions: [
+    {
+      type: 'element-active-by-legend',
+      filterField: 'name'
+    }
+  ],
+  pictogram: {
+    style: {
+      fill: {
+        scale: 'color',
+        field: 'name'
+      }
+    },
+    state: {
+      active: {
+        fillOpacity: 0.8,
+        stroke: {
+          scale: 'color',
+          field: 'name'
+        },
+        lineWidth: 2
+      },
+      hover: {
+        fillOpacity: 0.8,
+        stroke: {
+          scale: 'color',
+          field: 'name'
+        },
+        lineWidth: 2
+      }
+    }
+  },
+  title: { text: 'Cat Stroking For Beginners' },
+  legends: { orient: 'top', filter: false }
+};
+
+VChart.registerSVG('cat', shape);
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related Tutorials
+
+[PictogramChart](link)