Skip to content

Latest commit

 

History

History
185 lines (139 loc) · 8.5 KB

README.ja-JP.md

File metadata and controls

185 lines (139 loc) · 8.5 KB

VChart

VChart は、クロスプラットフォームのチャートライブラリであるだけでなく、表現力豊かなデータストーリーテラーでもあります。

紹介 • デモ • チュートリアル • API• クロスプラットフォーム

npm Version npm Download PRs Welcome

license

English | 简体中文 | 日本語

（ビデオ）

紹介

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. tt-vchart: TikTok miniAPPに基づいてカプセル化された VChart コンポーネント
  6. block-vchart: Lark Blockに基づいてカプセル化された VChart コンポーネント
  7. wx-vchart： Wx miniAPPに基づいてカプセル化された VChart コンポーネント
  8. 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 を実行します。

# vchartドキュメントサーバーを開始
$ rush docs

🔗 関連リンク

💫 エコシステム

プロジェクト 説明
React-VChart @VisActor/VChart の React インターフェース
OpenInula-VChart OpenInula VChart コンポーネント
OMI Web コンポーネントフレームワーク

💖 Thanks

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

🤝 貢献 PRs Welcome

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

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