Окрашивание задач

Окрашивание задач помогает выделить определённые задачи, что облегчает привлечение к ним внимания.

Существует несколько способов кастомизации стиля задач:

Переопределение шаблона задачи

Для изменения стиля задачи с помощью шаблона используется шаблон task_class. Например, чтобы окрасить задачи в зависимости от их приоритета, можно использовать следующий код:

Окрашивание задач в зависимости от их приоритета

<style>
 
    /* high */
    .gantt_task_line.high {
        --dhx-gantt-task-background: #d96c49;
        --dhx-gantt-task-color: #fff;
    }
 
    /* medium */
    .gantt_task_line.medium {
        --dhx-gantt-task-background: #f57730;
        --dhx-gantt-task-color: #fff;
    }
 
    /* low */
    .gantt_task_line.low {
        --dhx-gantt-task-background: #fff;
        --dhx-gantt-task-color: #fff;
    }
 
</style>

gantt.templates.task_class  = function(start, end, task){
    switch (task.priority){
        case "1":
            return "high";
            break;
        case "2":
            return "medium";
            break;
        case "3":
            return "low";
            break;
    }
};

Related sample: Task styles

Для стилизации других частей задач ознакомьтесь с шаблонами, перечисленными в статье Шаблоны области временной шкалы.

Похожий способ можно использовать и для связей. Подробнее см. здесь.

Указание стиля в свойствах объекта задачи

Вы можете настроить внешний вид задачи, добавив до трёх специальных свойств в объект данных задачи:

color — задаёт цвет фона полосы задачи
textColor — задаёт цвет текста внутри полосы задачи (не влияет на задачи типа "milestone")
progressColor — задаёт цвет полосы прогресса (по умолчанию полоса прогресса — немного более тёмный оттенок цвета задачи, оформленный как 'background-color: rgb(54, 54, 54); opacity: 0.2')

Эти свойства обрабатываются особым образом. Gantt автоматически применяет их значения, если они присутствуют у задачи; в противном случае используются стандартные цвета.

Указание цвета задачи в объекте данных

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

Когда вы добавляете пользовательский цвет с помощью свойства color, применяется inline-стиль, который перекрывает другие стили. Это значит, что выделение критического пути и любые другие пользовательские стили фона или цвета текста применяться не будут.

Чтобы выделить задачи как критические, можно использовать следующий CSS:

.gantt_critical_task {
  --dhx-gantt-task-background: #e63030 !important;
}

Если одно из этих свойств задано у задачи, задача получает дополнительный класс "gantt_task_inline_color".
Этот класс можно использовать для переопределения других стилей, например с помощью селектора ".gantt_task_line.gantt_task_inline_color":

.gantt_task_line.gantt_task_inline_color .gantt_task_progress {
    background-color: rgb(54, 54, 54);
    opacity: 0.2;
}

Эти свойства принимают любые корректные значения цвета CSS, например:

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

Аналогичный подход можно применять и к связям. Подробнее см. здесь.

Загрузка цветов вместе с данными

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

Предположим, у вас есть список пользователей, которых можно назначать на задачи, и у каждого пользователя свои цвета:

[
    {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"},
    {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"},
    {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"},
    {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"},
    {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"}
]

В этом случае пользователи и их цвета управляются отдельно, и Gantt заранее не знает их идентификаторов или цветов.

Вот как можно это реализовать:

Определите именованный serverList для этой коллекции:

gantt.serverList("people");

Загрузите опции на страницу, либо используя формат данных Gantt, либо с помощью кастомного XHR-запроса.
После загрузки опций сгенерируйте CSS-стили на основе данных:

gantt.attachEvent("onLoadEnd", function(){
    // используйте произвольный id для элемента стилей
    var styleId = "dynamicGanttStyles";
 
    // если опции с цветами перезагружаются, используйте уже существующий элемент стилей
 
    var element = document.getElementById(styleId);
    if(!element){
        element = document.createElement("style");
        element.id = styleId;
        document.querySelector("head").appendChild(element);
    }
    var html = [];
    var resources = gantt.serverList("people");
 
    // создайте CSS-стили для каждой опции и вставьте их в style-элемент
 
    resources.forEach(function(r){
        if(r.backgroundColor && r.textColor){
            html.push(".gantt_task_line.gantt_resource_" + r.key + "{" +
                "--dhx-gantt-task-background:"+r.backgroundColor+"; " +
                "--dhx-gantt-task-color:"+r.textColor+"; " +
            "}");
 
        }
    });
    element.innerHTML = html.join("");
});

Если вы используете ресурсное хранилище данных, используйте r.id вместо r.key для идентификатора ресурса.

После этого вы можете назначить сгенерированные классы задачам через шаблон task_class:

gantt.templates.task_class = function (start, end, task) {
    var css = [];
 
    if(task.owner_id){
        css.push("gantt_resource_" + task.owner_id);
    }
 
    return css.join(" ");
};

К началу