SVAR Gantt: Neues Open Source, interaktives Gantt-Diagramm für React

Müssen Sie Projektmanagementfunktionen in Ihrer React-App implementieren? Höchstwahrscheinlich haben Sie ein Gantt-Diagramm als Option in Betracht gezogen, da es seit vielen Jahren ein wirksames Werkzeug für die Projektplanung ist.

Die Implementierung eines benutzerdefinierten, funktionsreichen Gantt-Diagramms in React kann jedoch herausfordernd und zeitaufwändig sein. Aus diesem Grund hat das SVAR-Team SVAR React Gantt veröffentlicht, eine interaktive Open-Source-UI-Komponente, die eine leistungsstarke Projektvisualisierung in Ihre Web-Apps bringt.

Warum eine weitere Gantt-Diagrammbibliothek?

SVAR Gantt wurde speziell für React-Entwickler entwickelt. Es ist benutzerfreundlich, hochgradig anpassbar und so konzipiert, dass Sie Stunden an Entwicklungszeit sparen. Es bietet nicht nur die wichtigsten Gantt-Diagrammfunktionen, sondern verarbeitet auch große Datenmengen mit blitzschneller Leistung.

Ganz gleich, ob Sie ein Projektmanagement-Tool, ein Planungssystem oder eine andere Anwendung erstellen, die eine Zeitachsenvisualisierung benötigt, Sie können mit minimalem Aufwand ein optisch ansprechendes, interaktives Gantt-Diagramm erstellen und ausführen.

Was sind also die Hauptfunktionen von SVAR React Gantt?

✅ Kernaufgabenverwaltung

Die SVAR React Gantt-Komponente bietet sofort wichtige Aufgabenverwaltungsfunktionen. Ermöglichen Sie Ihren Benutzern das Erstellen, Bearbeiten und Löschen von Aufgaben über ein einfaches Formular. Die Dauer und das Start-/Enddatum der Aufgaben können auch direkt auf der Zeitleiste per Drag-and-Drop bearbeitet werden.

Die Komponente unterstützt drei Aufgabentypen zum Arbeiten: Aufgabe, Sammelaufgabe (automatisch berechnet basierend auf Unteraufgaben) und Meilenstein. Jede Taskleiste zeigt den Fortschritt als Prozentsatz an, den Benutzer ändern können. Sie können die Sammelaufgaben auch so einrichten, dass der Fortschritt unter Berücksichtigung aller Unteraufgaben automatisch berechnet wird.

➡️ Intelligente Abhängigkeiten

Mit SVAR Gantt können Sie Aufgabenbeziehungen einfach verwalten. Die Komponente unterstützt verschiedene Abhängigkeitstypen: End-to-Start, Start-to-Start, End-to-End und Start-to-End. Alle Abhängigkeiten können über das Aufgabenbearbeitungsformular oder direkt auf der Zeitleiste verwaltet werden.

? Interaktive UI-Funktionen

SVAR Gantt bietet eine moderne und interaktive Oberfläche, um Benutzern die volle Kontrolle über die Aufgaben zu geben. Es unterstützt:

• Aufgabenbearbeitung per Drag-and-Drop
• Benutzerfreundliches Aufgabenbearbeitungsformular
• Visuelle Fortschrittsverfolgung
• Aufgaben im Raster neu anordnen
• Die Möglichkeit, ein Kontextmenü und eine Symbolleiste hinzuzufügen
• Zoomen mit Scrollen

? Umfangreiche Anpassung

Während Benutzer den Inhalt und das Layout des Gantt-Diagramms über die Benutzeroberfläche steuern können, haben Sie als Entwickler die volle Kontrolle über das Erscheinungsbild der Komponente, einschließlich:

• Anpassbare Taskleistenstile (Form, Farbe, Schriftart)
• Konfigurierbare Zeitleistenabmessungen und -ränder
• Hervorhebung von Wochenenden/Feiertagen
• Benutzerdefinierte Tooltips für Taskleisten
• Helle oder dunkle Themenoptionen

⚡ Skalierbare Leistung

Mit SVAR Gantt können Sie auch bei einer großen Anzahl an Aufgaben und Projekten auf der sicheren Seite sein, was Leistung und Reaktionsfähigkeit angeht. Für die Handhabung der Updates bieten wir einen speziellen Helfer an, um die Client-Server-Interaktionen zu vereinfachen.

Das erhalten Sie für die beste Leistung und effektive Datenverarbeitung:

• Effizienter Umgang mit großen Datenmengen
• Dynamisches Laden von Unteraufgaben
• Optimiertes Rendering
• RestDataProvider für nahtlose Backend-Integration
• Unterstützung für Batch-Updates

Erste Schritte

Um SVAR Gantt zu Ihrem Projekt hinzuzufügen, installieren Sie es über npm:

npm install wx-react-gantt

Dann fügen Sie die Komponente in Ihre React-Datei ein:

<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 {tasks} {links} {scales} />

Weitere Informationen finden Sie im ausführlichen Leitfaden „Erste Schritte“.

Was kommt als nächstes?

Probieren Sie SVAR Gantt bei Ihrem nächsten Projekt aus! Wir würden gerne Ihr Feedback hören und sehen, was Sie damit bauen. Hier ist die Liste nützlicher Ressourcen, die Ihnen den Einstieg und die Erstellung Ihres eigenen benutzerdefinierten Gantt-Diagramms erleichtern:

• ? SVAR Gantt-Homepage
• ? Dokumentation
• ? Live-Demos
• ? Diskussionsforum

Das obige ist der detaillierte Inhalt vonSVAR Gantt: Neues Open Source, interaktives Gantt-Diagramm für React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!