Available only in PRO Edition

Ressourcenmanagement

Gantt bietet vordefinierte Ressourcenansichten, um die Auslastung der Ressourcen zu visualisieren, Werkzeuge zur Projektaufteilung nach Ressourcen zur Ausbalancierung der Arbeitslasten sowie aufgaben- und ressourcenspezifische Kalender.

Ressourcenansicht-Panel

dhtmlxGantt stellt zwei vordefinierte Layout-Ansichten zur Anzeige der Ressourcenauslastung bereit: das Ressourcen-Auslastungsdiagramm und das Ressourcen-Histogramm.

Ressourcen-Auslastungsdiagramm

Dies umfasst spezielle Ansichten für das Grid und die Zeitleiste: "resourceGrid" und "resourceTimeline".

gantt.config.layout = {
    css: "gantt_container",
    rows: [
      {
        // Layout für Standard-Grid und Zeitleiste
        cols: [
          {view: "grid", group:"grids", scrollY: "scrollVer"},
          {resizer: true, width: 1},
          {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
          {view: "scrollbar", id: "scrollVer", group:"vertical"}
        ],
        gravity:2
      },
      { resizer: true, width: 1},
      {
        // Layout für Grid und Zeitleiste des Ressourcenpanels
        config: resourceConfig, // Konfiguration für Grid und Zeitleiste
        cols: [
          {view: "resourceGrid", group:"grids", width: 435, scrollY:"resourceVScroll"},
          {resizer: true, width: 1},
          {view: "resourceTimeline", scrollX: "scrollHor", scrollY:"resourceVScroll"},
          {view: "scrollbar", id: "resourceVScroll", group:"vertical"}
        ],
        gravity:1
       },
       {view: "scrollbar", id: "scrollHor"}
    ]
};

Related sample:  Resource load diagram

Nach dem Einrichten verhält sich resourceGrid wie die Standard-Grid-Ansicht, ist jedoch schreibgeschützt. resourceTimeline verwendet die gleichen Skalen-Einstellungen wie die Standard-Zeitleiste und enthält zwei Ebenen:

• Hintergrundzeilen, die die Templates aus task_row_class und timeline_cell_class verwenden. Diese können auf Layout-Ebene angepasst werden.
• Ressourcenebene — einzigartig für resourceTimeline, zeigt Blöcke in Zellen, in denen Ressourcen Aufgaben zugewiesen sind. Stil und Inhalt dieser Blöcke können mit den Templates resource_cell_class und resource_cell_value angepasst werden:

gantt.templates.resource_cell_value = function(start_date, end_date, resource, tasks,
    assignments){
    var html = "<div>" +  tasks.length * 8 + "h</div>";
        return html;
};

Related sample:  Templates of the Resource diagram

Ressourcen-Histogramm

Diese Layout-Ansicht für Ressourcenauslastung beinhaltet "resourceGrid" und "resourceHistogram" für Grid und Zeitleiste.

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            // Layout für Standard-Grid und Zeitleiste
            gravity: 2,
            cols: [
                {view: "grid", group:"grids", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer", group:"vertical"}
            ]
        },
        { resizer: true, width: 1, next: "resources"},
        {
            // Layout für Grid und Zeitleiste des Ressourcenpanels
            gravity:1,
            id: "resources",
            config: resourceConfig, // Konfiguration für Grid und Zeitleiste
            templates: resourceTemplates, // Templates für Grid und Zeitleiste
            cols: [
                { view: "resourceGrid", group:"grids", scrollY: "resourceVScroll" },
                { resizer: true, width: 1},
                { view: "resourceHistogram", capacity:24, scrollX: "scrollHor", 
                    scrollY: "resourceVScroll"},
                { view: "scrollbar", id: "resourceVScroll", group:"vertical"}
            ]
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Related sample:  Resource histogram

Wie beim Ressourcen-Auslastungsdiagramm verhält sich resourceGrid ähnlich wie die Standard-Grid-Ansicht, ist jedoch schreibgeschützt. resourceHistogram bietet mehrere zusätzliche Templates:

• histogram_cell_class — CSS-Klasse, die auf eine Zelle im Ressourcenpanel angewendet wird

gantt.templates.histogram_cell_class=function(start_date,end_date,resource,tasks,
    assignments){
    return "";
};

• histogram_cell_label — Beschriftung, die innerhalb einer Zelle angezeigt wird

gantt.templates.histogram_cell_label=function(start_date,end_date,resource,tasks,
    assignments){
    return tasks.length * 8;
};

• histogram_cell_allocated — Höhe des ausgefüllten Bereichs im Histogramm, von 0 bis maxCapacity.

gantt.templates.histogram_cell_allocated=function(start_date,end_date,resource,tasks,
    assignments){
    return tasks.length * 8;
};

• histogram_cell_capacity — Höhe der Linie, die die verfügbare Kapazität der Ressource anzeigt, von -1 bis maxCapacity. Werte unter 0 blenden die Linie aus.

gantt.templates.histogram_cell_capacity=function(start_date,end_date,resource,tasks,
    assignments){
    return 24;
};

Verständnis von maxCapacity

Stellen Sie sich jede Histogrammzeile als Balkendiagramm vor, wobei maxCapacity die Höhe der Y-Achse darstellt. Im folgenden Beispiel entspricht maxCapacity dem Wert 24:

Das Setzen von histogram_cell_allocated oder histogram_cell_capacity auf 24 bedeutet also, dass das obere Ende der Zeile erreicht wird.

Standardmäßig beträgt maxCapacity für jede Ressource 24. Werden in histogram_cell_capacity Werte über 24 zurückgegeben, erfolgt die Berechnung korrekt, aber der ausgefüllte Bereich in den Zellen des Ressourcenpanels wird möglicherweise nicht wie erwartet angezeigt.

Sie können maxCapacity global für das gesamte Histogramm oder individuell pro Ressource konfigurieren. Hier ein Beispiel:

Related sample:  Konfiguration von maxCapacity

maxCapacity kann auf Histogramm-Ebene gesetzt werden:

{ view: "resourceHistogram", capacity:24, scrollX: "scrollHor", 
    scrollY: "resourceVScroll"}

Oder individuell für jede Ressource:

resourcesStore.parse([
    {id: 1, text: "John", capacity:8},
    {id: 2, text: "Mike", capacity:4},
    {id: 3, text: "Anna", capacity:8},
    {id: 4, text: "Bill", capacity:8},
    {id: 5, text: "Floe", capacity:8}
]);

Arbeiten mit dem Ressourcenpanel

Standardmäßig sind beide Ansichten (entweder "resourceGrid" und "resourceTimeline" oder "resourceGrid" und "resourceHistogram") mit dem Datenspeicher verbunden, der in der Einstellung gantt.config.resource_store angegeben ist.

Automatische Erstellung des Datenspeichers

Ab Version 8.0 wird der Ressourcen-Datenspeicher automatisch erstellt, wenn Gantt initialisiert wird, und ist verfügbar, sobald das "onGanttReady"-Event ausgelöst wird. Um auf diesen Store zuzugreifen, verwenden Sie die Methode gantt.getDatastore(gantt.config.resource_store).

Wenn Sie den Ressourcenstore anpassen möchten, können Sie die Option gantt.config.resources verwenden:

gantt.config.resources = {
    resource_store: {
        type: "treeDataStore",
        fetchTasks: true,
        initItem: function(item) {
            item.parent = item.parent || gantt.config.root_id;
            item[gantt.config.resource_property] = item.parent;
            item.open = true;
            return item;
        }
    },
}

Die Einstellungen innerhalb von resource_store werden zur Erstellung des Standard-Ressourcendatenspeichers verwendet. Falls Sie bereits einen Ressourcendatenspeicher im Code haben, wird dieser verwendet.

Um Ressourcen zu laden, können Sie diese wie hier beschrieben über gantt.parse()/gantt.load() übergeben oder den Datastore direkt mit datastore.parse() befüllen:

gantt.attachEvent("onGanttReady", function(){
    const store = gantt.getDatastore(gantt.config.resource_store);
    store.parse([
       {id: 6, text: "John"},
       {id: 7, text: "Mike"},
       {id: 8, text: "Anna"},
       {id: 9, text: "Bill"},
    ])
});

Die Ressourcensteuerung der Lightbox wird automatisch mit der Ressourcenliste verknüpft:

gantt.config.lightbox = {
    sections: [
        ...,
        { name: "resources", type: "resources", map_to: "auto", default_value: 8}
    ]
};

Manuelle Erstellung des Datenspeichers

Sie können den Datenspeicher auch manuell mit der Methode createDatastore erstellen:

var resourcesStore = gantt.createDatastore({
  name: gantt.config.resource_store,
  // Verwenden Sie treeDatastore, wenn Ihre Ressourcen hierarchisch sind (z. B. Mitarbeiter/Abteilungen),
  // oder lassen Sie "type" weg für eine flache Struktur
  type: "treeDatastore", 
  initItem: function (item) {
    item.parent = item.parent || gantt.config.root_id;
    item[gantt.config.resource_property] = item.parent;
    item.open = true;
    return item;
  }
});

Um den Datenspeicher zu befüllen, verwenden Sie die Methode datastore.parse:

resourcesStore.parse([
    {id: 1, text: "QA", parent:null},
    {id: 2, text: "Development", parent:null},
    {id: 3, text: "Sales", parent:null},
    {id: 4, text: "Other", parent:null},
    {id: 5, text: "Unassigned", parent:4},
    {id: 6, text: "John", parent:1},
    {id: 7, text: "Mike", parent:2},
    {id: 8, text: "Anna", parent:2},
    {id: 9, text: "Bill", parent:3},
    {id: 10, text: "Floe", parent:3}
]);

Wenn Sie Ressourcen in der Lightbox verwenden möchten, empfiehlt es sich, dies über die Methode serverList zu tun, die durch das onParse-Event des Datenspeichers ausgelöst wird:

resourcesStore.attachEvent("onParse", function(){
  var people = [];
  resourcesStore.eachItem(function(res){
    if(!resourcesStore.hasChild(res.id)){
        var copy = gantt.copy(res);
        copy.key = res.id;
        copy.label = res.text;
        people.push(copy);
    }
  });
  gantt.updateCollection("resourceOptions", people);
});

Ressourcenpanel erweitern

Sie können das Ressourcenpanel erweitern, um alle einer bestimmten Ressource zugewiesenen Aufgaben anzuzeigen, indem Sie die Eigenschaft fetchTasks beim Initialisieren des Datenspeichers aktivieren:

gantt.config.resources = {
    resource_store: {
        type: "treeDataStore",
        fetchTasks: true,         initItem: function (item) {
            item.parent = item.parent || gantt.config.root_id;
            item[gantt.config.resource_property] = item.parent;
            if(!item.parent){
                item.open = true;
            }else{
                item.open = false;
            }
            return item;
        }
    },
};

oder

gantt.$resourcesStore = gantt.createDatastore({
    name: gantt.config.resource_store,
    type: "treeDatastore",
    fetchTasks: true,     initItem: function (item) {
        item.parent = item.parent || gantt.config.root_id;
        item[gantt.config.resource_property] = item.parent;
        if(!item.parent){
            item.open = true;
        }else{
            item.open = false;
        }
        return item;
    }
});

Related sample:  Show all assigned tasks in the resource panel

Mit fetchTasks auf true zeigt Gantt im Ressourcenpanel alle mit einer Ressource verknüpften Aufgaben an. Dies gilt sowohl für das Ressourcen-Auslastungsdiagramm als auch für das Ressourcen-Histogramm.

Eine schnelle Möglichkeit, alle einer Ressource zugewiesenen Aufgaben abzurufen, finden Sie unter getResourceAssignments.

gantt.getResourceAssignments("6");

Ressourcen zuweisen

Ressourcen mit Aufgaben verbinden

Die Verbindung zwischen Ressourcen und Aufgaben wird über die Einstellung resource_property gesteuert:

gantt.config.resource_property = "user_id";
// task.user_id <-> resource.id

Ressourcen können auf verschiedene Arten über Eigenschaften des Aufgabenobjekts mit Aufgaben verknüpft werden:

• Einer Aufgabe eine einzelne Ressource zuweisen

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6, 
    user_id: 5 // 5 ist die Ressourcen-ID 
}

• Einer Aufgabe mehrere Ressourcen zuweisen

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6, 
    users: [2, 3] // 2 und 3 sind Ressourcen-IDs
}

