Pictogram

[Option Items]

Introduction

Pictogram Charts are a form of chart that uses graphics, symbols, and images to represent data. Different from traditional numerical charts such as bar charts and line charts, pictogram-style charts present data in an image-based way, which is easier to understand and remember. This type of chart can emphasize the visual effect of data, allowing viewers to grasp the key information of the data more quickly.

Chart Composition

The configuration of pictograms is somewhat similar to that of maps and mainly consists of the following components:

• svg materials
• data The data fields and data mappings of pictograms have the following configurations:
• pictogramChart.type: The chart type. The type of pictogram is 'pictogram'.
• pictogramChart.data: The data source for chart drawing.
• pictogramChart.nameField: The field declared as the name property, used to associate with graphic elements in the SVG. A set of data is defined as follows:
• For more component configurations, see VChart pictogramChart Configuration.

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.

Or you can obtain SVG resources through requests:

Key Configurations

• 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:

For graphic elements with the same name, the style settings and interactions will take effect simultaneously. For example:

For more examples, please see Pictogram Example.

More Explanations

Pictograms are not included in the VChart by default. If you need to use them, please manually import pictograms.

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