CSS-Dokumentation

Dieser Artikel zeigt Ihnen die Möglichkeiten, die standardmäßigen Farbeinstellungen der Elemente des Gantt-Diagramms mit benutzerdefinierten Farben zu überschreiben. Der Artikel behandelt die Hauptklassen-Selektoren und Templates für das Styling der folgenden Teile des Gantt: Grid-Bereich, Timeline-Bereich, Resource-Panel.

Rastergestaltung

In diesem Abschnitt finden Sie CSS-Selektoren zum Styling der Hauptelemente des Grid-Bereichs.

grid_area

Die allgemeine Struktur des DOM-Elements des Grids ist unten angegeben:

- .gantt_grid
    - .gantt_grid_scale
        - .gantt_grid_head_cell
    - .gantt_grid_data
        - .gantt_row.odd
        - .gantt_row
        - .gantt_row.gantt_row_task
        - .gantt_row.gantt_row_project
        - .gantt_row.gantt_row_milestone
            - gantt_cell.gantt_cell_tree
                - .gantt_tree_indent
                - .gantt_tree_icon.gantt_close
                - .gantt_tree_icon.gantt_open
                - .gantt_tree_content
            - gantt_cell
                - .gantt_tree_content

Rasterkopfzeile

Sie können die Gestaltung des Rasterkopfzeilen-Elements über den Klassenselektor .gantt_grid_scale ändern.

Hier ist ein Beispiel für die Anwendung von Hintergrund- und Schriftfarbe für die Kopfzeilen des Grids und der Timeline:

.gantt_grid_scale, .gantt_task_scale, .gantt_task_vscroll {
    background-color: #eee;
}
.gantt_grid_scale, .gantt_task_scale,
.gantt_task .gantt_task_scale .gantt_scale_cell,
.gantt_grid_scale .gantt_grid_head_cell {
    color: #000;
    font-size: 12px;
    border-bottom: 1px solid #cecece;
}

grid_header

Verwandtes Beispiel: Styling grid and timeline headers

Skalenhöhe

Verändern Sie die Höhe des Rasterkopfs und der Zeitachse nicht über CSS.

Die Höhe der Skala muss über die scale_height Konfigurations-Eigenschaft von Gantt festgelegt werden:

gantt.config.scale_height = 50;

Eine Zelle der Rasterkopfzeile

Sie können einer Zelle der Rasterkopfzeile einen benutzerdefinierten Stil zuweisen über .gantt_grid_head_cell.

Die Selektoren zur Stilgebung einer Zelle sind unten angegeben:

.gantt_grid_head_cell[data-column-id="columnName"] – wählt eine Zelle einer bestimmten Spalte aus;

columnName entspricht dem Wert der name Eigenschaft der Spalte:

<style>
    .gantt_grid_head_cell[data-column-id="columnName"] {
        background-color: #ededed;
        color: black;
    }
</style>

gantt.config.columns = [
    ...
    { name: "columnName", align: "center" },
    ...
];

header_cell

Verwandtes Beispiel: Styling a particular cell in the grid header

.gantt_grid_head_cell[data-column-index="1"] – wählt eine bestimmte Spalte nach ihrem Index aus;
.gantt_grid_head_cell[data-column-name="start_date"] – wählt eine bestimmte Spalte nach dem Namen aus.

Rasterkörper

Sie können dem Rasterkörper-Element eine benutzerdefinierte Farbe hinzufügen, indem Sie CSS-Stile auf den Selektor .gantt_grid_data anwenden.

grid_body

Styling der Rasterzeilen

Der Stil der Rasterzeile wird über .gantt_row angepasst.

grid_row

Jede zweite Zeile

Um jede zweite Zeile des Grids zu färben, müssen Sie CSS-Stile für den Selektor .gantt_row.odd festlegen, zum Beispiel:

.gantt_row.odd {
    background-color: #f4f4fb;
}

odd_row_style

