mirror of https://github.com/VisActor/VChart synced 2024-11-22 07:58:59 +00:00

Ikko Eltociear Ashimine 523a8c1afa docs: add Japanese versions of README.md and CONTRIBUTING.md

I created Japanese translated documents.

2024-10-17 21:28:04 +09:00

7.8 KiB

Raw Blame History

VChart

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

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

English | 简体中文 | 日本語

（ビデオ）

紹介

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

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

リポジトリ紹介

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

vchart: VChartのコアコードリポジトリ
react-vchart: Reactに基づいてカプセル化されたVChartコンポーネント
taro-vchart: Taroに基づいてカプセル化されたVChartコンポーネント
lark-vchart: Lark miniAPPに基づいてカプセル化されたVChartコンポーネント
tt-vchart: TikTok miniAPPに基づいてカプセル化されたVChartコンポーネント
block-vchart: Lark Blockに基づいてカプセル化されたVChartコンポーネント
wx-vchart： Wx miniAPPに基づいてカプセル化されたVChartコンポーネント
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 git@github.com: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コンポーネントフレームワーク

🤝 貢献

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

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

7.8 KiB Raw Blame History Unescape Escape