Beispiele Forum Unterstützung
Dokumentation
Start

FAQ

Wie öffnet man Beispiele

Das Distributionspaket der Komponente enthält eine Demo-Backend-App, die verwendet werden kann, um Beispiele lokal auszuführen. Die App erfordert Node.js und verwendet einen In-Memory-Speicher für Demos, die Daten auf dem Backend speichern sollen (d.h. es ist keine Datenbankeinrichtung erforderlich).

Was Sie tun können, um die Beispiele auszuführen

1) Verwenden Sie die Demo-Backend-App auf Node.js-Basis:

  • Extrahieren Sie das Paket in einen Ordner
  • Öffnen Sie das Terminal (oder cmd, PowerShell)
  • Führen Sie npm install aus
  • Führen Sie npm run start aus
  • Öffnen Sie http://localhost:9200 in Ihrem Browser
  • Sie sollten die Indexseite sehen, die identisch mit unseren Online-Beispielen https://docs.dhtmlx.com/gantt/samples/ ist

2) Verwenden Sie den Apache-Webserver

  • Installieren Sie den Apache-Webserver. Wenn Sie unsicher sind, wie das geht, empfehlen wir die Verwendung von XAMPP.
  • Legen Sie die Gantt-Beispiele in das Apache-Dokumentstammverzeichnis (xampp/htdocs, wenn Sie XAMPP installiert haben).
  • Wenn Sie den Apache-Webserver ausführen, können Sie auf die Beispiele über die URL http://localhost/yourfolder zugreifen.

3) Verwenden Sie einen Entwicklungs-Webserver, der in Ihre IDE integriert ist

Einige IDEs bieten einen integrierten Entwicklungs-Webserver an, zum Beispiel: https://www.jetbrains.com/help/webstorm/creating-local-server-configuration.html.
Sie können nachsehen, ob die IDE, die Sie verwenden, etwas Ähnliches entweder von Haus aus oder über Plugins unterstützt.

Warum Sie es brauchen könnten

Einige der Beispiele in unserem Paket laden ihre Daten aus JSON-Dateien mittels AJAX (xhr). Damit dies funktioniert, muss ein Beispiel von einem Webserver geöffnet werden.

Wenn Sie ein Beispiel durch Doppelklick öffnen, wird es von einem Browser als Datei geöffnet. In diesem Modus blockiert ein Browser AJAX-Aufrufe und die Komponente kann keine Datendateien laden. Sie sehen das Popup Ungültige Daten in der oberen rechten Ecke des Bildschirms.

Um sicherzustellen, dass das beschriebene Verhalten auf Ihren Fall zutrifft, können Sie die URL im Navigationsbereich des Browsers überprüfen. Wenn das Format file:/// in der URL verwendet wird, z.B.:

file:///D:/www/gantt-eval/samples/11_resources/09_resource_histogram.html

können Sie sicher sein, dass dies der Fall ist. Beispiele, die Daten aus Dateien laden, funktionieren in diesem Modus nicht.

