Skip to content

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.

License

Notifications You must be signed in to change notification settings

VisActor/VChart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.

IntroductionDemoTutorialAPICross-Platform

npm Version npm Download PRs Welcome

license

English | 简体中文 | 日本語

(video)

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:

  1. Cross-platform: Automatically adapt to desktop, H5, and multiple small program environments
  2. Storytelling: Comprehensive annotation, animation, flow control, narrative templates, and other enhanced features for visual storytelling
  3. Scenes: Deliver visual storytelling capabilities to end-users, unlock developer productivity

Repository Introduction

This repository includes the following packages:

  1. vchart: The core code repository of VChart
  2. react-vchart: The VChart component encapsulated based on React
  3. taro-vchart: The VChart component encapsulated based on Taro
  4. lark-vchart: The VChart component encapsulated based on Lark miniAPP
  5. tt-vchart: The VChart component encapsulated based on TikTok miniAPP
  6. block-vchart: The VChart component encapsulated based on Lark Block
  7. wx-vchart:The VChart component encapsulated based on Wx miniAPP
  8. docs: 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

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 [email protected]: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

💫 Ecosystem

Project Description
React-VChart React interface for @VisActor/VChart
OpenInula-VChart OpenInula VChart Components
OMI Web Components Framework

🤝 Contribution PRs Welcome

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!