Available only in PRO Edition

Вехи

Вехи — это задачи без длительности, используемые для обозначения ключевых дат, событий или целей в проекте. Они могут быть полезны для обозначения встреч по обзору или ожидаемого завершения этапов проекта.

Технически, веха является одним из предопределенных типов задач. Однако она работает так же, как и обычная задача, вызывая те же события и шаблоны.

Related sample:  Projects and milestones

Чтобы включить вехи в диаграмму, выполните следующие шаги:

1. Добавьте секцию в lightbox - Контрол Typeselect, позволяющую пользователям изменять типы задач и выбирать вехи.
   
   

   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"}
   ];

2. Настройте шаблон rightside_text или leftside_text для отображения метки для вех. Учтите, что метки из шаблона task_text не появятся, так как у вех нет длительности.
   
   

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

3. Переключите свойство order_branch, чтобы упростить работу пользователям. Это позволяет перетаскивать задачи внутри родительской ветви, позволяя пользователям создавать вехи в любом месте и затем перемещать их по мере необходимости.
   
   

   gantt.config.order_branch = true;

После выполнения этих шагов ваша диаграмма Ганта будет готова к работе с вехами.

Related sample:  Projects and milestones

Чтобы включить вехи в ваш набор данных, назначьте свойству type элемента данных значение 'milestone' (значения хранятся в объекте types):

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:[]
};

Начиная с версии 7.1, вы можете отображать задачи и вехи на их родительских проектах. Чтобы это включить, установите для свойства rollup элемента данных значение true:

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}],  
    links:[]
};

Вот как это выглядит:

Вы также можете переключать функцию свертывания, используя флажок Rollup в lightbox:

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"}
];

Related sample:  Rollup tasks and milestones

С версии 7.1 вы можете скрывать панели задач и вехи на временной шкале, установив hide_bar: true для элемента данных:

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:[]
};

Результат будет выглядеть так:

Примечание, если для элемента установлены оба свойства hide_bar:true и rollup:true, он будет скрыт на временной шкале, но виден на родительском проекте.

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

Вы также можете скрыть определенные задачи/вехи на временной шкале, используя флажок Hide bar в lightbox:

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"}
];

Related sample:  Rollup tasks and milestones

Вы можете управлять видимостью свернутых задач на родительских проектах с помощью этого события:

• onBeforeRollupTaskDisplay

// перед отображением свернутой задачи на ее родительском проекте 
gantt.attachEvent("onBeforeRollupTaskDisplay", function(taskId, task, parentId){
    // любая пользовательская логика здесь
    return false;
});

С версии 8.0 свернутые элементы включают свойство task.$rendered_at, которое указывает строку, где отображается свернутый элемент. Вы можете использовать шаблон task_class для стилизации свернутых элементов в зависимости от их строки:

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 "";
};