VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
Introduction • Demo • Tutorial • API• Cross-Platform
English| 简体中文
(video)
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:
This repository includes the following packages:
vchart
: The core code repository of VChartreact-vchart
: The VChart component encapsulated based on React
taro-vchart
: The VChart component encapsulated based on Taro
lark-vchart
: The VChart component encapsulated based on Lark miniAPP
tt-vchart
: The VChart component encapsulated based on TikTok miniAPP
block-vchart
: The VChart component encapsulated based on Lark Block
wx-vchart
:The VChart component encapsulated based on Wx miniAPP
docs
: VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site.# npm
$ npm install @visactor/vchart
# yarn
$ yarn add @visactor/vchart
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 }
}
};
// 'chart' is the id of your dom container, such as <div id="chart"></chart>
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();
First of all, please install @microsoft/rush
$ npm i --global @microsoft/rush
Then clone locally:
# clone
$ git clone git@github.com:VisActor/VChart.git
$ cd VChart
# install dependencies
$ rush update
# start vchart development server
$ rush start
# start react-vchart development server
$ rush react
# start site development server
$ rush docs
After installation & clone & update, run docs to preview documents locally.
# start vchart document server
$ rush docs
Project | Description |
---|---|
React-VChart | React interface for @VisActor/VChart |
OpenInula-VChart | OpenInula VChart Components |
OMI | Web Components Framework |
If you would like to contribute, please read the Code of Conduct and our contributing guide first。
Small streams converge to make great rivers and seas!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。