diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-cat.md b/docs/assets/examples/en/pictogram-chart/pictogram-cat.md new file mode 100644 index 0000000000..ab2ca7d283 --- /dev/null +++ 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 index 050f09f5a8..1ea89ed194 100644 --- 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 new file mode 100644 index 0000000000..b11b4c127b --- /dev/null +++ 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) diff --git a/docs/assets/guide/en/tutorial_docs/Chart_Types/Pictogram.md b/docs/assets/guide/en/tutorial_docs/Chart_Types/Pictogram.md index d013bca91b..2c5acf0950 100644 --- a/docs/assets/guide/en/tutorial_docs/Chart_Types/Pictogram.md +++ b/docs/assets/guide/en/tutorial_docs/Chart_Types/Pictogram.md @@ -21,6 +21,23 @@ The configuration of pictograms is somewhat similar to that of maps and mainly c ### Quick Start +SVG characters can be used as materials, and the SVG primitives currently supported by VChart include: + +- rect +- line +- path +- polygon +- circle +- ellipse +- polyline +- text +- tspan +- g + +Including defs/style/switch/C/Q/pattern/use, etc. are not supported for the time being. + +Here is a simple example, in this example, the chart has no data, so there is no data mapping, just a display of SVG materials. + ```javascript livedemo /** -- Please add the following code when using it in business -- */ // When using it in business, please additionally import registerPictogramChart and execute it. @@ -30,8 +47,32 @@ The configuration of pictograms is somewhat similar to that of maps and mainly c /** -- Please delete the following code when using it in business -- */ VCHART_MODULE.registerPictogramChart(); /** -- Please delete the above code when using it in business -- */ -const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/shapes.svg'); -const shape = await response.text(); +const shape = ` + + + + + + + + + + + + + + + + + + + + + + + +Hello, SVG! +`; const spec = { type: 'pictogram', data: { @@ -55,9 +96,45 @@ vchart.renderSync(); window['vchart'] = vchart; ``` +Or you can obtain SVG resources through requests: + +```javascript livedemo +/** -- Please add the following code when using it in business -- */ +// When using it in business, please additionally import registerPictogramChart and execute it. +// import { registerPictogramChart } from '@visactor/vchart'; +// registerPictogramChart(); +/** -- Please add the above code when using it in business -- */ +/** -- Please delete the following code when using it in business -- */ +VCHART_MODULE.registerPictogramChart(); +/** -- Please delete the above code when using it in business -- */ + +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: [] + }, + seriesField: 'name', + nameField: 'name', + valueField: 'value', + svg: 'cat' +}; + +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; +``` + ### Key Configurations -- `nameField`: The configuration of the field declared as the name, used to associate with graphic elements in the SVG. +- `nameField`: This attribute is declared as a name field configuration, used to associate the graphic elements in SVG with the data items in the data that have the same `nameField` value. - `valueField`: The configuration of the field declared as the value. - `pictogram`: The style configuration of all graphic elements associated with the name. (The styles of other graphic elements are the same as those defined in the SVG and cannot be configured.) For elements with a specified name, their specified styles can be configured through the name. For example, in the following example, the regular and interactive styles of the rect graphic element can be set: @@ -71,66 +148,56 @@ window['vchart'] = vchart; /** -- Please delete the following code when using it in business -- */ VCHART_MODULE.registerPictogramChart(); /** -- Please delete the above code when using it in business -- */ -const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/shapes.svg'); +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: 'rect', - value: 1 - }, - { - name: 'circle', - value: 2 - }, - { - name: 'ellipse', - value: 3 - }, - { - name: 'line', - value: 4 - }, - { - name: 'polyline', - value: 5 - }, - { - name: 'polygon', - value: 6 - }, - { - name: 'path', - value: 7 - }, - { - name: 'text', - value: 8 - } - ] + values: [{ name: 'Yes', value: 'Love This' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }] }, - region: [ - { - roam: { blank: true } - } - ], seriesField: 'name', nameField: 'name', valueField: 'value', - svg: 'shapes', - rect: { - style: { fill: 'red' }, + svg: 'cat', + color: { + specified: { + Yes: '#009A00', + 'So-so': '#FEB202', + Forbidden: '#FE3E00', + Horror: '#FE2B09', + undefined: 'white' + } + }, + pictogram: { + style: { + fill: { + scale: 'color', + field: 'name' + } + } + }, + Yes: { + style: { + stroke: 'black', + lineWidth: 2 + }, state: { - hover: { fillOpacity: 0.5, stroke: 'yellow', lineWidth: 2 } + hover: { + fill: 'green' + } } - } + }, + title: { text: 'Cat Stroking For Beginners' }, + legends: { orient: 'top', filter: false } }; -VChart.registerSVG('shapes', shape); + +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; ``` @@ -146,13 +213,14 @@ For graphic elements with the same name, the style settings and interactions wil /** -- Please delete the following code when using it in business -- */ VCHART_MODULE.registerPictogramChart(); /** -- Please delete the above code when using it in business -- */ -const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/shapes-two-rect.svg'); +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: [] + values: [{ name: 'Yes' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }] }, region: [ { @@ -162,21 +230,67 @@ const spec = { seriesField: 'name', nameField: 'name', valueField: 'value', - svg: 'shapes-two-rect', - rect: { - style: { fill: 'red' }, + svg: 'cat', + color: { + specified: { + Yes: '#009A00', + 'So-so': '#FEB202', + Forbidden: '#FE3E00', + Horror: '#FE2B09', + undefined: 'white' + } + }, + interactions: [ + { + // 图例的高亮交互 + type: 'element-active-by-legend', + // 根据数据中 name 字段对图元进行过滤 + filterField: 'name' + } + ], + pictogram: { + style: { + fill: { + scale: 'color', + field: 'name' + } + }, state: { - hover: { fillOpacity: 0.5, stroke: 'yellow', lineWidth: 2 } + // 通过图例交互时的样式 + 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('shapes-two-rect', shape); + +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; ``` +For more examples, please see [Pictogram Example](/vchart/demo/pictogram-chart/pictogram-cow). + ### More Explanations Pictograms are not included in the VChart by default. If you need to use them, please manually import pictograms. diff --git a/docs/assets/guide/zh/tutorial_docs/Chart_Types/Pictogram.md b/docs/assets/guide/zh/tutorial_docs/Chart_Types/Pictogram.md index d185478c9f..987ab80dda 100644 --- a/docs/assets/guide/zh/tutorial_docs/Chart_Types/Pictogram.md +++ b/docs/assets/guide/zh/tutorial_docs/Chart_Types/Pictogram.md @@ -19,12 +19,27 @@ - `pictogramChart.data`: 图表绘制的数据源 - `pictogramChart.nameField` 属性声明为名称的字段，用于与 SVG 中的图形元素进行关联 -一组数据定义如下： - - 更多组件配置见[VChart pictogramChart 配置](../../../option/pictogramChart) ### 快速上手 +可以使用 SVG 字符作为素材，目前 VChart 支持的 SVG 图元包括： + +- rect +- line +- path +- polygon +- circle +- ellipse +- polyline +- text +- tspan +- g + +包括 defs/style/switch/C/Q/pattern/use 等用法暂不支持。 + +这里有一个简单的例子，这个例子中，图表没有任何数据，所以没有任何数据映射，只是一个对 SVG 素材的展示。 + ```javascript livedemo /** --在业务中使用时请添加以下代码-- */ // 在业务中使用时, 请额外引入 registerPictogramChart 并执行 @@ -35,8 +50,32 @@ /** --在业务中使用时请删除以下代码-- */ VCHART_MODULE.registerPictogramChart(); /** --在业务中使用时请删除以上代码-- */ -const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/shapes.svg'); -const shape = await response.text(); +const shape = ` + + + + + + + + + + + + + + + + + + + + + + + + Hello, SVG! + `; const spec = { type: 'pictogram', @@ -64,13 +103,50 @@ vchart.renderSync(); window['vchart'] = vchart; ``` +或者可以通过请求获取 SVG 资源： + +```javascript livedemo +/** --在业务中使用时请添加以下代码-- */ +// 在业务中使用时, 请额外引入 registerPictogramChart 并执行 +// import { registerPictogramChart } from '@visactor/vchart'; +// registerPictogramChart(); +/** --在业务中使用时请添加以上代码-- */ + +/** --在业务中使用时请删除以下代码-- */ +VCHART_MODULE.registerPictogramChart(); +/** --在业务中使用时请删除以上代码-- */ + +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: [] + }, + seriesField: 'name', + nameField: 'name', + valueField: 'value', + svg: 'cat' +}; + +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; +``` + ### 关键配置 -- `nameField` 属性声明为名称字段配置，用于与 SVG 中的图形元素进行关联 +- `nameField` 属性声明为名称字段配置，用于使得 SVG 中的图形元素与数据中相同 `nameField` 值的数据项进行关联 - `valueField` 属性声明为值字段配置 - `pictogram` 所有关联了 name 的图元的样式配置。（其他图元的样式与 SVG 定义一致，无法配置） -对于有指定 name 的元素，可以通过名称配置其指定样式，例如下面这个例子，可以对 rect 图元进行常规和交互的样式设置： +对于有指定名称（name 属性） 的元素，可以通过名称配置其指定样式，例如下面这个例子，可以对命名为 'Yes' 的图元进行常规和交互的样式设置： ```javascript livedemo /** --在业务中使用时请添加以下代码-- */ @@ -82,66 +158,53 @@ window['vchart'] = vchart; /** --在业务中使用时请删除以下代码-- */ VCHART_MODULE.registerPictogramChart(); /** --在业务中使用时请删除以上代码-- */ -const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/shapes.svg'); + +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: 'rect', - value: 1 - }, - { - name: 'circle', - value: 2 - }, - { - name: 'ellipse', - value: 3 - }, - { - name: 'line', - value: 4 - }, - { - name: 'polyline', - value: 5 - }, - { - name: 'polygon', - value: 6 - }, - { - name: 'path', - value: 7 - }, - { - name: 'text', - value: 8 - } - ] + values: [{ name: 'Yes', value: 'Love This' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }] }, - region: [ - { - roam: { blank: true } - } - ], seriesField: 'name', nameField: 'name', valueField: 'value', - svg: 'shapes', - rect: { - style: { fill: 'red' }, + svg: 'cat', + color: { + specified: { + Yes: '#009A00', + 'So-so': '#FEB202', + Forbidden: '#FE3E00', + Horror: '#FE2B09', + undefined: 'white' + } + }, + pictogram: { + style: { + fill: { + scale: 'color', + field: 'name' + } + } + }, + Yes: { + style: { + stroke: 'black', + lineWidth: 2 + }, state: { - hover: { fillOpacity: 0.5, stroke: 'yellow', lineWidth: 2 } + hover: { + fill: 'green' + } } - } + }, + title: { text: 'Cat Stroking For Beginners' }, + legends: { orient: 'top', filter: false } }; -VChart.registerSVG('shapes', shape); +VChart.registerSVG('cat', shape); const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); @@ -162,14 +225,15 @@ window['vchart'] = vchart; /** --在业务中使用时请删除以下代码-- */ VCHART_MODULE.registerPictogramChart(); /** --在业务中使用时请删除以上代码-- */ -const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/pictogram/shapes-two-rect.svg'); + +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: [] + values: [{ name: 'Yes' }, { name: 'So-so' }, { name: 'Forbidden' }, { name: 'Horror' }] }, region: [ { @@ -179,16 +243,57 @@ const spec = { seriesField: 'name', nameField: 'name', valueField: 'value', - svg: 'shapes-two-rect', - rect: { - style: { fill: 'red' }, + svg: 'cat', + color: { + specified: { + Yes: '#009A00', + 'So-so': '#FEB202', + Forbidden: '#FE3E00', + Horror: '#FE2B09', + undefined: 'white' + } + }, + interactions: [ + { + // 图例的高亮交互 + type: 'element-active-by-legend', + // 根据数据中 name 字段对图元进行过滤 + filterField: 'name' + } + ], + pictogram: { + style: { + fill: { + scale: 'color', + field: 'name' + } + }, state: { - hover: { fillOpacity: 0.5, stroke: 'yellow', lineWidth: 2 } + // 通过图例交互时的样式 + 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('shapes-two-rect', shape); +VChart.registerSVG('cat', shape); const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); @@ -197,6 +302,8 @@ vchart.renderSync(); window['vchart'] = vchart; ``` +更多示例请查看[象形图示例](/vchart/demo/pictogram-chart/pictogram-cow)。 + ### 更多说明 象形图没有在 VChart 默认引入，如需使用，请手动引入象形图。 diff --git a/docs/public/vchart/preview/pictogram-cat_1.13.0.png b/docs/public/vchart/preview/pictogram-cat_1.13.0.png new file mode 100644 index 0000000000..19cdaecd95 Binary files /dev/null and b/docs/public/vchart/preview/pictogram-cat_1.13.0.png differ