Aufgabenfärbung

Das Hervorheben von Aufgaben mit Farben kann helfen, bestimmte Aufgaben hervorzuheben.

Es gibt einige Optionen, um die Stile von Aufgaben anzupassen:

Neudefinierung der Aufgabenvorlage

Mit Vorlagen können Sie benutzerdefinierte Stile für Aufgaben zuweisen. Zum Beispiel können Aufgaben basierend auf ihrer Priorität mit folgendem Beispiel eingefärbt werden:

Färbung von Aufgaben abhängig von ihrer Priorität

<style>
    /* hohe Priorität */
    .gantt_task_line.high {
        --dhx-gantt-task-background: #d96c49;
        --dhx-gantt-task-color: #fff;
    }
 
    /* mittlere Priorität */
    .gantt_task_line.medium {
        --dhx-gantt-task-background: #f57730;
        --dhx-gantt-task-color: #fff;
    }
 
    /* niedrige Priorität */
    .gantt_task_line.low {
        --dhx-gantt-task-background: #fff;
        --dhx-gantt-task-color: #fff;
    }
</style>

gantt.templates.task_class  = function(start, end, task){
    switch (task.priority){
        case "1":
            return "high";
        case "2":
            return "medium";
        case "3":
            return "low";
    }
};

Related sample: Task styles

Wenn Sie andere Aufgabenelemente stylen möchten, schauen Sie sich die Vorlagen im Artikel Vorlagen für den Zeitachsenbereich an.

Eine ähnliche Methode kann auch für Links verwendet werden. Details finden Sie hier.

Stil in den Eigenschaften des Aufgabenobjekts festlegen

Sie können benutzerdefinierte Stile definieren, indem Sie bestimmte Eigenschaften zum Aufgabenobjekt hinzufügen:

color: Legt die Hintergrundfarbe der Aufgabenleiste fest.
textColor: Definiert die Textfarbe innerhalb der Aufgabenleiste (nicht anwendbar auf "Meilenstein"-Aufgaben).
progressColor: Ändert die Farbe der Fortschrittsleiste (standardmäßig ein etwas dunklerer Farbton der Aufgabenfarbe mit 'background-color: rgb(54, 54, 54); opacity: 0.2').

Dies sind spezielle Eigenschaften. Wenn eine Aufgabe diese hat, werden die entsprechenden Stile automatisch angewendet. Falls nicht, werden Standardfarben verwendet.

Festlegen der Farbe der Aufgabe im Datenobjekt

var tasks = {
  data:[
     {id:1, text:"Projekt #1", start_date:"01-04-2013", duration:18, color:"red"},
     {id:2, text:"Aufgabe #1", start_date:"02-04-2013", 
        duration:8, color:"blue", parent:1},
     {id:3, text:"Aufgabe #2", start_date:"11-04-2013", 
        duration:8, color:"blue", parent:1}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getTask(1).color = "red";

Wenn Sie eine benutzerdefinierte Farbe mit der color-Eigenschaft hinzufügen, wird sie als Inline-Stil angewendet, der Vorrang vor anderen Stilen hat. Dies könnte verhindern, dass der kritische Pfad oder andere benutzerdefinierte Stile hervorgehoben werden.

Um sicherzustellen, dass Aufgaben als kritisch erscheinen, können Sie folgendes CSS verwenden:

.gantt_critical_task {
  --dhx-gantt-task-background: #e63030 !important;
}

Wenn eine dieser Eigenschaften gesetzt ist, erhält die Aufgabe eine zusätzliche Klasse "gantt_task_inline_color". Sie können diese Klasse verwenden, um andere Stile zu überschreiben, indem Sie sie mit dem Selektor ".gantt_task_line.gantt_task_inline_color" ansprechen:

.gantt_task_line.gantt_task_inline_color .gantt_task_progress {
    background-color: rgb(54, 54, 54);
    opacity: 0.2;
}

Diese Eigenschaften unterstützen jedes gültige CSS-Farbformat, wie zum Beispiel:

task.color = "#FF0000";
task.color = "red";
task.color = "rgb(255,0,0)";

Die gleiche Logik kann auf Links angewendet werden. Weitere Details finden Sie hier.

Stile aus Daten generieren

In Fällen, in denen die Farben von Aufgaben von Daten aus dem Backend abhängen (z.B. wenn Aufgabenfarben an Phasen oder zugewiesene Ressourcen gebunden sind), kann es hilfreich sein, Stile dynamisch zu generieren.

Zum Beispiel, wenn Sie eine Sammlung von Benutzern mit spezifischen Farben für ihre Aufgaben haben:

[
    {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"},
    {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"},
    {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"},
    {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"},
    {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"}
]

So können Sie solche Fälle handhaben:

Erstellen Sie eine benannte serverList für die Sammlung:

gantt.serverList("people");

Laden Sie die Optionen auf die Seite, entweder durch Gantt's Datenformat oder manuell über ein benutzerdefiniertes xhr.
Generieren Sie CSS-Stile aus den Daten nach dem Laden:

gantt.attachEvent("onLoadEnd", function(){
    var styleId = "dynamicGanttStyles";
    var element = document.getElementById(styleId);
    if(!element){
        element = document.createElement("style");
        element.id = styleId;
        document.querySelector("head").appendChild(element);
    }
    var html = [];
    var resources = gantt.serverList("people");
 
    resources.forEach(function(r){
        if(r.backgroundColor && r.textColor){
            html.push(".gantt_task_line.gantt_resource_" + r.key + "{" +
                "--dhx-gantt-task-background:"+r.backgroundColor+"; " +
                "--dhx-gantt-task-color:"+r.textColor+"; " +
            "}");
        }
    });
    element.innerHTML = html.join("");
});

Wenn Sie den resource datastore verwenden, ersetzen Sie r.key durch r.id für die Ressourcen-ID.

Abschließend, weisen Sie die generierten Klassen mithilfe von Aufgabenvorlagen zu:

gantt.templates.task_class = function (start, end, task) {
    var css = [];
 
    if(task.owner_id){
        css.push("gantt_resource_" + task.owner_id);
    }
 
    return css.join(" ");
};

Zurück nach oben