VisActor/VChart

Última actividad de origen registrada: 20 de octubre de 2026 a las 08:38

Catálogo de SkillsMP actualizado: 9 de noviembre de 2026 a las 14:22

skills recopiladas: 2

Estrellas en GitHub: 1855
Forks en GitHub: 222

Instalar con un asistente de IA

Copia este prompt en el asistente de IA que estés usando.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/VisActor/VChart.

README del repositorio

Archivo de origen del README: README.md

Leer el README original

Mostrar README completo

<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> ![](https://github.com/visactor/vchart/actions/workflows/bug-server.yml/badge.svg) ![](https://github.com/visactor/vchart/actions/workflows/unit-test.yml/badge.svg) [![npm Version](https://img.shields.io/npm/v/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request) ![](https://img.shields.io/badge/language-TypeScript-red.svg) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart/blob/main/LICENSE) </div> <div align="center"> English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md) </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](https://github.com/VisActor/VGrammar) and the component encapsulation based on visual rendering engine [VRender](https://github.com/VisActor/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`](./packages/vchart/): The core code repository of VChart 2. [`react-vchart`](./packages/react-vchart/): The VChart component encapsulated based on [React](https://react.dev/) 3. [`taro-vchart`](./packages/taro-vchart/): The VChart component encapsulated based on [Taro](https://docs.taro.zone/docs/) 4. [`lark-vchart`](./packages/lark-vchart/): The VChart component encapsulated based on [Lark miniAPP](https://open.feishu.cn/document/client-docs/gadget/introduction/host-environment) 5. [`block-vchart`](./packages/block-vchart/): The VChart component encapsulated based on [Lark Block](https://open.feishu.cn/document/client-docs/block/block-introduction) 6. [`wx-vchart`](./packages/wx-vchart/)：The VChart component encapsulated based on [Wx miniAPP](https://developers.weixin.qq.com/miniprogram/dev/framework/) 7. [`docs`](./docs/): VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site. ## 🔨 Usage ### 📦 Installation ```bash # 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"> ```typescript 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](https://rushjs.io/pages/intro/get_started/) ```bash $ npm i --global @microsoft/rush ``` Then clone locally: ```bash # 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 VTable documents locally. ```bash # start vtable document server. execute in file path: ./ $ rush update $ rush build $ rush docs ``` # If you meet dependency problems ```bash $ rush purge $ rush update ``` ## 🔗 Related Links - [Homepage](https://www.visactor.io/vchart) - [VCharts Gallery](https://www.visactor.io/vchart/example) - [VChart Tutorials](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide) - [VChart Options](https://www.visactor.io/vchart/option/) - [VChart API](https://www.visactor.io/vchart/api/API/vchart) - [VGrammar](https://www.visactor.io/vgrammar) - [VRender](https://www.visactor.io/vrender) - [FAQ](https://www.visactor.io/vchart/faq/) - [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for bug reports ## 💫 Ecosystem | Project | Description | | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | [React-VChart](https://github.com/VisActor/VChart/tree/develop/packages/react-vchart) | React interface for @VisActor/VChart | | [OpenInula-VChart](https://www.visactor.io/vchart/example-openinula) | OpenInula VChart Components | | [OMI](https://omi.cdn-go.cn/home/latest) | Web Components Framework | | [A vercel template built with vchart and Next.js](https://vercel.com/templates/next.js/visactor-nextjs-template) | A modern dashboard template built with vchart and Next.js, featuring a beautiful UI and rich data visualization components. | ## Star History <a href="https://gitdata.xuanhun520.com/#visactor/vchart&Date"> <picture > <img style="width: 800px; height: 533px;" alt="Star History Chart" src="https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark" /> </picture> </a> ## 💖 Thanks <div> <a href="https://semi.design/#gh-dark-mode-only" target="_blank"> <img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi-dark.svg"/> </a> <a href="https://semi.design/#gh-light-mode-only" target="_blank"> <img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi.svg"/> </a> </div> Thanks to [Semi](https://semi.design/) for providing the theme visualization customization solution. ## 🤝 Contribution [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request) Before submitting a PR, read [PR checks and merge process](./CONTRIBUTING.md#pr-checks-and-merge-process) for local testing, automated CR, unit and visual checks, manual BugServer Photo verification, and maintainer approval and merge. See the guide for the activation status and scope of the new workflow. If you would like to contribute, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and our [contributing guide](./CONTRIBUTING.md) 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>

Cargando el README del repositorio…

Skills en este repositorio

clasificación pendiente

skill

ocupación

descripción

actualizado

vchart-development-assistant

sin clasificar

使用 VChart 生成可查看的 HTML 或供宿主消费的完整 spec，修改和诊断图表配置，从截图还原样式，并支持 React-VChart 和图表交互。用于 VChart 图表生成、配置、排错和应用集成。

Idioma del texto original: chino

2026-10-20

data-science-visualization

sin clasificar

从真实表格或已有统计与模型结果生成简洁的交互数据科学图表 HTML，按问题与数据条件选图，支持按需交互和对话改图。用于看数据和展示结果；完整分析报告或应用开发使用对应工作流。

Idioma del texto original: chino

2026-10-19

Mostrando 2 de 2 skills recopiladas.