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

Выделение задач цветами может помочь привлечь внимание к определенным из них.

У вас есть несколько вариантов настройки стилей задач:

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

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

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

<style>
    /* высокий приоритет */
    .gantt_task_line.high {
        --dhx-gantt-task-background: #d96c49;
        --dhx-gantt-task-color: #fff;
    }
 
    /* средний приоритет */
    .gantt_task_line.medium {
        --dhx-gantt-task-background: #f57730;
        --dhx-gantt-task-color: #fff;
    }
 
    /* низкий приоритет */
    .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";
        case "2":
            return "medium";
        case "3":
            return "low";
    }
};

Related sample: Task styles

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

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

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

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

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

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

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

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, он применяется как встроенный стиль, который имеет приоритет над другими стилями. Это может предотвратить выделение критического пути или других пользовательских стилей.

Чтобы задачи выглядели критическими, вы можете использовать следующий 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"}
]

Вот как можно обработать такие случаи:

Создайте именованный serverList для коллекции:

gantt.serverList("people");

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

gantt.attachEvent("onLoadEnd", function(){
    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");
 
    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("");
});

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

Наконец, назначьте сгенерированные классы, используя шаблоны задач:

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

К началу