Wenn Sie ein Beispiel von einem Webserver öffnen, sieht die URL so aus (das http:// kann weggelassen werden):

http://localhost/gantt-eval/samples/11_resources/09_resource_histogram.html

Das Gantt-Diagramm wird nicht korrekt angezeigt

Wenn das Gantt-Diagramm nicht richtig auf der Seite angezeigt wird, überprüfen Sie bitte den CSS-Stil für den Container des Diagramms - er muss eine gültige Größe in Pixeln oder Prozent haben.

  • Wenn die Größe in Prozent definiert ist - stellen Sie sicher, dass der übergeordnete Container ebenfalls eine Höhe hat.
  • Wenn das Gantt-Diagramm direkt im Body platziert wurde - geben Sie den folgenden CSS-Stil an, um eine höhenbasierte Prozentangabe korrekt zu verwenden:
html, body{
    margin:0px;
    padding:0px;
    height:100%; /*obligatorisch*/
    overflow:hidden;
}

Das Gantt-Diagramm wird in Internet Explorer nicht korrekt angezeigt

Wenn das Gantt-Diagramm nur im Internet Explorer nicht richtig auf der Seite angezeigt wird, stellen Sie bitte sicher, dass Ihre Seite eine vollständige DOCTYPE-Deklaration verwendet. dhtmlxGantt kann korrekt in den Standardmodi von IE6, IE7 und IE8 arbeiten, ist jedoch nicht für die Verwendung mit den Quirks-Modi von IE vorgesehen.

Zum Beispiel ist der HTML5 DOCTYPE:

<!DOCTYPE html>

Ein Fehlerhinweis erscheint in der rechten oberen Ecke

Zuerst müssen Sie herausfinden, was den Fehler verursacht.

Die Meldungen erscheinen, wenn die Komponente nicht ordnungsgemäß funktionieren kann. Sie weisen normalerweise auf ein echtes Problem mit den Daten oder der Anwendungslogik hin. Das bloße Verbergen dieser Meldungen wird das Problem nur verschleiern, während es an anderen Stellen der Anwendung auftreten kann.

Sie möchten diese Meldungen jedoch möglicherweise deaktivieren, bevor Sie Ihre Anwendung an Endbenutzer ausliefern. In diesem Fall können Sie die show_errors-Konfiguration verwenden:

gantt.config.show_errors = false;

Gantt zeigt nichts an

Es gibt zwei offensichtlichste Szenarien:

1. Sie versuchen, die Backend-API entweder manuell oder nach unseren Tutorials zu implementieren, aber Gantt zeigt keine Aufgaben oder Links an, wenn Sie die Seite öffnen.

oder

2. Sie haben Probleme beim Speichern von Änderungen im Backend.

Lesen Sie den Artikel Fehlerbehebung bei Backend-Integrationsproblemen, der Anweisungen gibt, wie Sie die Ursachen der Probleme identifizieren können.

Wie man den letzten Tag der Aufgabe in die Dauer einbezieht

Sie werden feststellen, dass, wenn das Datum in Tagen ohne Stunden-Minuten-Teil angegeben ist und die Start- und Enddaten gleich sind, die Dauer der Aufgabe als 0 Tage und nicht als 1 Tag berechnet wird.

Betrachten wir ein weiteres Beispiel, bei dem das Start- und Enddatum "01-12-2021" bzw. "05-12-2021" sind. Dies lässt Sie denken, dass die Aufgabe 5 Tage dauern sollte (vom 1. bis zum 5. Dezember). Aber das Gantt berechnet seine Dauer als 4 Tage.

gantt.parse({ tasks: [
    { 
        id: 1,
        text: "Task 1",
        start_date: "01-12-2021",
        end_date: "05-12-2021"
    }
]}, links:[]);
 
console.log(gantt.getTask(1).end_date);
// 5. Dezember 2021 00:00:00
 
console.log(gantt.getTask(1).duration);
// 4

Standardmäßig ist der letzte Tag der Aufgabe von der Dauer der Aufgabe ausgeschlossen, aber es gibt die Möglichkeit, das Standardverhalten zu ändern und den letzten Tag in die Dauer einzubeziehen. Für weitere Details lesen Sie den Artikel Task end date display & Inclusive end dates.

Zyklischer Referenzfehler

Wenn Sie Gantt inkorrekte Daten übergeben, wird seine baumartige Struktur zyklisch, was den zyklischen Referenzfehler verursacht.

cyclic_error

Zum Beispiel kann dieser Fehler in den folgenden Fällen auftreten:

  • Wenn die ID des Elternteils der Aufgabe mit der ID der Aufgabe identisch ist:

equal_ids

Aufgabe #2 kann nicht selbst ihr Elternteil sein.

  • Wenn eines der Kinder der Aufgabe ihr Elternteil wird:

parent_child_error

"Task #4" wird als Elternteil für "Task #1" angegeben. Aber gleichzeitig ist "Task #4" auch ein Kind von "Task #1".

Evaluierungszeitraum ist abgelaufen

Wenn Sie eine lizenzierte PRO-Version des Gantt-Diagramms installiert haben, aber immer noch die Meldungen sehen, dass der Evaluierungszeitraum abgelaufen ist, bedeutet dies, dass sich irgendwo in Ihrer Anwendung die Testversion befindet. Nur die Testversion hat die Funktionalität, die Popup-Meldung über den abgelaufenen Testzeitraum anzuzeigen.

Denken Sie daran, die Dateien des Testpakets des Gantt-Diagramms vollständig zu entfernen, bevor Sie die PRO-Version installieren. Für weitere Informationen lesen Sie den Abschnitt Adding PRO Edition into Project.

Tipp: Um zu überprüfen, welche Datei verbunden ist, können Sie im Webkonsolenfenster gantt.license eingeben.

Zurück nach oben