Verwandtes Beispiel: Styling every other row in grid

Sie sehen, dass die geraden Zeilen auf dem Bildschirm hervorgehoben werden statt der ungeraden. Wenn Sie jedoch die Indexes der Zeilen überprüfen, werden Sie sehen, dass der Stil auf Zeilen mit ungeraden Indizes (1, 3, 5 usw.) angewendet wird.

Ausgewählte Zeile

Sie können eine ausgewählte Zeile im Grid mithilfe des Selektors .gantt_row.gantt_selected stylen:

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: #fff3a1;
}

Verwandtes Beispiel: Styling selected row

Aufgabenzeilen, Projektzeilen und Meilensteine

Um Zeilen von Aufgaben, Projekten oder Meilensteinen zu stylen, verwenden Sie die folgenden Selektoren:

.gantt_row.gantt_row_task
.gantt_row.gantt_row_project
.gantt_row.gantt_row_milestone

Zum Beispiel:

.gantt_row.gantt_row_project {
    background-color: #fafafa;
    font-weight: bold;
}

Verwandtes Beispiel: Styling rows of project tasks

Bestimmte Zeilen

Wenn Sie einer bestimmten Zeile benutzerdefinierte Klassen hinzufügen möchten, können Sie die grid_row_class Vorlage wie folgt verwenden:

<style>
    .highlighted_task.gantt_row {
        background-color: #ff9668;
        border-color: rgba(0,0,0,0.3);
    }
</style>

gantt.templates.grid_row_class = (startDate, endDate, task) => {
    if (task.highlight) {
        return "highlighted_task";
    }
    return "";
};

Verwandtes Beispiel: Styling a particular row in the grid

Zeilenhöhe

Die Höhe der Zeile kann entweder durch die Verwendung der row_height Konfiguration geändert werden:

gantt.config.row_height = 40;

oder über die row_height Eigenschaft einer Aufgabe:

{ id: 2, text: "Task #1", start_date: "02-04-2028", duration: 8, row_height: 40 },

Versuchen Sie nicht, die Zeilenhöhe über CSS zu ändern, dies bricht das Layout.

Styling von Zellen/Spalten des Grids

Das Styling von Zellen oder Spalten des Grids kann über .gantt_row .gantt_cell implementiert werden.

Sie können CSS-Stile auf eine bestimmte Spalte auf zwei Arten anwenden:

über den Selektor .gantt_row .gantt_cell[data-column-name="columnName"], der die Spalte nach ihrem Namen definiert, zum Beispiel:

.gantt_grid_head_cell[data-column-id="start_date"],
.gantt_row .gantt_cell[data-column-name="start_date"] {
    background-color: #ededed;
    color: black;
}

Verwandtes Beispiel: Styling a column in grid

Beachten Sie, dass .gantt_grid_head_cell und .gantt_cell verschiedene Datenattribute verwenden: data-column-id bzw. data-column-name. Diese Inkonsistenz in den CSS-Regeln von Gantt wird in einer der zukünftigen Versionen behoben.

oder Sie können dasselbe Ergebnis erzielen, indem Sie den Selektor .gantt_row .gantt_cell[data-column-index="1"] anwenden, der die Spalte nach ihrem Index definiert.

Styling der Timeline

Der Abschnitt "Styling Timeline" wird Sie durch die CSS-Selektoren führen, die Sie anwenden können, um die Standard-Stile der Elemente des Timeline-Bereichs zu ändern.

timeline

Die allgemeine Struktur des DOM-Elements des Timeline-Bereichs wird unten dargestellt:

- .gantt_task
    - .gantt_task_scale
        - .gantt_scale_line
            - .gantt_scale_cell
    - .gantt_data_area
        - .gantt_task_bg
            - .gantt_task_row
            - .gantt_task_row.odd
                - .gantt_task_cell
        - .gantt_links_area
            - .gantt_task_link
        - .gantt_bars_area
            - .gantt_task_line
                - .gantt_task_progress_wrapper
                    - .gantt_task_progress
                - .gantt_task_progress_drag
                - .gantt_task_content
                - .gantt_task_drag.task_start_date
                - .gantt_task_drag.task_end_date
                - .gantt_link_control.task_start_date
                - .gantt_link_control.task_end_date
                    - .gantt_link_point
        - div - benutzerdefinierte Ebenen

Zeitmaßstab

Das DOM-Element des Zeitmaßstabs hat folgende Struktur:

- .gantt_task_scale
    - .gantt_scale_line
        - .gantt_scale_cell

Zeitmaßstabs-Container

Der .gantt_task_scale Selektor wird verwendet, um benutzerdefiniertes CSS auf den Container des Zeitmaßstabs anzuwenden.

Beispielsweise sieht das Ändern der Schriftfarbe und der Umrandungen des Zeitmaßstabs so aus:

.gantt_grid_scale, .gantt_task_scale {
    border-bottom: 1px solid #0e0e0e;
}

.gantt_task .gantt_task_scale .gantt_scale_cell {
    color: #000;
}

.gantt_grid_scale .gantt_grid_head_cell {
    color: #000;
}

Verwandtes Beispiel: Styling text and borders of the time scale

Zeitskalen

Der Selektor .gantt_scale_line wird verwendet, um die gesamte Zeitachse zu färben. Um eine bestimmte Zeitstufe nach ihrer Reihenfolge anzusprechen, verwenden Sie einfach den Selektor .gantt_scale_line:nth-child(n).

Ein Beispiel zur Festlegung der Hintergrundfarbe der Zeitachse:

.gantt_scale_line:nth-child(1) {
    font-weight: bold;
    background-color: #eee;
}

.gantt_scale_line:nth-child(2) {
    background-color: #fff;
}

Verwandtes Beispiel: Background color of the time scale

Standardmäßig gibt es keine CSS-Klassen, um Zeitstufen nach Einheiten zu adressieren, aber Sie können solche Klassen über die Vorlage scale_row_class hinzufügen.

Beispiel zum Festlegen unterschiedlicher Stile für die Monats-, Wochen- und Tages-Skalen finden Sie unten:

<style>
    .gantt_scale_line.month_scale {
        font-weight: bold;
        background-color: #ddd;
    }

    .gantt_scale_line.week_scale {
        background-color: #e1e1e1;
    }

    .gantt_scale_line.day_scale {
        background-color: #efefef;
    }
</style>

gantt.templates.scale_row_class = (scaleConfig) => `${scaleConfig.unit}_scale`;

Verwandtes Beispiel: Styling different time scales

Zellen der Zeitachse

Sie können den Zellen der Zeitachse eigene Stile hinzufügen, indem Sie den Selektor .gantt_scale_cell verwenden. Beispielsweise können Sie die Schriftfarbe und die Umrandungen der Zellen ändern:

.gantt_task .gantt_task_scale .gantt_scale_cell {
    color: #a6a6a6;
    border-right: 1px solid #ebebeb;
}

Verwandtes Beispiel: Styling text and borders of the scale cells

Um bestimmte Daten zu färben, verwenden Sie die CSS-Eigenschaft des gantt.config.scales Objekts, wie unten gezeigt:

gantt.config.scales = [
    { unit: "month", step: 1, format: "%Y %M" },
    { unit: "day", step: 1, format: "%l, %F %d", css: (date) => {
        if (!gantt.isWorkTime({ date: date, unit: "day" })) {
            return "weekend";
        }
        return "";
    } }
];

<style>
    .gantt_scale_cell.weekend {
        background-color: #F5F5F5;
    }
</style>

Verwandtes Beispiel: Duration includes only working days

Wenn Sie die gesamte Spalte färben müssen, verwenden Sie die timeline_cell_class Vorlage, wie unten beschrieben.

