Meilensteine

Info

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

Meilensteine sind Aufgaben mit null Dauer, die verwendet werden, um wichtige Termine des Projekts, einige Schlüsselerge­bnisse oder Ziele zu kennzeichnen. Sie können Meilensteine beispielsweise verwenden, um Termine von Review-Meetings oder erwartete Fertigstellungstermine von Projektphasen hervorzuheben.

Programmgesteuert ist ein Meilenstein eine der vordefinierten Aufgabentypen. Er wird jedoch wie eine reguläre Aufgabe behandelt, d. h. er löst dieselben Ereignisse und Vorlagen aus.

Zugehöriges Beispiel: Projects and milestones

Allgemein, um die Möglichkeit zu bieten, Meilensteine zu einem Diagramm hinzuzufügen:

Fügen Sie dem Lightbox-Dialog eine zusätzliche Sektion hinzu - Typeselect-Steuerung - die es Ihren Benutzern ermöglicht, den Typ der Aufgaben zu ändern und Meilensteine auszuwählen.

gantt.config.lightbox.sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea"},
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", height: 72, type: "duration", map_to: "auto"}
];

Definieren Sie die rightside_text oder leftside_text Vorlage, um eine Textbeschriftung für einen Meilenstein festzulegen. Hinweis: Das mit der task_text Vorlage festgelegte Etikett wird nicht angezeigt, da Meilensteine eine Dauer von Null haben.

gantt.templates.rightside_text = function(start, end, task){
    if(task.type == gantt.config.types.milestone){
        return task.text;
    }
    return "";
};

Aktivieren Sie die order_branch-Eigenschaft, um die Bedienung für Ihre Endbenutzer zu vereinfachen. Die Option ermöglicht das Ziehen von Aufgaben innerhalb des übergeordneten Zweigs und ermöglicht es Ihren Benutzern, Meilensteine überall zu erstellen, diese dann jedoch an die richtigen Positionen zu ziehen.

gantt.config.order_branch = true;

Nachdem Sie diese Schritte abgeschlossen haben, ist Ihr Gantt-Diagramm vollständig bereit, mit Meilensteinen zu arbeiten.

Zugehöriges Beispiel: Projects and milestones

Spezifizierung von Meilensteinen in einem Datensatz

Um Meilensteine im anfänglichen Datensatz zu definieren, setzen Sie die type Eigenschaft eines Datenelements auf den Wert 'milestone' (Werte werden im types Objekt gespeichert):

var data = {
    tasks:[
        {id:1, text:"Project #1",    type:gantt.config.types.project,    open:true}, 
        {id:2, text:"Task #1",       start_date:"12-04-2020", duration:3, parent:1},
        {id:3, text:"Alpha release", type:gantt.config.types.milestone,   parent:1, /*!*/
            start_date:"14-04-2020"}],                                              /*!*/
    links:[]
};

Rollup-Aufgaben und Meilensteine

Ab Version 7.1 gibt es die Möglichkeit, Aufgaben und Meilensteine in ihren übergeordneten Projekten anzuzeigen. Dafür muss die rollup-Eigenschaft eines Datenelements auf true gesetzt werden:

var data = {
    tasks:[
        {id:11, text:"Project #1", type:"project", progress: 0.6, open: true},
        {id:12, text:"Task #1", start_date:"03-04-2018", duration:"3",
            parent:"11", progress: 1, open: true},
        {id:13, text:"Task #2", start_date:"03-04-2018", type:"project", 
            parent:"11", progress: 0.5, open: true},
        {id:16, text:"Final milestone", start_date:"08-04-2018", type:"milestone",  /*!*/
            rollup: true, parent:"11", progress: 0, open: true},  /*!*/
        {id:17, text:"Task #2.1", start_date:"03-04-2018", duration:"2", 
            parent:"13", progress: 1, open: true},
        {id:18, text:"Task #2.2", start_date:"06-04-2018", duration:"1",   
            parent:"13", progress: 0.8, open: true}],  
    links:[]
};

Das Ergebnis sieht so aus:

