DHTMLX Gantt Überblick
DHTMLX Gantt ist das anpassungsfähigste JavaScript-Gantt-Diagramm, komplett mit TypeScript-Definitionen. Es ist für den Aufbau fortgeschrittener Planungs- und Zeitplanungsoberflächen konzipiert. Es integriert sich mit React, Angular, Vue und anderen Frontend-Frameworks. DHTMLX Gantt unterstützt auch AI-unterstützte Entwicklung durch den DHTMLX MCP Server, Agent Skills und eine strukturierte API.
Sie können es in Projektmanagement, ERP, Bauwesen, Fertigung, Field Service, SaaS und anderen geschäftlichen Anwendungen einsetzen, die eine konfigurierbare visuelle Timeline erfordern.
Schneller Einstieg je Framework
Sie können DHTMLX Gantt als Vanilla-JavaScript-Widget verwenden oder in ein modernes Framework integrieren. Beginnen Sie mit einer Schritt-für-Schritt-Anleitung, die zu Ihrer bevorzugten Technologie passt:
React, Angular und Vue unterstützen zwei Integrationsansätze:
- Offizielle React Gantt, Angular Gantt und Vue Gantt Wrappers (empfohlen für PRO- und Evaluierungsprojekte)
- Direkte Integration der Kern-JavaScript-Gantt-Komponente mit React, Angular, Vue (Community-Edition)
Live-Demos
Um DHTMLX Gantt in Aktion zu sehen, erkunden Sie einige der beliebtesten Demos:
- Grundlegendes Gantt-Diagramm mit Aufgaben und Verknüpfungen.
- Beispiele für Auto-Scheduling und kritischen Pfad.
- Ressourcenmanagement: Diagramm und Histogramm.
- Alle Beispiele durchsuchen für den kompletten Funktionsumfang.
View Alle Beispiele to check the full range of Gantt features.
Für Framework-orientierte Einstiegspunkte siehe die Beispiel-Repositories für React, Angular, and Vue.
Einige Beispiele demonstrieren PRO-Funktionalität, prüfen Sie daher vor der erneuten Verwendung in einem Community-Edition-Projekt den Community vs PRO-Vergleich.
Entwicklerressourcen
- Installationsanleitung für Community-, Test- und PRO-Einrichtungsabläufe
- Community vs PRO-Vergleich für Funktionsunterschiede zwischen Editionen
- Öffentliches npm-Paket des JavaScript-Gantt unter der Community-Edition
- GitHub-Repository für den Quellcode der Community-Edition und das Issue-Tracking
- API-Referenz und Beispiele für Implementierungsdetails
- Was gibt's Neues für Releases und Migrationshinweise
Gantt-Funktionen im Überblick
DHTMLX Gantt umfasst eine Planungs-Engine, eine flexible Timeline und Ressourcenwerkzeuge.
Projektplanung
Im Kern kümmert sich die Planungs-Engine um die Projektstruktur und die Arbeitszeit. Sie deckt ab:
- Aufgabentypen und Abhängigkeiten.
- Arbeitszeit-Konfiguration mit Aufgaben- und Projektkalendern sowie ressourcen-spezifischen Kalendern (PRO-Version).
- Automatische Planung zur Neuberechnung von Plänen (PRO-Version).
- Kritischer Pfad zur Hervorhebung der Aufgaben, die das Projektfinish bestimmen (PRO-Version).
Gitter und Zeitachse
Die Komponente kombiniert ein Datenraster links mit einer zoombaren Zeitachse rechts. Beide Teile sind umfangreich konfigurierbar:
- Flexible Layout mit zusätzlichen Gittern, Spalten auf der rechten Seite und benutzerdefinierten Panels.
- Konfigurierbare Spalten mit Inline-Bearbeitung, Drag-and-Drop und Tastaturnavigation, plus Mehrfachauswahl (PRO-Version).
- Anpassbare Zeitachse mit Markern und hervorgehobenen Zeitfenstern.
Erweiterte Projektkontrollen (PRO)
Für Teams, die mehr als eine einfache Timeline benötigen, bietet die PRO-Edition Werkzeuge für eine detaillierte Projektverfolgung:
- Grundlinien und Fristen zum Vergleich geplanter Daten mit aktuellen.
- Nicht geplante Aufgaben und Aufgaben-Teilung für unvollständige, unterbrochene oder gestaffelte Arbeiten.
Ressourcen- und Auslastungsmanagement (PRO)
Die PRO-Edition ergänzt eine dedizierte Ressourcenschicht, die das Gantt-Diagramm zu einer Planungsoberfläche macht, die sowohl Aufgabenplanung als auch Auslastungssichtbarkeit abdeckt. Sie enthält:
- Ressourcen-Zuweisungen, die Ressourcen präzise Aufgaben zuweisen.
- Ressourcen-Histogramme und Ressourcenauslastungsdiagramme zur Visualisierung der Team-Auslastung.
- Aufgaben nach Ressource gruppieren, um Auslastungen zu verfolgen, Konflikte zu erkennen und das Team zu balancieren.
Export und Ökosystem
Teams migrieren oft zwischen Plattformen, behalten lokale Backups oder führen Analysen anderswo durch. DHTMLX Gantt lässt sich mit externen Tools und Ausgabeformaten integrieren, indem es Folgendes unterstützt:
- Export nach PDF/PNG und Excel, einschließlich eines Node.js-Exportmoduls.
- Export/Import nach MS Project und Primavera über den unterstützten Export-Service.
Interaktivität und Bearbeitung
Benutzende können Daten direkt im Diagramm bearbeiten, nicht nur ansehen. Dies wird unterstützt durch:
- Einen konfigurierbaren Lightbox-Editor zum Anzeigen und Bearbeiten von Aufgabendetails, mit Unterstützung für benutzerdefinierte Felder und Buttons.
- Schnellinfo-Popups und Tooltips, die Aufgabendetails sichtbar machen, ohne ein vollständiges Formular zu öffnen.
- Drag-and-Drop-Erstellung und -Auswahl von Aufgaben, plus Maus-Drag-Scrollen der Timeline.
- Tastatur-Navigation und Unterstützung für Barrierefreiheit.
- Rückgängig/Wiederherstellen-Verlauf für sicheres Bearbeiten.
Anpassung und Styling
Das Erscheinungsbild des Diagramms lässt sich auf jeder Ebene anpassen – vom gesamten Design bis hin zu einzelnen Vorgangsbalken –, und zwar durch:
- Eine Reihe integrierter Skins auf Basis von CSS-Variablen, die umfassende individuelle Anpassungen sowie die Erstellung neuer Designs ermöglichen.
- Vorlagen, mit denen sich die Darstellung von Vorgängen, Verbindungen und Rasterzellen individuell anpassen lässt.
- Differenzierte Möglichkeiten zur Farbgebung von Vorgängen und zur Gestaltung von Verbindungen, um bestimmte Elemente optisch hervorzuheben.
- Unterstützung für die Lokalisierung von Benutzeroberflächensprache sowie Datums- und Zeitformaten.
Editionen und Lizenzierung
DHTMLX Gantt ist in zwei Editionen erhältlich: Community und PRO. Sie können mit der kostenlosen Community-Edition beginnen und später auf die PRO-Edition upgraden, wenn Sie mehr Funktionen, offiziellen Support und eine vollständig gepflegte Gantt-Grundlage benötigen. Sie können auch direkt mit der PRO-Edition beginnen, entweder über ein offizielles Trial oder mit einer kostenpflichtigen Lizenz. Wählen Sie eine der folgenden Optionen, um mit DHTMLX Gantt zu starten:
- Community Edition. Kostenlos und MIT-lizenziert, deckt die Kernfunktionen des interaktiven Gantt-Diagramms für DHTMLX Gantt v10+ ab.
- Offizielles Trial. Ermöglicht Ihnen, das volle PRO-Funktionspaket zu evaluieren und während der Testphase technischen Support zu erhalten.
- PRO-Edition. Für produktive Umgebungen konzipiert, umfasst er fortgeschrittene Planungsfunktionen, offiziellen Support und kommerzielle Lizenzierung.
Um die genauen Funktionsunterschiede zwischen Editionen zu sehen, prüfen Sie den Community vs PRO-Vergleich. Für den Installationsablauf jeder Option siehe die Installationsanleitung.
Wenn Sie von einer früheren GPL-Version migrieren, verwenden Sie den Migrationsleitfaden. DHTMLX Gantt v10 und später werden nicht mehr unter GPL veröffentlicht; GPL v2 gilt nur für frühere Versionen.
KI-Codierwerkzeuge
Für AI-unterstützte Entwicklung beginnen Sie mit den speziell für Codierassistenten erstellten DHTMLX Gantt-Guides:
- Leitfaden zu KI-Werkzeugen
- DHTMLX MCP-Server Leitfaden
- Agentenfähigkeiten Leitfaden
- Lovable AI-Integrationsleitfaden
Backend-Integration
Mit DHTMLX Gantt können Sie eine Verbindung zu jedem beliebigen Backend herstellen, indem Sie eine RESTful API auf dem Server implementieren:
- Daten für Vorgänge, Verknüpfungen, Ressourcen und Zuweisungen werden typischerweise im JSON-Format geladen und gespeichert.
- Der integrierte DataProcessor unterstützt die Weiterleitung von Erstellungs-, Aktualisierungs- und Löschvorgängen an Ihren Server.
- Es stehen Tutorials für gängige Backend-Plattformen und -Frameworks (Node.js, .NET Core, Laravel usw.) zur Verfügung, die CRUD-Operationen sowie bewährte Verfahren für die Synchronisierung des Gantt-Diagramms mit Ihrer Datenbank behandeln.
Was kommt als Nächstes
Wenn Sie gerade erst beginnen, gehen Sie wie folgt vor:
- Konsultieren Sie den Leitfaden für den Einstieg für Ihr bevorzugtes Frontend-Framework oder für reines JavaScript.
- Konfigurieren Sie Rasterspalten, Arbeitszeitkalender, Zeitskalen und das Bearbeitungsverhalten.
- Stellen Sie die Verbindung zu Ihrem Backend her und richten Sie den DataProcessor sowie die Anwendungsendpunkte für Aufgaben, Verknüpfungen und Ressourcen ein.
- Nutzen Sie die Anleitungen und die API-Referenz für weitergehende Anpassungen, wie z. B. Vorlagen, Ereignisse und Erweiterungen.
Wenn Sie DHTMLX Gantt bereits verwenden und auf eine neuere Version aktualisieren, informieren Sie sich im Bereich What's New über die Release-Notes sowie eine Zusammenfassung der neuesten Funktionen und Migrationsanleitungen.