Dieses Format eignet sich gut für das benutzerdefinierte Multiselect-Steuerelement.

• Mehrere Ressourcen mit angegebenen Mengen zuweisen

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6,
    users: [{resource_id:2, value:8}, {resource_id:3, value:4}]  
}

Hier werden der Ressource mit id=2 acht Einheiten und der Ressource mit id=3 vier Einheiten zugewiesen. Dieses Format wird vom Ressourcen-Steuerung Lightbox unterstützt.

Ab Version v8.0 können Ressourcenzuweisungen auch als separate Liste geladen werden, und Gantt verknüpft sie automatisch mit den Aufgaben:

gantt.parse({
    tasks: [...],
    links: [...],
    resources: [...],
    assignments: [{id:1, resource_id:2, task_id: 5, value: 8}, ...]
});

Weitere Informationen zu den Datenformaten finden Sie hier.

Beim Senden von Daten an den Server serialisiert der DataProcessor diese Eigenschaften als JSON. Um solche Datensätze effizient auf dem Server zu verarbeiten, empfiehlt sich der "REST_JSON" DataProcessor-Modus.

Wenn Sie Änderungen an Ressourcenzuweisungen getrennt von Aufgaben speichern möchten, aktivieren Sie diese Konfiguration:

gantt.config.resources = {
    dataprocessor_assignments: true,
    dataprocessor_resources: true,
};

