紹介

VChart は、VisActor ビジュアライゼーションシステムのチャートコンポーネントライブラリです。ビジュアル文法ライブラリVGrammarに基づいてチャートロジックをラップし、ビジュアルレンダリングエンジンVRenderに基づいてコンポーネントをカプセル化します。コア機能は次のとおりです。

1. クロスプラットフォーム：デスクトップ、H5、および複数の小プログラム環境に自動的に適応
2. ストーリーテリング：ビジュアルストーリーテリングのための包括的な注釈、アニメーション、フロー制御、ナラティブテンプレート、およびその他の強化機能
3. シーン：エンドユーザーにビジュアルストーリーテリング機能を提供し、開発者の生産性を向上させる

リポジトリ紹介

このリポジトリには、次のパッケージが含まれています。

1. vchart: VChart のコアコードリポジトリ
2. react-vchart: Reactに基づいてカプセル化された VChart コンポーネント
3. taro-vchart: Taroに基づいてカプセル化された VChart コンポーネント
4. lark-vchart: Lark miniAPPに基づいてカプセル化された VChart コンポーネント
5. block-vchart: Lark Blockに基づいてカプセル化された VChart コンポーネント
6. wx-vchart： Wx miniAPPに基づいてカプセル化された VChart コンポーネント
7. docs: VChart サイトのソースコード、およびサイトのすべての中国語および英語のドキュメント、チャートサンプルコードなどが含まれています。

🔨 使用方法

📦 インストール

# 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'は、<div id="chart"></chart>のようなDOMコンテナのIDです
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();

⌨️ 開発

まず、 @microsoft/rushをインストールしてください

$ npm i --global @microsoft/rush

次に、ローカルにクローンします：

# クローン
$ git clone [email protected]:VisActor/VChart.git
$ cd VChart
# 依存関係をインストール
$ rush update
# vchart開発サーバーを開始
$ rush start
# react-vchart開発サーバーを開始
$ rush react
# サイト開発サーバーを開始
$ rush docs

📖 ドキュメント

インストール、クローン、更新が完了したら、docs を実行してVTableのドキュメントをローカルでプレビューできます。

# vtableのドキュメントサーバーを起動します。実行パス: ./
$ rush update
$ rush build
$ rush docs

If you meet dependency problems

$ rush purge
$ rush update

🔗 関連リンク

• ホームページ
• VCharts ギャラリー
• VChart チュートリアル
• VChart オプション
• VChart API
• VGrammar
• VRender
• FAQ
• CodeSandbox テンプレート バグレポート用

💫 エコシステム

プロジェクト	説明
React-VChart	@VisActor/VChart の React コンポーネント
OpenInula-VChart	OpenInula の VChart コンポーネント
OMI	Web コンポーネントフレームワーク
vchart と Next.js で構築された Vercel テンプレート	vchart と Next.js で構築されたモダンなダッシュボードテンプレートで、美しい UI と豊富なデータ可視化コンポーネントを備えています。

💖 Thanks

セミ（[semi](https://semi.design/)）によるテーマの視覚的カスタマイズソリューションの提供に感謝します

🤝 貢献

PR を提出する前に、PR のチェックとマージ手順を確認してください。ローカルテスト、自動 CR、単体・視覚テスト、BugServer Photo の手動確認、メンテナーによる承認とマージを説明しています。新ワークフローの有効化状況と対象範囲はガイドを参照してください。

貢献したい場合は、まず行動規範と貢献ガイドをお読みください。

小さな流れが集まり、大きな川や海になります！