{"id":22484749,"url":"https://github.com/VisActor/VChart","last_synced_at":"2025-08-02T17:33:52.330Z","repository":{"id":173598311,"uuid":"649544592","full_name":"VisActor/VChart","owner":"VisActor","description":"VChart, more than just a cross-platform charting library, but also an expressive data storyteller.","archived":false,"fork":false,"pushed_at":"2024-12-05T02:52:07.000Z","size":181934,"stargazers_count":1033,"open_issues_count":196,"forks_count":75,"subscribers_count":20,"default_branch":"develop","last_synced_at":"2024-12-05T03:03:59.998Z","etag":null,"topics":["3dchart","canvas","canvas2d","chart","charting-library","datavisualization","dataviz","narrative-visualization","plot","react-chart","vis","vizualisation","vue-chart"],"latest_commit_sha":null,"homepage":"https://www.visactor.io/vchart","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VisActor.png","metadata":{"files":{"readme":"README.ja-JP.md","changelog":null,"contributing":"CONTRIBUTING.ja-JP.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-05T05:41:43.000Z","updated_at":"2024-12-05T02:52:09.000Z","dependencies_parsed_at":"2023-09-26T08:29:54.207Z","dependency_job_id":"f7d23f54-6e32-476d-ba38-8514a15053bb","html_url":"https://github.com/VisActor/VChart","commit_stats":{"total_commits":5169,"total_committers":40,"mean_commits":129.225,"dds":0.8131166569936158,"last_synced_commit":"8709e85046986ed10f53dff9b26156f7ca47fc85"},"previous_names":["visactor/vchart"],"tags_count":98,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVChart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVChart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVChart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVChart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VisActor","download_url":"https://codeload.github.com/VisActor/VChart/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499919,"owners_count":17929983,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3dchart","canvas","canvas2d","chart","charting-library","datavisualization","dataviz","narrative-visualization","plot","react-chart","vis","vizualisation","vue-chart"],"created_at":"2024-12-06T17:11:29.595Z","updated_at":"2024-12-06T17:12:54.957Z","avatar_url":"https://github.com/VisActor.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-light-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-dark-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eVChart\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nVChartは、クロスプラットフォームのチャートライブラリであるだけでなく、表現力豊かなデータストーリーテラーでもあります。\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.visactor.io/vchart\"\u003e紹介\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vchart/example\"\u003eデモ\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide\"\u003eチュートリアル\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vchart/option/barChart\"\u003eAPI\u003c/a\u003e•\n  \u003ca href=\"https://www.visactor.io/vchart/guide/tutorial_docs/cross-terminal_and_developer_ecology/node\"\u003eクロスプラットフォーム\u003c/a\u003e\n\u003c/p\u003e\n\n![](https://github.com/visactor/vchart/actions/workflows/bug-server.yml/badge.svg)\n![](https://github.com/visactor/vchart/actions/workflows/unit-test.yml/badge.svg)\n[![npm Version](https://img.shields.io/npm/v/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart)\n[![npm Download](https://img.shields.io/npm/dm/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)\n\n![](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)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nEnglish | [简体中文](./README.zh-CN.md) | 日本語\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n（ビデオ）\n\n\u003c/div\u003e\n\n## 紹介\n\nVChartは、VisActorビジュアライゼーションシステムのチャートコンポーネントライブラリです。ビジュアル文法ライブラリ[VGrammar](https://github.com/VisActor/VGrammar)に基づいてチャートロジックをラップし、ビジュアルレンダリングエンジン[VRender](https://github.com/VisActor/VRender)に基づいてコンポーネントをカプセル化します。コア機能は次のとおりです。\n\n1. **クロスプラットフォーム**：デスクトップ、H5、および複数の小プログラム環境に自動的に適応\n2. **ストーリーテリング**：ビジュアルストーリーテリングのための包括的な注釈、アニメーション、フロー制御、ナラティブテンプレート、およびその他の強化機能\n3. **シーン**：エンドユーザーにビジュアルストーリーテリング機能を提供し、開発者の生産性を向上させる\n\n### リポジトリ紹介\n\nこのリポジトリには、次のパッケージが含まれています。\n\n1. [`vchart`](./packages/vchart/): VChartのコアコードリポジトリ\n2. [`react-vchart`](./packages/react-vchart/): [React](https://react.dev/)に基づいてカプセル化されたVChartコンポーネント\n3. [`taro-vchart`](./packages/taro-vchart/): [Taro](https://docs.taro.zone/docs/)に基づいてカプセル化されたVChartコンポーネント\n4. [`lark-vchart`](./packages/lark-vchart/): [Lark miniAPP](https://open.feishu.cn/document/client-docs/gadget/introduction/host-environment)に基づいてカプセル化されたVChartコンポーネント\n5. [`tt-vchart`](./packages/lark-vchart/): [TikTok miniAPP](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/introduction/overview/)に基づいてカプセル化されたVChartコンポーネント\n6. [`block-vchart`](./packages/block-vchart/): [Lark Block](https://open.feishu.cn/document/client-docs/block/block-introduction)に基づいてカプセル化されたVChartコンポーネント\n7. [`wx-vchart`](./packages/wx-vchart/)： [Wx miniAPP](https://developers.weixin.qq.com/miniprogram/dev/framework/)に基づいてカプセル化されたVChartコンポーネント\n8. [`docs`](./docs/): VChartサイトのソースコード、およびサイトのすべての中国語および英語のドキュメント、チャートサンプルコードなどが含まれています。\n\n## 🔨 使用方法\n\n### 📦 インストール\n\n```bash\n# npm\n$ npm install @visactor/vchart\n\n# yarn\n$ yarn add @visactor/vchart\n```\n\n### 📊 チャートの例\n\n\u003cimg src=\"https://user-images.githubusercontent.com/135952300/246996854-95cf0db3-42a2-41f9-8f15-8b7bbec1794c.png\" style=\"width: 500px\"\u003e\n\n```typescript\nimport VChart from '@visactor/vchart';\n\nconst spec = {\n  type: 'bar',\n  data: [\n    {\n      id: 'barData',\n      values: [\n        { month: 'Monday', sales: 22 },\n        { month: 'Tuesday', sales: 13 },\n        { month: 'Wednesday', sales: 25 },\n        { month: 'Thursday', sales: 29 },\n        { month: 'Friday', sales: 38 }\n      ]\n    }\n  ],\n  xField: 'month',\n  yField: 'sales',\n  crosshair: {\n    xField: { visible: true }\n  }\n};\n\n// 'chart'は、\u003cdiv id=\"chart\"\u003e\u003c/chart\u003eのようなDOMコンテナのIDです\nconst vchart = new VChart(spec, { dom: 'chart' });\nvchart.renderAsync();\n```\n\n## ⌨️ 開発\n\nまず、 [@microsoft/rush](https://rushjs.io/pages/intro/get_started/)をインストールしてください\n\n```bash\n$ npm i --global @microsoft/rush\n```\n\n次に、ローカルにクローンします：\n\n```bash\n# クローン\n$ git clone git@github.com:VisActor/VChart.git\n$ cd VChart\n# 依存関係をインストール\n$ rush update\n# vchart開発サーバーを開始\n$ rush start\n# react-vchart開発サーバーを開始\n$ rush react\n# サイト開発サーバーを開始\n$ rush docs\n```\n\n## 📖 ドキュメント\n\nインストールとクローンと更新後、ローカルでドキュメントをプレビューするためにdocsを実行します。\n\n```bash\n# vchartドキュメントサーバーを開始\n$ rush docs\n```\n\n## 🔗 関連リンク\n\n- [ホームページ](https://www.visactor.io/vchart)\n- [VCharts ギャラリー](https://www.visactor.io/vchart/example)\n- [VChart チュートリアル](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)\n- [VChart オプション](https://www.visactor.io/vchart/option/)\n- [VChart API](https://www.visactor.io/vchart/api/API/vchart)\n- [VGrammar](https://www.visactor.io/vgrammar)\n- [VRender](https://www.visactor.io/vrender)\n- [FAQ](https://www.visactor.io/vchart/guide/tutorial_docs/FAQ)\n- [CodeSandbox テンプレート](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) バグレポート用\n\n## 💫 エコシステム\n\n| プロジェクト                                                                               | 説明                          |\n| ------------------------------------------------------------------------------------- | ------------------------------------ |\n| [React-VChart](https://github.com/VisActor/VChart/tree/develop/packages/react-vchart) | @VisActor/VChartのReactインターフェース |\n| [OpenInula-VChart](https://www.visactor.io/vchart/example-openinula) | OpenInula VChartコンポーネント |\n| [OMI](https://omi.cdn-go.cn/home/latest) | Webコンポーネントフレームワーク |\n\n## 🤝 貢献 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)\n\n貢献したい場合は、まず[行動規範](./CODE_OF_CONDUCT.md)と[貢献ガイド](./CONTRIBUTING.md)をお読みください。\n\n小さな流れが集まり、大きな川や海になります！\n\n\u003ca href=\"https://github.com/visactor/vchart/graphs/contributors\"\u003e\u003cimg src=\"https://contrib.rocks/image?repo=visactor/vchart\" /\u003e\u003c/a\u003e\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVisActor%2FVChart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVisActor%2FVChart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVisActor%2FVChart/lists"}