Beispiele Forum Unterstützung
Dokumentation
StartAnleitungenEinrichten von Aufgaben

Zusätzliche Elemente in der Zeitleiste

Diese Funktionalität ist nur in der PRO-Edition verfügbar

In dhtmlxGantt ist der Zeitleistenbereich in Schichten organisiert, die in einer bestimmten Reihenfolge gerendert werden:

  1. Raster der Zeitleiste
  2. Verknüpfungen
  3. Aufgaben
  4. Zusätzliche Elemente

Die Standardkonfiguration umfasst eingebaute Elemente wie Basislinien, Fristen und Zeitbeschränkungen. Bei Bedarf können Sie diese Standardelemente austauschen und benutzerdefinierte Elemente als zusätzliche Schichten erstellen.

Basislinien

Basislinien sind ein wichtiges Merkmal im Projektmanagement, das Ihnen hilft, den geplanten Projektzeitplan mit dem tatsächlichen Fortschritt zu vergleichen. Die Gantt-API bietet integrierte Unterstützung für die Arbeit mit Basislinien, was deren Verwaltung einfach macht.

Integrierte Basislinien

Related sample:  Display baselines

Anpassung von Basislinien

Wenn das Standard-Setup für Basislinien nicht zu Ihren Projektanforderungen passt, können Sie es mit der gantt.config.baselines Konfigurationsoption deaktivieren.

gantt.config.baselines = false;

Nach der Deaktivierung haben Sie mehrere Möglichkeiten, das Erscheinungsbild der Basislinien anzupassen:

1. Verwendung des gantt.config.baselines Konfigurationsobjekts

Diese Option ermöglicht es Ihnen, das Rendern der Basislinien im Gantt-Diagramm fein abzustimmen. Das Konfigurationsobjekt umfasst:

  • datastore (string): Gibt den Datenspeicher-Namen für die Speicherung von Basislinien an. Siehe die getDatastore Methode für verwandte Funktionalität.
  • render_mode (boolean | string): Definiert, wie Basislinien angezeigt werden:
    • false: Basislinien werden nicht angezeigt.
    • "taskRow": Basislinien werden in derselben Zeile wie die Aufgabenleiste angezeigt.
    • "separateRow": Basislinien erscheinen in einer separaten Unterzeile, was die Aufgabenzeilenhöhe erhöht.
    • "individualRow": Jede Basislinie erhält ihre eigene Unterzeile unter der Aufgabe.
  • dataprocessor_baselines (boolean): Bestimmt, ob Basislinienaktualisierungen den DataProcessor als einzelne Einträge auslösen.
  • row_height (number): Legt die Höhe der Unterzeile für Basislinien fest, anwendbar, wenn render_mode "separateRow" oder "individualRow" ist.
  • bar_height (number): Gibt die Höhe der Basislinienleiste an.

Beispiel für die Konfiguration:

gantt.config.baselines = {
  datastore: "baselines",
  render_mode: false,
  dataprocessor_baselines: false,
  row_height: 16,
  bar_height: 8
};
gantt.init("gantt_here");

Wenn Sie die gantt.config.baselines Einstellungen dynamisch ändern, ist es wichtig, die gantt.adjustTaskHeightForBaselines Methode zu verwenden, um eine ordnungsgemäße Anzeige sicherzustellen.

const task = gantt.getTask(taskId);
gantt.adjustTaskHeightForBaselines(task); gantt.render();

2. Erstellen eines benutzerdefinierten Basislinienelements, das der Zeitleiste hinzugefügt wird.

Laden von Basislinien mit Aufgaben

Basislinien können gleichzeitig mit Aufgaben geladen werden. Hier ein Beispiel:

gantt.parse({
  tasks: [
    {
      id: 2,
      start_date: "2025-04-04 00:00:00",
      duration: 2,
      text: "Aufgabe #1",
      progress: 0.5,
      parent: 0,
      open: true,
      end_date: "2025-04-06 00:00:00",
    },
    // Weitere Aufgaben...
  ],
  links: [],
  baselines: [     {       id: 2,       task_id: 2,       start_date: "2025-04-03 00:00:00",       duration: 2,       end_date: "2025-04-05 00:00:00",     },     // Weitere Basislinien...   ], });

Nach dem Laden erscheinen die Basislinien automatisch in der Zeitleiste ohne zusätzliche Konfiguration.

Abrufen von Aufgabenbasislinien

Um die Basislinien zu erhalten, die mit einer bestimmten Aufgabe verknüpft sind, können Sie die gantt.getTaskBaselines Methode verwenden.

gantt.getTaskBaselines(5);

Dies gibt ein Array von Basislinienobjekten für die gegebene Aufgabe aus dem Datenspeicher zurück.

[
    {
        task_id: 5,
        id: 1, 
        duration: 2, 
        start_date: "03-04-2019 00:00", 
        end_date: "05-04-2019 00:00"
    },
    {
        task_id: 5,
        id: 2, 
        duration: 1, 
        start_date: "06-04-2019 00:00", 
        end_date: "07-04-2019 00:00"
    }
]

Basislinien in der Lightbox

Sie können Basislinien direkt über die Lightbox-Steuerung verwalten, wobei Optionen zum Hinzufügen, Bearbeiten und Löschen verfügbar sind.

gantt.config.lightbox.sections = [
  { name: "description", height: 38, map_to: "text", type: "textarea", focus: true },
  { name: "time", type: "duration", map_to: "auto" },
  { name: "baselines", height: 100, type: "baselines", map_to: "baselines" }, ];

Basislinien-Lightbox

Darstellungsmodi der Basislinien

Es gibt drei Möglichkeiten, Basislinien in Gantt darzustellen. Sie können den Darstellungsmodus mit der gantt.config.baselines.render_mode Option wechseln:

  • In derselben Zeile wie die Aufgabe ("taskRow")
    Basislinien erscheinen neben den Aufgabenleisten.

    gantt.config.baselines.render_mode = "taskRow";

    Aufgabenzeilenmodus

  • In einer separaten Unterzeile unter der Aufgabe ("separateRow")
    Alle Basislinien werden in einer Unterzeile unter jeder Aufgabe gruppiert.

    gantt.config.baselines.render_mode = "separateRow";

    Unterzeilenmodus

  • In einer individuellen Unterzeile ("individualRow")
    Jede Basislinie wird in ihrer eigenen Unterzeile für bessere Sichtbarkeit angezeigt.

    gantt.config.baselines.render_mode = "individualRow";

    Individueller Zeilenmodus

Baseline-Text festlegen

Um benutzerdefinierten Text in einem Basislinienelement hinzuzufügen, können Sie die gantt.templates.baseline_text Vorlage verwenden:

gantt.templates.baseline_text = function(task, baseline, index) {
    return "Basislinie #" + (index + 1);
};

Fristen und Einschränkungen

Das Verwalten von Fristen und das Verständnis von Aufgabenbeschränkungen sind entscheidend, um Projekte im Zeitplan zu halten. DHTMLX Gantt bietet integrierte Funktionen zur Visualisierung von Fristen und Einschränkungen, was die Handhabung von Projektzeitplänen erleichtert.

Fristen

Related sample:  Displaying deadlines

Visualisierung von Fristen

Das task.deadline Feld ermöglicht es Ihnen, einen visuellen Indikator im Diagramm anzuzeigen, um Fristen von Aufgaben zu verfolgen.

gantt.parse({
  data: [
    {
      id: 1,
      text: "Aufgabe mit Frist",
      start_date: "2025-04-04",
      duration: 5,
      deadline: new Date(2025, 3, 10), // 10. April 2025     },
    // Weitere Aufgaben...
  ],
});

Anpassung von Fristen

Wenn die Standardfristen nicht Ihren Anforderungen entsprechen, können Sie sie mit der gantt.config.deadlines Option deaktivieren.

gantt.config.deadlines = false;

Von dort aus können Sie ein benutzerdefiniertes Fristenelement erstellen, das zu Ihrer Zeitleiste passt.

Die gantt.config.deadlines Einstellung entscheidet, ob Fristenelemente für Aufgaben angezeigt werden. Wenn aktiviert, überprüft Gantt die task.deadline Eigenschaft und zeigt gültige Daten auf der Zeitleiste an.

Aufgabenbeschränkungen

Ab Version 9.0, wenn automatische Planung im Constraint-Modus aktiv ist (mit gantt.config.auto_scheduling.compatibility auf false gesetzt), zeigt Gantt automatisch Beschränkungsdaten in der Zeitleiste an.

gantt.parse({
  data: [
    { 
      id: 1, 
      text: "Aufgabe #1", 
      start_date: "2025-04-04", 
      duration: 4, 
      constraint_date: "2025-04-04", 
      constraint_type: "snet", 
      parent: 0
    },
    // Weitere Aufgaben...
  ]
})

Sie können die Sichtbarkeit von Einschränkungen mit der show_constraints Option unter gantt.config.auto_scheduling steuern. Standardmäßig sind Einschränkungen sichtbar, aber Sie können sie ausblenden, indem Sie show_constraints auf false setzen:

gantt.config.auto_scheduling = {
  enabled: true,
  show_constraints: false
};

Related sample:  Auto-Schedule From Project Start & Constraints

Zurück nach oben