SVAR ガント: React 用の新しいオープンソース、インタラクティブなガント チャート

React アプリにプロジェクト管理機能を実装する必要がありますか?おそらく、ガント チャートは長年にわたってプロジェクト計画に効果的なツールであったため、オプションとして検討したことがあるでしょう。

しかし、React でカスタムの機能豊富なガント チャートを実装するのは困難で時間がかかる場合があります。そのため、SVAR チームは、Web アプリに強力なプロジェクトの視覚化をもたらすオープンソースのインタラクティブ UI コンポーネントである SVAR React Gantt をリリースしました。

なぜ別のガント チャート ライブラリがあるのですか?

SVAR Gantt は React 開発者を念頭に置いて構築されています。使いやすく、高度にカスタマイズ可能で、開発時間を何時間も節約できるように設計されています。最も重要なガント ダイアグラム機能を提供するだけでなく、超高速のパフォーマンスで大量のデータを処理します。

プロジェクト管理ツール、スケジュール システム、またはタイムラインの視覚化が必要なアプリケーションを構築している場合でも、最小限の労力で視覚的に魅力的でインタラクティブなガント チャートを構築して実行できます。

それでは、SVAR React Gantt の主な機能は何でしょうか?

✅ コアタスク管理

SVAR React Gantt コンポーネントは、すぐに使用できる重要なタスク管理機能を提供します。ユーザーは簡単なフォームを使用してタスクを作成、編集、削除できます。タスクの期間と開始/終了日は、ドラッグ アンド ドロップでタイムライン上で直接編集することもできます。

このコンポーネントは、タスク、サマリー タスク (サブタスクに基づいて自動計算)、およびマイルストーンの 3 つのタスク タイプの操作をサポートします。各タスク バーには進行状況がパーセンテージで表示され、ユーザーはこれを変更できます。すべてのサブタスクを考慮して進捗状況を自動的に計算するようにサマリー タスクを設定することもできます。

➡️ スマートな依存関係

SVAR Gantt を使用すると、タスクの関係を簡単に処理できます。このコンポーネントは、エンドツースタート、スタートツースタート、エンドツーエンド、スタートツーエンドといったさまざまな依存関係の種類をサポートします。すべての依存関係は、タスク編集フォームを介して、またはタイムライン上で直接管理できます。

?インタラクティブ UI 機能

SVAR Gantt は、ユーザーがタスクを完全に制御できる最新の対話型インターフェイスを提供します。以下をサポートします:

• ドラッグアンドドロップでタスクを編集
• 使いやすいタスク編集フォーム
• 視覚的な進捗状況の追跡
• グリッド内のタスクの並べ替え
• コンテキスト メニューとツールバーを追加する機能
• スクロールによるズーム

?豊富なカスタマイズ

ユーザーは UI を介してガント チャートのコンテンツとレイアウトを制御できますが、開発者は次のようなコンポーネントの外観と操作性を完全に制御できます。

• カスタマイズ可能なタスク バーのスタイル (フォーム、色、フォント)
• 構成可能なタイムラインの寸法と境界線
• 週末/休日のハイライト
• タスク バーのカスタム ツールチップ
• 明るいテーマまたは暗いテーマのオプション

⚡ 拡張性のあるパフォーマンス

SVAR Gantt を使用すると、大量のタスクやプロジェクトであっても、パフォーマンスと応答性の点で安全性を確保できます。アップデートの処理に関しては、クライアントとサーバーのやり取りを簡素化する特別なヘルパーを提供しています。

最高のパフォーマンスと効果的なデータ処理が得られます:

• 大規模なデータセットの効率的な処理
• 動的サブタスクの読み込み
• 最適化されたレンダリング
• シームレスなバックエンド統合のための RestDataProvider
• バッチ更新のサポート

はじめに

SVAR Gantt をプロジェクトに追加するには、npm 経由でインストールします。

npm install wx-react-gantt

次に、コンポーネントを React ファイルに含めます。

<script>
    import { Gantt } from "wx-react-gantt";

    const tasks = [
        {
            id: 1,
            start: new Date(2024, 3, 2),
            end: new Date(2024, 3, 17),
            text: "Project planning",
            progress: 30,
            parent: 0,
            type: "summary",
            open: true,
            details: "Outline the project's scope and resources.",
        },
    ];
    const links = [];
    const scales = [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "day", step: 1, format: "d", css: dayStyle },
    ];
</script>

<gantt></gantt>

詳細については、詳細なスタートガイドをご覧ください。

次は何ですか?

次のプロジェクトで SVAR Gantt を試してみてください!ぜひフィードバックをお聞きになり、それを使って何を構築するかご覧ください。以下は、独自のカスタム ガント チャートの構築を開始するのに役立つ便利なリソースのリストです:

• ? SVAR ガントのホームページ
• ?ドキュメント
• ?ライブデモ
• ?ディスカッションフォーラム

以上がSVAR ガント: React 用の新しいオープンソース、インタラクティブなガント チャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。