象形图

[配置项]

简介

象形图（Pictogram Charts）是一种使用图形、符号和图像来表示数据的图表形式。与传统的条形图、折线图等数值图表不同，象形图式图表通过图像化的方式呈现数据，更容易理解和记忆。这种图表可以强调数据的视觉效果，使观众更快速地抓住数据的关键信息。

图表构成

象形图的配置方式与地图有一些类似，主要由以下组件构成：

• svg 素材
• 数据

象形图的数据字段及数据映射有如下配置：

• pictogramChart.type: 图表类型，象形图的类型为'pictogram'

• pictogramChart.data: 图表绘制的数据源

• pictogramChart.nameField 属性声明为名称的字段，用于与 SVG 中的图形元素进行关联

• 更多组件配置见VChart pictogramChart 配置

快速上手

可以使用 SVG 字符作为素材，目前 VChart 支持的 SVG 图元包括：

• rect
• line
• path
• polygon
• circle
• ellipse
• polyline
• text
• tspan
• g

包括 defs/style/switch/C/Q/pattern/use 等用法暂不支持。

这里有一个简单的例子，这个例子中，图表没有任何数据，所以没有任何数据映射，只是一个对 SVG 素材的展示。

或者可以通过请求获取 SVG 资源：

关键配置

• nameField 属性声明为名称字段配置，用于使得 SVG 中的图形元素与数据中相同 nameField 值的数据项进行关联
• valueField 属性声明为值字段配置
• pictogram 所有关联了 name 的图元的样式配置。（其他图元的样式与 SVG 定义一致，无法配置）

对于有指定名称（name 属性） 的元素，可以通过名称配置其指定样式，例如下面这个例子，可以对命名为 'Yes' 的图元进行常规和交互的样式设置：

对于拥有相同名称的图元，在样式设置、交互时会同时生效，例如：

更多示例请查看象形图示例。

更多说明

象形图没有在 VChart 默认引入，如需使用，请手动引入象形图。

import { registerPictogramChart } from '@visactor/vchart';
registerPictogramChart();