Datenbereich

Das DOM-Element des Datenbereichs hat folgende Struktur:

- .gantt_data_area
    - .gantt_task_bg
        - .gantt_task_row
        - .gantt_task_row.odd
            - .gantt_task_cell
    - .gantt_links_area
        - .gantt_task_link
    - .gantt_bars_area
        - .gantt_task_line
            - .gantt_task_progress_wrapper
                - .gantt_task_progress
            - .gantt_task_progress_drag
            - .gantt_task_content
            - .gantt_task_drag.task_start_date
            - .gantt_task_drag.task_end_date
            - .gantt_link_control.task_start_date
            - .gantt_link_control.task_end_date
                - .gantt_link_point
    - div - benutzerdefinierte Ebenen

Aufgabe

Aufgabenbalken

Um das Aussehen des Aufgabenbalkens zu ändern, sollten Sie einen benutzerdefinierten Stil im Selektor .gantt_task_line deklarieren.

Ein Beispiel zur Änderung des Rahmenstils des Balkens ist unten angegeben:

.gantt_task_line {
    border-radius: 14px;
}

Verwandtes Beispiel: Styling borders of the task bars

Um die Farbe der Aufgabenbalken zu ändern, müssen Sie die folgenden zwei Schritte ausführen:

Überschreiben Sie die Stile der Rahmenlinien und Fortschrittsbalken, damit deren Farben zu jeder benutzerdefinierten Farbe passen, die auf den Balken angewendet wird:

.gantt_task_line {
    border-color: rgba(0, 0, 0, 0.25); /* Schwarze Farbe mit 25% Transparenz/Alpha */
}

.gantt_task_line .gantt_task_progress {
    background-color: rgba(0, 0, 0, 0.25);
}

Wenden Sie die notwendige Farbe sowohl auf den Balken als auch auf den Inhalt innerhalb des Balkens an:

.gantt_task_line {
    background-color: #03A9F4;
}

.gantt_task_line.gantt_task_content {
    color: #fff;
}

Sie finden ein Beispiel für das Anwenden einer gemeinsamen Rahmen- und Fortschrittfarbe auf die Aufgabenbalken mit unterschiedlichen Farben im Artikel Task Coloring.

Um Zeilen von Aufgaben, Projekten oder Meilensteinen zu färben, müssen Sie benutzerdefiniertes CSS zur entsprechenden Klassen-Selektor hinzufügen:

.gantt_task_line.gantt_bar_task
.gantt_task_line.gantt_bar_project
.gantt_task_line.gantt_bar_milestone

Ein Beispiel zum Styling eines ausgewählten Balkens:

.gantt_task_line.gantt_selected {
    box-shadow: 0 2px 5px #000;
}

.gantt_task_line.gantt_bar_project.gantt_selected {
    box-shadow: 0 2px 5px #000;
}

Verwandtes Beispiel: Styling selected bar

Aufgaben eines benutzerdefinierten Typs erhalten den entsprechenden Klassennamen:

{ id: 2, text: "Task #1", start_date: "02-04-2028", duration: 8, type: "custom_type" },

Der Aufgabenbalken erhält die CSS-Klasse .gantt_task_line.gantt_bar_custom_type.

Geteilte Aufgaben (Split tasks)

Split tasks sind als Unteraufgaben eines übergeordneten Elements definiert, und der hellgrüne Balken im Hintergrund ist der Balken dieses übergeordneten Elements mit zusätzlichen angewendeten Stilen.

Verwandtes Beispiel: Expand and collapse split tasks

Wenn Sie das Beispiel öffnen und „Task #2“ erweitern, sehen Sie einen grünen Balken des zusammengefassten Elements „Task #2“.

Wenn Split-Aufgaben in einer einzigen Zeile angezeigt werden, wird dieser grüne Balken immer noch an derselben Position gerendert, jedoch mit modifizierten Opacity- und Z-Index-Werten.

