Awesome
<div align="center"> <a href="https://github.com/VisActor#gh-light-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/> </a> <a href="https://github.com/VisActor#gh-dark-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/> </a> </div> <div align="center"> <h1>VChart</h1> </div> <div align="center">VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
<p align="center"> <a href="https://www.visactor.io/vchart">Introduction</a> • <a href="https://www.visactor.io/vchart/example">Demo</a> • <a href="https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide">Tutorial</a> • <a href="https://www.visactor.io/vchart/option/barChart">API</a>• <a href="https://www.visactor.io/vchart/guide/tutorial_docs/cross-terminal_and_developer_ecology/node">Cross-Platform</a> </p> </div> <div align="center"> </div> <div align="center">(video)
</div>Introduction
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
Repository Introduction
This repository includes the following packages:
vchart
: The core code repository of VChartreact-vchart
: The VChart component encapsulated based on Reacttaro-vchart
: The VChart component encapsulated based on Tarolark-vchart
: The VChart component encapsulated based on Lark miniAPPtt-vchart
: The VChart component encapsulated based on TikTok miniAPPblock-vchart
: The VChart component encapsulated based on Lark Blockwx-vchart
:The VChart component encapsulated based on Wx miniAPPdocs
: VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site.
🔨 Usage
📦 Installation
# npm
$ npm install @visactor/vchart
# yarn
$ yarn add @visactor/vchart
📊 A Chart Example
<img src="https://user-images.githubusercontent.com/135952300/246996854-95cf0db3-42a2-41f9-8f15-8b7bbec1794c.png" style="width: 500px">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();
⌨️ Development
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
📖 Documents
After installation & clone & update, run docs to preview documents locally.
# start vchart document server
$ rush docs
🔗 Related Links
- Homepage
- VCharts Gallery
- VChart Tutorials
- VChart Options
- VChart API
- VGrammar
- VRender
- FAQ
- CodeSandbox Template for bug reports
💫 Ecosystem
Project | Description |
---|---|
React-VChart | React interface for @VisActor/VChart |
OpenInula-VChart | OpenInula VChart Components |
OMI | Web Components Framework |
🤝 Contribution
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!
<a href="https://github.com/visactor/vchart/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vchart" /></a>