Mehr dazu erfahren Sie im entsprechenden Artikel.

Zeitpunkt der Ressourcenzuweisungen festlegen

Standardmäßig wird eine Ressource für die gesamte Dauer einer Aufgabe zugewiesen.
Ab Version v7.1 können Ressourcenzuweisungsobjekte zusätzliche optionale Parameter enthalten, um die Zuweisungsdaten innerhalb der Aufgabe zu spezifizieren.

Diese zusätzlichen Eigenschaften umfassen:

• id – (string|number) Zuweisungs-ID
• start_date – (Date|string) Startdatum der Zuweisung
• end_date – (Date|string) Enddatum der Zuweisung
• delay – (number) Versatz zwischen Zuweisungsbeginn und Aufgabenbeginn
• duration – (number) Länge der Zuweisung
• mode – (string) Berechnung der Zuweisungszeit: "default"|"fixedDates"|"fixedDuration"

{
    id: 5, text: "Interior office", type: "task", start_date: "03-04-2019 00:00",
    duration: 7, parent: "2", progress: 0.6, priority: 1,
    users: [{
        resource_id: "3",
        value: 8,
        delay: 1     },{
        resource_id: "6",
        value: 3,
        start_date: "03-04-2019 00:00",         end_date: "05-04-2019 00:00",         mode: "fixedDates"     },{
        resource_id: "7",
        value: 3,
        delay: 1,         duration: 2,         mode: "fixedDuration"     }
    ]
}

