VGrammar 0.13.4
Examples
Tutorials
Options
API
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=VisActor/VGrammar option documents!!!###!!!!!!###!!!description=VisActor/VGrammar option documents. This chapter mainly introduces VGrammar configuration items and their usage to quickly generate the required visualization scenarios.!!!###!!!

signals

Array

Used to create dynamic variables

data

Array

scales

Array

Scale related configuration

scales-band

*

band scale is mainly used to map discrete data to continuous intervals.

marks

*

Graphic element configuration, supporting multiple types

marks-rect

Object

Rectangle Element

marks-arc

Object

arc element

marks-symbol

Object

Symbol Element

marks-circle

Object

circle graphic element

marks-polygon

Object

polygon mark

marks-shape

Object

shape Primitive

marks-path

Object

Path element

marks-area

Object

area mark

marks-line

Object

Line graphic element Test it out

marks-rule

Object

Rule geom

marks-image

Object

Image mark

marks-richtext

Object

Richtext Graphic Element

marks-text

Object

text primitive

marks-interval

Object

Interval Graphic element

marks-cell

Object

Cell Graphic Element

marks-group

Object

group Mark

marks-glyph

Object

glyph Chart Element

marks-component

Object

component Graphics

marks-arc3d

Object

arc3d Graphic Element

marks-pyramid3d

Object

pyramid3d primitive

marks-rect3d

Object

rect3d Primitive

coordinates

*

Coordinate system configuration, VGrammar currently has two built-in types of coordinate systems

coordinates-rect

*

Rectangular coordinate system, which can set transformations on it to achieve chart transformations, such as row and column transposition.

coordinates-polar

*

Polar coordinate system, which can convert Cartesian coordinate system coordinates into polar coordinate system coordinates and can be used to transform Cartesian coordinate system charts into polar coordinate system charts.

projections

Array

Map projection methods, documentation can be referenced:

events

Array

Event configuration

width

number

The total width of the canvas

height

number

The total height of the canvas

padding

number

The inner padding of canvas, in px unit, with the default padding of 0 for all directions. Accepts numerical values, numerical arrays, and objects for settings.

Example of usage:

// Numerical type, set the padding to 5
padding: 5;
// Numerical array, set the top and bottom padding to 5, and the left and right padding to 10, similar to the CSS box model
padding: [5, 10];
// Numerical array, set the padding for all four directions separately
padding: [
  5, // Top
  10, // Right
  5, // Bottom
  10 // Left
];
// Object type
padding: {
  top: 5,
  right: 10,
  bottom: 5,
  left: 10
}

background

*

Set the background of the canvas