Es besteht außerdem die Möglichkeit, die Rollup-Funktionalität über das Rollup-Kontrollkästchen im Lightbox umzuschalten:

gantt.config.lightbox.milestone_sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "rollup", type: "checkbox", map_to: "rollup"},/*!*/
    {name: "hide_bar", type: "checkbox", map_to: "hide_bar"},
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", type: "duration", map_to: "auto"}
];

Zugehöriges Beispiel: Rollup task and milestones

Verbergen von Aufgaben und Meilensteinen

Ab Version 7.1 können Sie Aufgabenleisten und Meilensteine im Timeline-Bereich ausblenden, indem Sie die Eigenschaft hide_bar: true eines Datenelements setzen:

var data = {
    tasks:[
        {id:11, text:"Project #1", type:"project", progress: 0.6, open: true},
        {id:12, text:"Task #1", start_date:"03-04-2018", duration:"3",
            parent:"11", progress: 1},
        {id:13, text:"Task #2", start_date:"03-04-2018", type:"project", 
            parent:"11", progress: 0.5, open: true},
        {id:16, text:"Final milestone", start_date:"08-04-2018", type:"milestone",  /*!*/
            rollup: true, hide_bar: true, parent:"11", progress: 0},  /*!*/
        {id:17, text:"Task #2.1", start_date:"03-04-2018", duration:"2", 
            parent:"13", progress: 1},
        {id:18, text:"Task #2.2", start_date:"06-04-2018", duration:"1",   
            parent:"13", progress: 0.8}],  
    links:[]
};

Das Ergebnis sieht folgendermaßen aus:

Hinweis, dass, wenn sowohl die Eigenschaften hide_bar:true und rollup:true für das Datenelement festgelegt sind, das Element im Zeitstrahl ausgeblendet, aber im übergeordneten Projekt angezeigt wird.

Hinweis

Um alle Rollup-Elemente aus dem übergeordneten Projekt auszublenden, setzen Sie rollup:false im project-Objekt (ab Version 8.0):

{ id:11, text:"Project #1", type:"project", rollup:false, open: true }

Sie können das notwendige Aufgaben-/Meilenstein-Element im Timeline-Bereich ausblenden, indem Sie das Kontrollkästchen Hide bar im Lightbox umschalten:

gantt.config.lightbox.sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "rollup", type: "checkbox", map_to: "rollup"},
    {name: "hide_bar", type: "checkbox", map_to: "hide_bar"},  /*!*/
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", type: "duration", map_to: "auto"}
];

gantt.config.lightbox.milestone_sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "rollup", type: "checkbox", map_to: "rollup"},
    {name: "hide_bar", type: "checkbox", map_to: "hide_bar"},  /*!*/
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", type: "duration", map_to: "auto"}
];

gantt.config.lightbox.project_sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "hide_bar", type: "checkbox", map_to: "hide_bar"},  /*!*/
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", type: "duration", map_to: "auto"}
];

Zugehöriges Beispiel: Rollup tasks and milestones

API-Übersicht

Es gibt ein Ereignis, das verwendet werden kann, um die Sichtbarkeit von Rollup-Aufgaben auf ihren übergeordneten Projekten zu steuern:

• onBeforeRollupTaskDisplay

// bevor die Rollup-Aufgabe auf ihrem übergeordneten Projekt angezeigt wird 
gantt.attachEvent("onBeforeRollupTaskDisplay", function(taskId, task, parentId){
    // benutzerdefinierte Logik hier
    return false;
});

Styling separater Rollup-Elemente

Ab Version 8.0 gelangen Rollup-Elemente in Template-Funktionen mit der Eigenschaft task.$rendered_at, die die ID der Zeile enthält, in der das Rollup-Element gerendert wird. Um bestimmte Rollup-Elemente basierend auf der Zeile, in der sie angezeigt werden, zu gestalten, können Sie die task_class Vorlage verwenden:

gantt.templates.task_class = function(start, end, task) {
    if(task.$rendered_at) {
        if(gantt.calculateTaskLevel(gantt.getTask(task.$rendered_at)) === 1) {
            return "phase-level-rollup";
        }
    }
    return "";
};