Related sample:  Assign resource values to specific days

1. Die Start- und Enddaten der Ressourcenzuweisungen werden im Ressourcen-Histogramm und Diagramm angezeigt.

2. Sie können dem Zuweisungsobjekt optional eine id hinzufügen:

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6,
    users: [{
        id: 5, 
        resource_id: 2, value: 8, 
        delay: 1
    }]
}

Mit dieser ID können Sie auf die Zuweisung über die gantt API zugreifen:

var assignment = gantt.getDatastore("resourceAssignments").getItem(5);

3. Das Verhalten der anderen Eigenschaften hängt vom Wert von mode ab:

• der "default"-Modus

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6,
    users: [
        { resource_id: 2, value: 8, delay: 1},
        { resource_id: 3, value: 6},
    ]
}

Fehlt mode oder ist auf "default" gesetzt, werden start_date und end_date der Zuweisung von den Daten der Aufgabe abgeleitet. Die Zuweisung beginnt standardmäßig am Startdatum der Aufgabe und endet, wenn die Aufgabe endet.

Die Eigenschaft delay funktioniert wie das Delay-Feld in MS Project.

Wenn ein Delay gesetzt ist, wird das start_date der Zuweisung wie folgt berechnet:
gantt.calculateEndDate({start_date:task.start_date, duration:assignment.delay, task:task}).

Das bedeutet, die Zuweisung beginnt nach dem angegebenen Versatz ab Aufgabenstart und endet mit der Aufgabe. Diese Daten werden automatisch aktualisiert, wenn sich die Aufgabe ändert.