Sie können ihn auf dieselbe Weise stylen, wie Sie es auch bei allen Balken im [Timeline]-Bereich tun können, und ihn vollständig mit dem folgenden CSS ausblenden:

.gantt_task_line.gantt_split_parent {
    display: none;
}

Wenn Sie nur eine einzige Split-Aufgabe haben, wird das Zusammenfassungs-Element (type: "project") unsichtbar, da es vollständig von der Split-Aufgabe überdeckt wird. Falls es keine Split-Unteraufgaben gibt, hat das Zusammenfassungs-Element ein Standarddatum und eine Standarddauer.

Fortschrittsbalken

Die folgenden Selektoren können verwendet werden, um den Fortschrittsbalken zu färben:

.gantt_task_progress – zum Ändern der Farbe der Fortschrittsanzeige;
.gantt_task_progress_drag – zum Stylen des Griffs zum Ziehen des Fortschrittsbalkens.

Sie können das Aussehen der Aufgaben- und Fortschrittsbalken durch Anwendung von CSS-Regeln wie folgt ändern:

ein Beispiel zur Änderung von Hintergrund-, Vordergrund- und Fortschrittsfarben:

/* task */

/* Hintergrundfarbe der Aufgabenbalken*/
.gantt_task_line {
    background-color: #3db9d3;
    border: 1px solid #2898b0;
}

/* Textfarbe */
.gantt_task_line .gantt_task_content {
    color: #fff;
}

/* Fortschrittsfüllung */
.gantt_task_progress {
    background: #299cb4;
}

ein Beispiel zur Stilgebung von Projekt-(Zusammenfassungs) Balken:

/* project */
/* Hintergrundfarbe der Projektbalken*/
.gantt_task_line.gantt_bar_project {
    background-color: #65c16f;
    border: 1px solid #3c9445;
}

/* Fortschritt der Projektbalken */
.gantt_task_line.gantt_bar_project .gantt_task_progress {
    background-color: #46ad51;
}

ein Beispiel zur Stilgebung von Meilenstein-Balken:

/* milestone */
.gantt_task_line.gantt_milestone {
    background-color: #d33daf;
    border: 0 solid #61164f;
}

Benutzerdefinierte Farbe für bestimmte Aufgabenbalken

Wenn Sie eine Farbe für bestimmte Aufgabenbalken festlegen möchten, müssen Sie ihnen eine benutzerdefinierte Klasse über das gantt.templates.task_class Template zuweisen:

gantt.templates.task_class = (startDate, endDate, task) => {
    if (task.highlight) {
        return "highlighted_task";
    }
    return "";
};

und diese benutzerdefinierte Klasse im Selektor verwenden:

.highlighted_task.gantt_task_line {
    background-color: #ff9668;
    border-color: rgba(0,0,0,0.3);
}

.highlighted_task .gantt_task_progress {
    text-align: center;
    z-index: 0;
    background: rgba(0,0,0,0.3);
}

Verwandtes Beispiel: Styling particular task bars

Hervorhebung von Bereichen innerhalb des Aufgabenbalkens

Wenn Sie einige Bereiche innerhalb des Aufgabenbalkens hervorheben möchten, müssen Sie zusätzliche Elemente in den Balken über das gantt.templates.task_text Template einfügen:

gantt.templates.task_text = (startDate, endDate, task) => `
    <div className="custom_progress warm_up" style={{width: '20%'}}></div>
    <div className="custom_progress in_progress" style={{width: '60%'}}>${task.text}</div>
    <div className="custom_progress cool_down" style={{width: '20%'}}></div>
`;

und CSS anwenden:

.custom_progress {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    height: 100%;
}

.custom_progress.nearly_done {
    background-color: #4CC259;
}

.custom_progress.in_progress {
    background-color: #88BFF5;
}

.custom_progress.idle {
    background-color: #d96c49;
}

