VTable 1.25.0
Tutorials
Contributing
Options
API
FAQ
Changelogs
Playground
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 Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

!!!###!!!title=chart——VisActor/VTable tutorial documents!!!###!!!!!!###!!!description=In the previous article, we introduced how to display minigraphs in cells. Minigraphs can do simple trend analysis and style configuration. If you want to apply the more powerful chart VChart to tables, please take a look at this tutorial.!!!###!!!

Cell display chart

In the previous article, we introduced how to display minigraphs in cells. Minigraphs can do simple trend analysis and style configuration. If you want to apply the more powerful chart VChart to tables, please take a look at this tutorial.

Inject Chart Components

Before using it, you need to inject the used chart library components:

import VChart from '@visactor/vchart';
VTable.register.chartModule('vchart', VChart);

About why you need to configure a name to register VChart'vchart'? We have plans to access other chart libraries.

Table display typecellTypeSet tochartUsed to generate charts.

  • cellType: 'chart'//chart chart type
  • chartModule: 'vchart'//vchart is the name configured during registration
  • Chart Spec :{ } // chart configuration item, support funciton define

Where the chartSpec configuration item correspondsVChart configuration

Chart chart data

Chart The chart data comes from the records set to the table. If it is basic table data, it can be set as follows:

[
    {
        "personid": 1,
        "areaChart": [{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 111}],
        "scatterChart": [{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130}]]
    },
    {
        "personid": 2,
        "areaChart": [{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 111}{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130}],
        "scatterChart": [{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 111}{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100}]
    }
]

There are three fields in our records: persionid, areaChart, scatterChart, where areaChart and scatterChart are the two data that need to be provided for chart use.

example

We use the above data to display different chart effects with different specs:

Through the above introduction and examples, we can quickly create and configure the table display type sparkline miniature in VTable. Although only line graphs are currently supported, with subsequent development, the functions and types of minigraphs will become more and more perfect, providing more convenient and practical functions for data lake visualization.