Links-Färbung und -Stil

Sie können das Aussehen der Verbindungen zwischen Aufgaben anpassen, um besser zum Stil Ihres Gantt-Diagramms zu passen. Unterschiedliche Farben für Abhängigkeitsverbindungen können helfen, sie visuell unterscheidbarer zu machen.

Um Linkstile anzupassen, haben Sie zwei Hauptoptionen:

1. Die Standard-Link-Vorlage neu definieren
2. Stilwerte direkt in den Eigenschaften des Link-Objekts festlegen

Bevor Sie mit der Anpassung beginnen, lohnt es sich, die Struktur der Link-Elemente zu verstehen, um ein Gefühl für deren Positionierung, Größe, Funktionalität und Standardstile zu bekommen.

Struktur des Link-DOM-Elements

Die DOM-Struktur für einen Link besteht aus folgenden Elementen:

• .gantt_task_link - hat statische Positionierung und keine Größe
  • .gantt_line_wrapper/gantt_link_arrow/gantt_link_corner - verwendet absolute Positionierung
    • .gantt_link_line_down(/up/right/left) - statisch innerhalb des Wrappers positioniert

So sieht die DOM-Struktur aus:

<div class="gantt_task_link" link_id="3">
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_left"></div>
    </div>
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_left"></div>
    </div>
    <div class="gantt_link_corner gantt_link_corner_left_down"></div>
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_down"></div>
    </div>
    <div class="gantt_link_corner gantt_link_corner_down_right"></div>
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_right"></div>
    </div>
    <div class="gantt_link_arrow gantt_link_arrow_right"></div>
</div>

Details zu jedem Element:

• gantt_task_link - Dies ist ein null-großes, statisch positioniertes Element, das als Elternteil für alle Linkteile dient. Es kann folgendermaßen gestylt werden:

.gantt_task_link{
   --dhx-gantt-link-background:red;
}

Klassen aus der Link-Vorlage können hier ebenfalls angewendet werden.

Kritische Links

Um kritische Links zu stylen, wird die gantt_critical_link Klasse dem gantt_task_link Element hinzugefügt.

• gantt_line_wrapper - Dieses Element steuert die Größe und Position eines Links. Es ist transparent, absolut positioniert und etwas größer als die Linklinie, um es leichter mit der Maus auswählbar zu machen.

Sie können die Breite dieses Elements mit der Link-Wrapper-Breite Konfigurationseigenschaft anpassen:

gantt.config.link_wrapper_width = 30;

• gantt_link_arrow - Repräsentiert den Pfeil des Links. Seine Position ist absolut und seine Richtung wird durch eine zusätzliche Klasse bestimmt, wie zum Beispiel:
  • gantt_link_arrow_right
  • gantt_link_arrow_left
  • gantt_link_arrow_up
  • gantt_link_arrow_down

Derzeit werden nur gantt_link_arrow_right und gantt_link_arrow_down verwendet.

Die Größe dieses Elements wird durch die Link-Pfeilgröße Konfigurationseigenschaft gesteuert:

gantt.config.link_arrow_size = 8;

• gantt_link_line_<%dir%> - Dies ist der sichtbare Teil des Links. Ersetzen Sie dir durch left, right, up oder down.

Die Breite dieses Elements kann mit der Link-Linienbreite Konfigurationseigenschaft geändert werden:

gantt.config.link_line_width = 3;

• gantt_link_corner - Repräsentiert die abgerundete Ecke einer Linklinie. Der Radius wird durch die Link-Radius Konfigurationseigenschaft definiert:

gantt.config.link_radius = 2;

Das Setzen von gantt.config.link_radius = 1 entfernt abgerundete Ecken vollständig.

Die Vorlage des Links neu definieren

Um die Stile der Abhängigkeitslinks anzupassen, können Sie die Link-Klassen-Vorlage verwenden. Um beispielsweise Linkfarben basierend auf der Priorität der Aufgabe zu ändern, könnten Sie den folgenden Code verwenden:

Färbung von Links abhängig vom Abhängigkeitstyp

gantt.templates.link_class = function(link){
    var types = gantt.config.links;
    switch (link.type){
        case types.finish_to_start:
            return "finish_to_start";
            break;
        case types.start_to_start:
            return "start_to_start";
            break;
        case types.finish_to_finish:
            return "finish_to_finish";
            break;
        case types.start_to_finish:
            return "start_to_finish";
            break;
    }
};

Related sample:  Link styles

Eine ähnliche Methode kann auf Aufgaben angewendet werden. Weitere Details finden Sie hier.

Farbe in der Eigenschaft des Link-Objekts angeben

Sie können einem Abhängigkeitslink auch eine benutzerdefinierte Farbe zuweisen, indem Sie dem Datenobjekt eine zusätzliche Eigenschaft hinzufügen:

• color - Definiert die Farbe des Links

Setzen der Linkfarbe im Datenobjekt

var tasks = {
  data:[
     {id:1, text:"Project #1", start_date:"01-04-2013", duration:18},
     {id:2, text:"Task #1",    start_date:"02-04-2013", duration:8, parent:1},
     {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8, parent:1}
  ],
  links:[
     {id:1, source:1, target:2, type:"1", color:"red"},      {id:2, source:2, target:3, type:"0", color:"blue"},     {id:3, source:3, target:4, type:"0", color:"blue"},     {id:4, source:2, target:5, type:"2", color:"green"}  ]
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getLink(4).color = "green";

Related sample:  Linkfarben aus der "color"-Eigenschaft

Um Links als kritisch erscheinen zu lassen, können Sie dieses CSS verwenden:

.gantt_critical_link {
  --dhx-gantt-link-background: #e63030 !important;
}

Related sample:  Färbung kritischer Aufgaben und Links

Wenn ein Link-Objekt mindestens eine zugewiesene Eigenschaft hat, erhält es die zusätzliche Klasse "gantt_link_inline_color", die Sie verwenden können, um andere Stile zu überschreiben:

.gantt_link_inline_color {
    opacity:0.4
}

Die Farbeigenschaft akzeptiert jedes gültige CSS-Farbformat, wie zum Beispiel:

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

Ein ähnlicher Ansatz kann für Aufgaben verwendet werden. Weitere Informationen finden Sie hier.

Zurück nach oben