Verwandtes Beispiel: Custom html content (Stackbar)

Verknüpfung

Die Struktur des DOM-Elements der Verknüpfung ist unten angegeben:

- .gantt_task_link
    - .gantt_line_wrapper
    - .gantt_link_line_right
    - .gantt_link_line_left
    - .gantt_link_line_up
    - .gantt_link_line_down
- .gantt_link_arrow.gantt_link_arrow_right
- .gantt_link_arrow.gantt_link_arrow_left

Hier ist ein Beispiel, wie Sie die Elemente der Abhängigkeitsverbindungen färben können:

.gantt_line_wrapper div {
    background-color: #ffa011;
}
.gantt_link_arrow_right {
    border-left-color: #ffa011;
}
.gantt_link_arrow_left {
    border-right-color: #ffa011;
}
.gantt_task_link:hover .gantt_line_wrapper div {
    box-shadow: 0 0 5px 0 #ffa011;
}

Verwandtes Beispiel: Styling links

Die Dicke der Verbindungs-Linie wird über die Konfiguration gantt.config.link_line_width festgelegt.

Resizer

Die folgenden Selektoren können angewendet werden, um das DOM-Element des Resizers zu stylen:

.gantt_task_drag
.gantt_task_drag.task_start_date
.gantt_task_drag.task_end_date

Ein Beispiel zum Deaktivieren des Resizers des Startdatums:

.gantt_task_line:hover .gantt_task_drag.task_start_date {
    display: none;
}

Verwandtes Beispiel: Disabling resizer of the start date

Ein Beispiel zum Deaktivieren des Resizers des Enddatums:

.gantt_task_line:hover .gantt_task_drag.task_end_date {
    display: none;
}

Verwandtes Beispiel: Disabling resizer of the end date

Verknüpfungssteuerung

Die folgenden Selektoren können verwendet werden, um Stile auf das Element des runden Griffs am Anfang (Ende) der Aufgabe anzuwenden:

.gantt_link_control .gantt_link_point
.gantt_link_control.task_start_date .gantt_link_point
.gantt_link_control.task_end_date .gantt_link_point

Hintergrund-Raster

Die Struktur des DOM-Elements des Hintergrund-Rasters sieht wie folgt aus:

- .gantt_data_area
    - .gantt_task_bg
        - .gantt_task_row
        - .gantt_task_row.odd
            - .gantt_task_cell

Hintergrundzeilen:

Um die Standardstil-Einstellungen der Hintergrundzeilen zu ändern, müssen Sie dem Selektor .gantt_task_row einen benutzerdefinierten Stil hinzufügen. Zum Beispiel:

.gantt_row,
.gantt_task_row {
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

Um jede zweite Hintergrundzeile zu färben, sollten Sie benutzerdefinierte CSS-Eigenschaften im Selektor .gantt_task_row.odd definieren.

Sie können einfach benutzerdefinierte Farben für die ausgewählte Zeile festlegen, zum Beispiel:

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: #fff3a1;
}
.gantt_task_row.gantt_selected .gantt_task_cell {
    border-right-color: #ffec6e;
}

Verwandtes Beispiel: Styling selected row

Hintergrundzellen

Um die Standardeinstellungen der Hintergrundzellen zu ändern, sollten Sie einen benutzerdefinierten Stil im Selektor .gantt_task_cell festlegen.

Um die Hintergrundspalten zu färben, verwenden Sie die Vorlage timeline_cell_class:

gantt.templates.timeline_cell_class = (task, date) => {
    if (!gantt.isWorkTime({ date: date, unit: "day", task: task })) {
        return "weekend";
    }
    return "";
};

und CSS anwenden:

.gantt_task_cell.weekend {
    background-color: #F5F5F5;
}

.gantt_task_row.gantt_selected .gantt_task_cell.weekend {
    background-color: #F8EC9C;
}

Verwandtes Beispiel: Duration includes only working days

Ressourcenbereich