• der "fixedDuration"-Modus

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6,
    users: [
        {resource_id:2, value:8, duration: 1, delay:0, mode: "fixedDuration"},
        {resource_id:2, value:2, duration: 1, delay:1, mode: "fixedDuration"},
        {resource_id:2, value:3, delay:2, mode: "default"}
    ]
}

Hier wird das start_date wie im default-Modus berechnet.

Das end_date ist jedoch nicht mehr an das Enddatum der Aufgabe gebunden. Es wird stattdessen wie folgt berechnet:
gantt.calculateEndDate({start_date:assignment.start_date, duration:assignment.duration, task:task}).

Wenn sich die Aufgabe ändert, werden die Zuweisungsdaten neu berechnet, aber die Dauer der Zuweisung bleibt fest.

• der "fixedDates"-Modus

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6,
    users: [{
        resource_id:2, value:8, 
        start_date:"03-04-2018", end_date:"11-04-2018", mode: "fixedDates"
    }]
}

In diesem Modus sind die Zuweisungsdaten exakt wie angegeben und ändern sich nicht, wenn die Aufgabe angepasst wird.

Die Eigenschaft delay hat im Modus "fixedDates" keine Wirkung.

Hier eine kurze Übersicht, wie die Zuweisungsdaten je Modus berechnet werden:

• default

  • assignment.start_date = task.start_date + assignment.delay
  • assignment.end_date = task.end_date

• fixedDuration

  • assignment.start_date = task.start_date + assignment.delay
  • assignment.end_date = assignment.start_date + assignment.duration

• fixedDates

  • assignment.start_date = assignment.start_date
  • assignment.end_date = assignment.end_date

Aufgaben abrufen, denen eine Ressource zugewiesen ist

Um schnell alle Aufgaben zu erhalten, denen eine Ressource zugewiesen ist, verwenden Sie die Methode aus getResourceAssignments.

gantt.getResourceAssignments("6");

Diese Methode nimmt eine Ressourcen-ID entgegen und gibt ein Array von Objekten zurück, die die Aufgaben repräsentieren, denen diese Ressource zugewiesen ist:

[ 
    {task_id: 5, resource_id: "6", value: 5, delay: 0, duration: 7, 
        start_date: "03-04-2019 00:00", end_date: "12-04-2019 00:00", 
        id: 1617258553240, mode: "default"},
    {task_id: 18, resource_id: "6", value: 2, delay: 0, duration: 2, 
        start_date: "05-04-2019 00:00", end_date: "09-04-2019 00:00", 
        id: 1617258553250, mode: "default"},
    {task_id: 19, resource_id: "6", value: 3, delay: 0, duration: 4, 
        start_date: "09-04-2019 00:00", end_date: "13-04-2019 00:00", 
        id: 1617258553251, mode: "default"},
    {task_id: 21, resource_id: "6", value: 5, delay: 0, duration: 4, 
        start_date: "03-04-2019 00:00", end_date: "09-04-2019 00:00", 
        id: 1617258553254, mode: "default"}
]

Jedes Objekt enthält folgende Eigenschaften:

• task_id – Aufgabenkennung
• resource_id – Ressourcenkennung
• value – Menge der Ressource, die der Aufgabe zugewiesen ist
• delay – Versatz zwischen Zuweisungsbeginn und Aufgabenbeginn
• duration – Länge der Zuweisung
• start_date – Startdatum der Zuweisung
• end_date – Enddatum der Zuweisung
• id – Zuweisungskennung
• mode – Berechnungsmodus der Zuweisungszeit: "default"|"fixedDates"|"fixedDuration"

Ressourcenzuweisungen einer Aufgabe abrufen

Die Methode getTaskAssignments ruft Ressourcenzuweisungen für eine bestimmte Aufgabe aus dem Datenspeicher ab:

gantt.getTaskAssignments(5);

Sie nimmt eine Aufgaben-ID entgegen und gibt ein Array von Objekten zurück, die die Ressourcenzuweisungen für diese Aufgabe darstellen:

[
    {task_id: 5, id: 1617254693938, delay: 0, duration: 2, 
        start_date: "03-04-2019 00:00", end_date: "05-04-2019 00:00", 
        mode: "fixedDuration", resource_id: 6, value: 3},
    {task_id: 5, id: 1617254693946, delay: 3, duration: 1, 
        start_date: "06-04-2019 00:00", end_date: "07-04-2019 00:00", 
        mode: "fixedDuration", resource_id: 6, value: 6}
]

Die zurückgegebenen Objekte haben die gleichen Eigenschaften wie die aus der Methode getResourceAssignments.

Verbindung über die Lightbox herstellen

Ressourcen können mit jeder Eigenschaft des Aufgabenobjekts über die integrierte Lightbox-Funktion verknüpft werden.

gantt.serverList("people", [
    {key: 1, label: "John"},
    {key: 2, label: "Mike"},
    {key: 3, label: "Anna"},
    {key: 4, label: "Bill"},
    {key: 7, label: "Floe"}
]);
 
gantt.locale.labels.section_owner = "Owner";
 
gantt.config.lightbox.sections = [
  {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
  {name:"owner", map_to:"owner_id", type:"select", options:gantt.serverList("people")},
  {name:"time", type:"duration", map_to: "auto"}
];

Weitere Informationen zur Konfiguration des Ressourcen-Steuerelements in der Lightbox finden Sie im Artikel Resources Control.

Laden von Collections

Collections, die als Serverlisten definiert sind, können nach der Initialisierung des Gantt-Diagramms dynamisch geladen und aktualisiert werden:

// Initialisiere das Lightbox mit einer leeren Collection
gantt.locale.labels.section_owner = "Owner";
 
gantt.config.lightbox.sections = [
  {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
  {name:"owner", map_to:"owner_id", type:"select", options:gantt.serverList("people")},
  {name:"time", type:"duration", map_to: "auto"}
];
 
// Optionen aktualisieren, sobald sie geladen sind
gantt.updateCollection("people", [
    {key: 1, label: "John"},
    {key: 2, label: "Mike"},
    {key: 3, label: "Anna"},
    {key: 4, label: "Bill"},
    {key: 7, label: "Floe"}
]);

Related sample:  Assigning owners to tasks

Wenn Ressourcen über die serverList-Collection definiert werden, können sie zusammen mit anderen Daten geladen werden. Andernfalls ist das manuelle Laden erforderlich.

Weitere Hinweise zur Konfiguration des Ressourcen-Controls im Lightbox finden Sie im Artikel Resources Control.

Ressourcen und Ressourcenzuweisungen laden

Ab Version 8.0 können Ressourcen und Ressourcenzuweisungen mit den Methoden gantt.parse() oder gantt.load() in das Gantt geladen werden:

gantt.parse({
    tasks: [
        ...,
        {
            id: 5,
            text: "Interior office",
            type: "task",
            start_date: "03-04-2024 00:00",
            duration: 7,
            parent: "2",
            owner: [
                {
                    resource_id: "6",
                    value: 3,
                    start_date: "03-04-2024 00:00",
                    end_date: "05-04-2024 00:00",
                }
            ]
        },
        ...
    ],
    links: [],
    resources: [
        {id: 6, text: "John", unit: "hours/day" },
        {id: 7, text: "Mike", unit: "hours/day" },
        {id: 8, text: "Anna", unit: "hours/day" },
        {id: 9, text: "Bill", unit: "hours/day" },
        {id: 10, text: "Floe", unit: "hours/day" }
    ]
});

Ressourcenzuweisungen können auch separat von Aufgaben bereitgestellt werden:

gantt.parse({
    tasks: [
        ...,
        {
            id: 5,
            text: "Interior office",
            type: "task",
            start_date: "03-04-2024 00:00",
            duration: 7,
            parent: "2",
            priority: 1
        },
        ...
    ],
    links: [],
    assignments: [
        {
            id: 1, task_id: 5, resource_id: 6, value: 3,
            start_date: "03-04-2024 00:00", 
            end_date: "05-04-2024 00:00"
        }
    ],
    resources: [
        {id: 6, text: "John", unit: "hours/day" },
        {id: 7, text: "Mike", unit: "hours/day" },
        {id: 8, text: "Anna", unit: "hours/day" },
        {id: 9, text: "Bill", unit: "hours/day" },
        {id: 10, text: "Floe", unit: "hours/day" }
    ]
});

Verwaltung von Ressourcenzuweisungen

Parsen von Ressourcenzuweisungen

Ab Version 7.1 können Ressourcenzuweisungen als Objekte im Data Store verwaltet werden.

Die Eigenschaft process_resource_assignments steuert das Parsen von Werten aus der gantt.config.resource_property der Aufgaben in interne Ressourcenzuweisungsobjekte. Dadurch ist es möglich, mit Ressourcenzuweisungen über die DataStore API zu arbeiten, einschließlich Abrufen oder Aktualisieren von Zuweisungsobjekten.

Hinweis: Diese Funktion ist erforderlich, wenn die gewünschte Dauer und Zeit für Ressourcen angegeben werden soll, insbesondere bei Verwendung des Ressourcen-Diagramms und Histogramms.

Beachten Sie, dass das Aktivieren dieses Prozesses zu Performance-Einbußen führen kann, was sich bei großen Projekten auswirkt. Falls keine Zeit- oder Dauerdetails benötigt werden, kann das Parsen deaktiviert werden:

gantt.config.process_resource_assignments = false;

Wenn deaktiviert, ist gantt.getDatastore("resourceAssignments") nicht verfügbar und Zuweisungsobjekte besitzen keine dynamischen Eigenschaften. In diesem Fall behandelt das Ressourcen-Diagramm und Histogramm Ressourcen als für die gesamte Aufgabendauer zugewiesen.

Aktualisierung von Ressourcenzuweisungen

Ressourcenzuweisungen werden in einem automatisch erstellten Data Store gespeichert.

Standardmäßig wird dieser Store basierend auf den Aufgabenobjekten befüllt. Das bedeutet, dass eine Änderung der Resource-Property einer Aufgabe (z.B. task.users) den Data Store automatisch aktualisiert:

task[gantt.config.resource_property] = [
    {
        resource_id: "6",
        value: 3,
        start_date: "03-04-2019 00:00",
        end_date: "05-04-2019 00:00",
    }
];
gantt.updateTask(taskId);

Manchmal ist es jedoch notwendig, das Aufgabenobjekt nach Änderungen an den Ressourcenzuweisungen über die Data Store API zu aktualisieren. Um Änderungen zurück auf das Aufgabenobjekt zu übertragen, verwenden Sie die Methode gantt.updateTaskAssignments():

var assignmentStore = gantt.getDatastore(gantt.config.resource_assignment_store);
 
assignmentStore.addItem({
    resource_id: 5,
    task_id: 2,
    value: 4
});
assignmentStore.removeItem(assignment.id);
assignmentStore.updateItem(assignment.id);
 
// Nach Aktualisierung der Zuweisungen im Data Store, `updateTaskAssignments` aufrufen, um mit dem Aufgabenobjekt zu synchronisieren:
gantt.updateTaskAssignments(taskId);

Anzeige der Ressourcen einer Aufgabe

Ressourcennamen können als Teil der Aufgabenbeschreibung oder als Labels in den Rasterzellen angezeigt werden. Da Gantt keine eingebaute Methode zum Abrufen eines Elements aus der Serverliste per ID bietet, kann eine einfache Hilfsfunktion verwendet werden:

function byId(list, id) {
    for (var i = 0; i < list.length; i++) {
        if (list[i].key == id)
            return list[i].label || "";
    }
    return "";
}

Diese Hilfsfunktion kann dann in Templates verwendet werden, um Ressourcennamen anzuzeigen:

gantt.config.columns = [
    {name: "owner", width: 80, align: "center", template: function (item) {
        return byId(gantt.serverList('people'), item.owner_id)}},
    {name: "text", label: "Task name", tree: true, width: '*'},
    {name: "add", width: 40}
];
 
gantt.templates.rightside_text = function(start, end, task){
    return byId(gantt.serverList('people'), task.owner_id);
};

Related sample:  Assigning owners to tasks

Editierbares Ressourcen-Diagramm

Um das Bearbeiten von Ressourcenzuweisungen direkt im Ressourcen-Diagramm zu ermöglichen, setzen Sie folgende Konfiguration:

gantt.config.resources = {
    editable_resource_diagram: true
};

Related sample:  Assign resource values to specific days

Mit aktiviertem editable_resource_diagram weist Gantt automatisch die Templates gantt.templates.resource_cell_value und gantt.templates.resource_cell_class zu, um das Bearbeiten von Ressourcenzuweisungen zu unterstützen.

Falls Sie eigene Funktionen für diese Templates bereitstellen, verwendet Gantt diese anstelle der Standardimplementierungen.

Die Standardimplementierungen sind in gantt.ext.resources verfügbar:

gantt.templates.resource_cell_value = gantt.ext.resources.editableResourceCellTemplate;
gantt.templates.resource_cell_class = gantt.ext.resources.editableResourceCellClass;

In der Regel ist eine manuelle Zuweisung dieser Templates nicht erforderlich, da Gantt dies bei aktiviertem editierbaren Diagramm übernimmt.

Unten ein Beispiel für ein Template mit editierbaren Zellen, das nach Bedarf angepasst werden kann:

Related sample:  Customizable resource diagram template

Individuelle Gestaltung von Ressourcen

Für die Farbgebung werden häufig folgende Templates verwendet:

• gantt.templates.grid_row_class – CSS-Klasse für Zeilen im linken Raster
• gantt.templates.task_row_class – Hintergrundzeile in der Zeitleiste (wird nicht verwendet, wenn Smart Rendering aktiviert ist)
• gantt.templates.task_class – CSS-Klasse für Task-Bar-Elemente

Je nach Szenario können Sie entweder:

• Vordefinierte Klassen für jede Ressource verwenden, oder
• Styling-Informationen wie Hintergrund- und Textfarbe zusammen mit Ressourcen laden, was das dynamische Generieren von CSS auf der Seite erfordert

Related sample:  Assigning owners to tasks

Ressourcenkalender

Gantt unterstützt individuelle Arbeitszeit-Kalender, die bestimmten Ressourcen zugeordnet werden können.

Diese Kalender werden Aufgaben über eine Eigenschaft in einer 1:1-Beziehung zugeordnet:

// Der Ressourcenwert wird aus der Eigenschaft `task.resource_id` übernommen
gantt.config.resource_property = "resource_id";
 
gantt.config.resource_calendars = {
    "resource1" : "calendarId1",
    "resource2" : "calendarId2",
    "resource3" : "calendarId3"
};

Jede Eigenschaft kann verwendet werden, um Kalender Ressourcen zuzuweisen. Ändert sich die Resource-Property dynamisch, berechnet Gantt die Aufgabenzeit automatisch mit dem aktualisierten Kalender neu.

Related sample:  Resource calendars

Wenn mehreren Ressourcen eine Aufgabe zugewiesen ist, kann Gantt automatisch einen kombinierten Kalender für alle zugewiesenen Ressourcen generieren.

Weitere Details finden Sie im zugehörigen Artikel Zuweisen von Kalendern zu Ressourcen.

Auslastung von Ressourcen ausgleichen

Die Grouping-Erweiterung ermöglicht die Aufschlüsselung des gesamten Projekts nach der resource-Property.

Dies hilft dabei, die Auslastung von Ressourcen im Kalender auszugleichen.

Related sample:  Break down by resources

Weitere Informationen zur Gruppierung von Aufgaben finden Sie im zugehörigen Artikel.

Gruppierung von Aufgaben nach mehreren Ressourcen

Wenn einer Aufgabe mehrere Ressourcen zugewiesen sind, wird sie nach diesen Ressourcen gruppiert. Das bedeutet, dass die Aufgabe nicht mehrfach für jede Person erscheint, sondern einmal mit allen zugewiesenen Personen aufgelistet wird. Gruppierte Aufgaben werden basierend auf ihrem Startdatum sortiert.

Related sample:  Group by multiple resources

• Wenn Aufgaben im Datensatz mehreren Ressourcen zugewiesen sind, erstellt Gantt automatisch Gruppen dafür.
• Aufgaben ohne zugewiesene Ressourcen werden in eine Standardgruppe namens Not assigned eingeordnet. Existiert diese Gruppe bereits in den an die groupBy()-Methode übergebenen Daten, sollte sie die Konfiguration default:true enthalten, um eine doppelte Standardgruppe zu vermeiden.

Zurück nach oben