VChart
VChart is a charting component library in VisActor visualization system. It wraps the charting logic based on visual grammar library VGrammar and the component encapsulation based on visual rendering engine VRender. The core capabilities are as follows:
- Cross-platform: Automatically adapt to desktop, H5, and multiple small program environments
- Storytelling: Comprehensive annotation, animation, flow control, narrative templates, and other enhanced features for visual storytelling
- Scenes: Deliver visual storytelling capabilities to end-users, unlock developer productivity
🔨 Usage
📦 Installation
$ npm install @visactor/vchart
$ yarn add @visactor/vchart
📊 A Chart Example
import VChart from '@visactor/vchart';
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ month: 'Monday', sales: 22 },
{ month: 'Tuesday', sales: 13 },
{ month: 'Wednesday', sales: 25 },
{ month: 'Thursday', sales: 29 },
{ month: 'Friday', sales: 38 }
]
}
],
xField: 'month',
yField: 'sales',
crosshair: {
xField: { visible: true }
}
};
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();
⌨️ Development
First of all, please install @microsoft/rush
$ npm i --global @microsoft/rush
Then clone locally:
$ git clone git@github.com:VisActor/VChart.git
$ cd VChart
$ rush update
$ rush start
$ rush run -p @visactor/vchart -s start
$ rush run -p @visactor/vchart -s test
🔗 Related Links