Der Ressourcenbereich besteht aus Grids und Timelines, ähnlich dem Haupt-Gantt-Bereich.

Standardmäßig verwenden Grids und Timelines der Ressourcenansicht globale Templates und Konfigurationen. Sie können unterschiedliche Konfigurationen und Templates für den Ressourcenbereich verwenden, indem Sie diese in die layout config übergeben.

Sie können das Ressourcen-Grid und die Ressourcen-Timeline anhand des entsprechenden View-Namens im CSS-Selektor anvisieren:

.resourceGrid_cell .gantt_row,
.resourceHistogram_cell .gantt_task_row {
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

Die allgemeine Struktur des DOM-Elements des Ressourcenbereichs sieht unten so aus:

- .gantt_layout_root
    - .grid_cell
    - .timeline_cell
    - .resourceGrid_cell
    - .resourceHistogram_cell
    - .resourceTimeline_cell

Die Namen der Klassen unter .gantt_layout_root stammen aus der Layout-Konfiguration und stimmen mit dem Wert der Eigenschaft view einer Layout-Zelle überein:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                { view: "grid", group: "grids", scrollY: "scrollVer" },
                ...
            ]
        },
        ...
        {
            id: "resources",
            cols: [
                { view: "resourceGrid", group: "grids", scrollY: "resourceVScroll" },
                ...
                { view: "resourceHistogram", capacity: 24, scrollX: "scrollHor",
                    scrollY: "resourceVScroll" },
                ...
            ]
        },
        ...
    ]
};

Ressourcengrid

resource_grid

Sie können dieselben Selektoren wie beim Aufgaben-Grid verwenden, der oberste Selektor ist .resourceGrid_cell:

.resourceGrid_cell .gantt_row,
.resourceGrid_cell .gantt_row.odd {
    background-color: rgba(232, 232, 232, 0.6);
}

Ressourcenhistogramm

resource_histogram_css

Das Ressourcenhistogramm hat die gleichen Elemente wie die Haupt-Timeline. Standardmäßig zielen alle Selektoren, die auf die Haupt-Timeline abzielen, auch auf die Ressourcen-Timeline ab, sofern Sie nicht die Layout-Zellenklasse (.timeline_cell, .resourceHistogram_cell) in Ihren Selektoren verwenden.

Sie können das Ressourcenhistogramm mit dem folgenden Selektor anvisieren: .resourceHistogram_cell.

Die allgemeine Struktur des DOM-Elements des Ressourcenhistogramms:

- .gantt_task_bg
- .gantt_bars_area
    - div
        - .gantt_histogram_fill
        - .gantt_histogram_cell
    - div
        - .gantt_histogram_hor_bar
        - .gantt_histogram_vert_bar

Ein Beispiel zur Änderung der Farbe der Histogramm-Elemente:

.gantt_histogram_cell {
    color: #000;
}

.gantt_histogram_label {
    font-weight: 700;
    font-size: 13px;
}

.gantt_histogram_fill {
    background-color: rgba(41,157,180,.2);
}

Um die Farbe bestimmter Zellen zu ändern, verwenden Sie die gantt.templates.histogram_cell_class Vorlage:

gantt.templates.histogram_cell_class = (startDate, endDate, resource, resourceTasks) => {
    if (getAllocatedValue(resourceTasks, resource) > getCapacity(startDate, resource)) {
        return "column_overload";
    }
};

und CSS anwenden:

.column_overload .gantt_histogram_fill {
    background-color: #ffa9a9;
}

Um die Histogramm-Linie zu färben, können Sie benutzerdefinierte CSS auf die folgenden Klassen-Selektoren anwenden:

.gantt_histogram_hor_bar
.gantt_histogram_vert_bar

Die Farbe der Histogramm-Linie ändern Sie so:

.gantt_histogram_hor_bar, .gantt_histogram_vert_bar {
    background: #299db4;
}

