Окраска и стилизация ссылок

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

Для настройки стилей ссылок у вас есть два основных варианта:

1. Переопределение шаблона ссылки по умолчанию
2. Установка значений стиля непосредственно в свойствах объекта ссылки

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

Структура DOM элемента ссылки

Структура DOM для ссылки состоит из следующих элементов:

• .gantt_task_link - имеет статическое позиционирование и не имеет размера
  • .gantt_line_wrapper/gantt_link_arrow/gantt_link_corner - использует абсолютное позиционирование
    • .gantt_link_line_down(/up/right/left) - позиционируется статически внутри обертки

Вот как выглядит структура DOM:

<div class="gantt_task_link" link_id="3">
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_left"></div>
    </div>
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_left"></div>
    </div>
    <div class="gantt_link_corner gantt_link_corner_left_down"></div>
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_down"></div>
    </div>
    <div class="gantt_link_corner gantt_link_corner_down_right"></div>
    <div class="gantt_line_wrapper">
        <div class="gantt_link_line_right"></div>
    </div>
    <div class="gantt_link_arrow gantt_link_arrow_right"></div>
</div>

Детали каждого элемента:

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

.gantt_task_link{
   --dhx-gantt-link-background:red;
}

Классы из шаблона ссылки также могут быть применены здесь.

Критические ссылки

Чтобы стилизовать критические ссылки, класс gantt_critical_link добавляется к элементу gantt_task_link.

• gantt_line_wrapper - Этот элемент управляет размером и позицией ссылки. Он прозрачный, имеет абсолютное позиционирование и немного больше самой линии, чтобы его было легче выделить мышью.

Вы можете настроить ширину этого элемента с помощью конфигурационного свойства link wrapper width:

gantt.config.link_wrapper_width = 30;

• gantt_link_arrow - Представляет стрелку ссылки. Ее позиция абсолютна, а направление определяется дополнительным классом, например:
  • gantt_link_arrow_right
  • gantt_link_arrow_left
  • gantt_link_arrow_up
  • gantt_link_arrow_down

В настоящее время используются только gantt_link_arrow_right и gantt_link_arrow_down.

Размер этого элемента контролируется конфигурационным свойством link arrow size:

gantt.config.link_arrow_size = 8;

• gantt_link_line_<%dir%> - Это видимая часть ссылки. Замените dir на left, right, up или down.

Ширина этого элемента может быть изменена с помощью конфигурационного свойства link line width:

gantt.config.link_line_width = 3;

• gantt_link_corner - Представляет закругленный угол линии ссылки. Радиус определяется конфигурационным свойством link radius:

gantt.config.link_radius = 2;

Установка gantt.config.link_radius = 1 полностью убирает закругленные углы.

Переопределение шаблона ссылки

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

Окраска ссылок в зависимости от типа зависимости

gantt.templates.link_class = function(link){
    var types = gantt.config.links;
    switch (link.type){
        case types.finish_to_start:
            return "finish_to_start";
            break;
        case types.start_to_start:
            return "start_to_start";
            break;
        case types.finish_to_finish:
            return "finish_to_finish";
            break;
        case types.start_to_finish:
            return "start_to_finish";
            break;
    }
};

Related sample:  Link styles

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

Указание цвета в свойстве объекта ссылки

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

• color - Определяет цвет ссылки

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

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

Related sample:  Link colors from the "color" property

Чтобы сделать ссылки критическими, вы можете использовать этот CSS:

.gantt_critical_link {
  --dhx-gantt-link-background: #e63030 !important;
}

Related sample:  Coloring critical tasks and links

Если у объекта ссылки есть хотя бы одно назначенное свойство, он получает дополнительный класс "gantt_link_inline_color", который можно использовать для переопределения других стилей:

.gantt_link_inline_color {
    opacity:0.4
}

Свойство color принимает любой допустимый формат цвета CSS, такой как:

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

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

К началу