Ressourcen-Diagramm

resource_diagram

Das Ressourcen-Diagramm hat dieselben Elemente wie die Haupttimeline. Standardmäßig zielen alle Selektoren, die auf die Haupttimeline abzielen, auch auf die Ressourcen-Timeline ab, sofern Sie nicht die Layout-Zellenklasse (.timeline_cell, .resourceTimeline_cell) in Ihren Selektoren verwenden.

Sie können das Ressourcen-Diagramm mit dem folgenden Selektor anvisieren: .resourceTimeline_cell.

Die allgemeine Struktur des DOM-Elements des Ressourcen-Diagramms:

- .gantt_task_bg
- .gantt_bars_area
    - div
        - .gantt_resource_marker
            - div

Der oberste Selektor ist .resourceTimeline_cell.

Beispiel für Style der Beschriftungen des Ressourcen-Diagramms:

.gantt_resource_marker div {
    background: #51c185;
    width: 28px;
    height: 28px;
    line-height: 29px;
    display: inline-block;
    color: #FFF;
    margin: 3px;
}

Um Styles bestimmter Marker zu ändern, verwenden Sie die gantt.templates.resource_cell_class Vorlage:

<style>
    .resource_marker.workday_over div {
        border-radius: 3px;
        background: #ff8686;
    }

gantt.templates.resource_cell_class = (startDate, endDate, resource, resourceTasks) => {
    const cssClasses = [];
    cssClasses.push("resource_marker");
    if (resourceTasks.length <= 1) {
        cssClasses.push("workday_ok");
    } else {
        cssClasses.push("workday_over");
    }
    return cssClasses.join(" ");
};

Need help?

Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.

Rastergestaltung​

Rasterkopfzeile​

Skalenhöhe​

Eine Zelle der Rasterkopfzeile​

Rasterkörper​

Styling der Rasterzeilen​

Jede zweite Zeile​

Ausgewählte Zeile​

Aufgabenzeilen, Projektzeilen und Meilensteine​

Bestimmte Zeilen​

Zeilenhöhe​

Styling von Zellen/Spalten des Grids​

Styling der Timeline​

Zeitmaßstab​

Zeitmaßstabs-Container​

Zeitskalen​

Zellen der Zeitachse​

Datenbereich​

Aufgabe​

Aufgabenbalken​

Geteilte Aufgaben (Split tasks)​

Fortschrittsbalken​

Benutzerdefinierte Farbe für bestimmte Aufgabenbalken​

Hervorhebung von Bereichen innerhalb des Aufgabenbalkens​

Verknüpfung​

Resizer​

Verknüpfungssteuerung​

Hintergrund-Raster​

Hintergrundzeilen:​

Hintergrundzellen​

Ressourcenbereich​

Ressourcengrid​

Ressourcenhistogramm​

Ressourcen-Diagramm​

Rastergestaltung

Rasterkopfzeile

Skalenhöhe

Eine Zelle der Rasterkopfzeile

Rasterkörper

Styling der Rasterzeilen

Jede zweite Zeile

Ausgewählte Zeile

Aufgabenzeilen, Projektzeilen und Meilensteine

Bestimmte Zeilen

Zeilenhöhe

Styling von Zellen/Spalten des Grids

Styling der Timeline

Zeitmaßstab

Zeitmaßstabs-Container

Zeitskalen

Zellen der Zeitachse

Datenbereich

Aufgabe

Aufgabenbalken

Geteilte Aufgaben (Split tasks)

Fortschrittsbalken

Benutzerdefinierte Farbe für bestimmte Aufgabenbalken

Hervorhebung von Bereichen innerhalb des Aufgabenbalkens

Verknüpfung

Resizer

Verknüpfungssteuerung

Hintergrund-Raster

Hintergrundzeilen:

Hintergrundzellen

Ressourcenbereich

Ressourcengrid

Ressourcenhistogramm

Ressourcen-Diagramm