Примеры Форум Поддержка
Документация
СтартРуководстваНастройка Диаграммы Ганта

Макет Gantt

Начиная с версии 5.0, Gantt позволяет настраивать свой макет и организовывать элементы компонента как внутренние представления в этом макете. Это делает возможным включение дополнительных временных шкал и гридов, предлагая более гибкую структуру для вашей диаграммы Gantt и позволяя использовать различные стили расположения.

Например, вы можете добавить еще один грид справа от временной шкалы:

Related sample:  Grid columns rightside of gantt

Или вы можете включить дополнительный грид и временную шкалу под стандартными:

Related sample:  Gantt chart with resource panel

Стандартный макет

Вы можете определить макет, используя опцию конфигурации gantt.config.layout. Вот стандартная конфигурация макета:

gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
           cols: [
            {
              // стандартное представление грида    
              view: "grid",  
              scrollX:"scrollHor", 
              scrollY:"scrollVer"
            },
            { resizer: true, width: 1 },
            {
              // стандартное представление временной шкалы
              view: "timeline", 
              scrollX:"scrollHor", 
              scrollY:"scrollVer"
            },
            {
              view: "scrollbar", 
              id:"scrollVer"
            }
        ]},
        {
            view: "scrollbar", 
            id:"scrollHor"
        }
    ]
}

Макет Gantt состоит из ячеек, которые заполняются представлениями. Основные и вспомогательные элементы Gantt представлены как представления, такие как:

  • grid: Представляет грид секцию диаграммы Gantt. Основной грид для задач имеет id:"grid".
  • timeline: Представляет временную шкалу диаграммы Gantt. Основная временная шкала для задач имеет id:"timeline".
  • resizer: Добавляет линию изменения размера. Чтобы активировать, установите resizer в true. (Только версия PRO)
  • scrollbar: Добавляет полосы прокрутки к диаграмме Gantt. Представления гридов и временных шкал можно связать с определенными полосами прокрутки. Подробнее ниже.
  • resourceGrid: Предварительно настроенный грид для панели ресурсов. (Только версия PRO) Подробнее здесь.
  • resourceTimeline: Предварительно настроенная временная шкала для панели ресурсов. (Только версия PRO) Подробнее здесь.

Каждое представление настраивается с помощью объекта с определенными свойствами. Вы можете настроить конфигурацию для представлений grid и timeline. По умолчанию параметры берутся из глобального объекта gantt.config.

Убедитесь, что вы определили конфигурацию макета до инициализации Gantt. Если вы измените макет, обновите его с помощью resetLayout.

Полоса прокрутки

Полосы прокрутки в макете определяются представлением "scrollbar". Можно добавить как горизонтальные, так и вертикальные полосы прокрутки.

Чтобы связать полосу прокрутки с представлением, используйте свойства scrollX или scrollY с ID полосы прокрутки.

Полоса прокрутки для представления

Вы можете связать несколько представлений с одной и той же полосой прокрутки. Чтобы связать полосу прокрутки с представлением:

  • Добавьте полосу прокрутки с нужным направлением прокрутки и назначьте ей ID.
  • Используйте ID полосы прокрутки в свойстве scrollX/scrollY в конфигурации представления.

Добавление полосы прокрутки в массив cols создает вертикальную полосу прокрутки, а добавление в массив rows создает горизонтальную полосу прокрутки. Альтернативно, вы можете указать направление прокрутки явно, используя свойство scroll:

{ view: "scrollbar", id:"scroller", scroll: "x" } // горизонтальная

или:

{ view: "scrollbar", id:"scroller", scroll: "y" } // вертикальная

Вот пример связывания пользовательских представлений грида и временной шкалы с вертикальной полосой прокрутки:

gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
           cols: [
            {             
              view: "grid", 
              scrollY:"scrollVer"
            },
            { resizer: true, width: 1 },
            {
              view: "timeline", 
              scrollY:"scrollVer"
            },
            {
              view: "scrollbar", 
              id:"scrollVer"
            }
        ]}
    ]
}

В этой настройке прокрутка вертикальной полосы прокрутки перемещает как грид, так и временную шкалу вместе. По умолчанию грид и временная шкала связаны как с горизонтальными, так и с вертикальными полосами прокрутки.

Вы также можете добавить отдельную горизонтальную полосу прокрутки для представления Grid. Подробнее об этом.

Полосы прокрутки для представления

В предыдущем разделе объяснялось, как добавить конкретную полосу прокрутки к представлению, используя простую конфигурацию макета, например:

{cols: [ {rows: [{}, {}]}, {rows: [{}, {}]}]}

или

{rows: [ {cols: [{}, {}]}, {cols: [{}, {}]}]}

Если вам нужно подключить представление к обеим вертикальной и горизонтальной полосам прокрутки, вы можете создать более сложную конфигурацию макета, многократно вложив массивы cols и rows, как это:

{cols: [ 
    {
        rows: [
            {
                cols: [{}, {}]
            }, 
            {
                cols: [{}, {}]
            }
        ]
    }, 
    {
        rows: [
            {
                cols: [{}, {}]
            }, 
            {
                cols: [
                    {
                        rows: [{}, {}]
                    }, 
                    {   
                        rows: [{}, {}]
                    }
                ]
            }
        ]
    }
]}

Посмотрите эти примеры:

Настройка макета

Стандартная конфигурация макета может быть изменена для создания пользовательского расположения элементов диаграммы Gantt на странице с использованием дополнительных представлений макета.

Например, вы можете добавить дополнительные представления грида и временной шкалы, чтобы сформировать нижнюю панель ресурсов для основной диаграммы Gantt. Вот как вы можете настроить такой макет:

  • Создайте многострочный макет.
  • Добавьте стандартный грид и временную шкалу в первую строку.
  • Добавьте дополнительные представления грида и временной шкалы в следующую строку и свяжите их с пользовательским источником данных.
  • Разместите разделитель между этими строками.
  • Добавьте полосу прокрутки в последнюю строку, связывая ее как со стандартными, так и с ресурсными временными шкалами.
gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
          // стандартный макет
          cols: [
            {view: "grid",
                config: mainGridConfig, scrollY:"scrollVer"},
            {resizer: true, width: 1},
            {view: "timeline", 
                scrollX:"scrollHor", scrollY:"scrollVer"},
            {view: "scrollbar", id:"scrollVer"}
          ]
        },
        {resizer: true, width: 1},
        {
          // пользовательский макет
          cols: [
            {view: "grid", id: "resourceGrid", bind:"resource", 
                config:resourceGridConfig, scrollY:"resourceVScroll"},
            {resizer: true, width: 1},
            {view:"timeline", id:"resourceTimeline", scrollX:"scrollHor", 
                bind:"resource", bindLinks: null, layers: resourceLayers, 
                scrollY:"resourceVScroll"},
            {view: "scrollbar", id:"resourceVScroll"}
          ]
        },
        {view: "scrollbar", id:"scrollHor"}
    ]
};

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

Свойства пользовательского грида и временной шкалы

Пользовательские представления грида и временной шкалы имеют дополнительные свойства:

Для представлений грида и временной шкалы

  • bind - (string): Указывает ID хранилища данных для извлечения данных ("resource" в примере).

Для представления временной шкалы

  • bindLinks - (string): Указывает источник ссылок или null, если связанных ссылок нет.
  • layers - (array): Опция конфигурации, использующая функции addLayer() для определения стиля данных.

Добавление хранилища данных для пользовательских представлений

Чтобы заполнить пользовательские представления правильными данными, вам нужно настроить специальное хранилище данных. Вы можете создать новое хранилище данных, используя метод gantt.createDatastore, и определить его конфигурацию следующим образом:

var resourcesStore = gantt.createDatastore({
    name: "resource",
    initItem: function(item) {
        item.id = item.key || gantt.uid();
        return item;
    }
});

В этом примере создается хранилище данных с именем "resource".

Чтобы загрузить данные в пользовательские представления из хранилища данных, вы можете использовать метод gantt.parse:

resourcesStore.parse([
    {key: '0', label: "N/A"},
    {key: '1', label: "John"},
    {key: '2', label: "Mike"},
    {key: '3', label: "Anna"}
]);

Если вам нужно получить объект конфигурации конкретного хранилища данных, метод gantt.getDatastore может помочь:

var tasksStore = gantt.getDatastore("task");

Этот метод принимает имя хранилища данных в качестве своего параметра.

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

Отключение/включение разделителей динамически

Иногда вы можете захотеть отключить разделители между ячейками Gantt на лету. Простой способ сделать это — скрыть их с помощью CSS.

Вот CSS-правило, которое вы можете использовать:

.no_resizers .gantt_resizer {
    display: none;
}

Чтобы скрыть разделители, просто добавьте этот класс в контейнер Gantt:

gantt.$container.classList.add("no_resizers");

Если вы хотите снова показать разделители, просто удалите класс:

gantt.$container.classList.remove("no_resizers");

HTML как внутреннее представление

Вы также можете включить пользовательский HTML как часть макета Gantt. Вот пример:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
                {html: "<div class='custom-content'>custom content</div>", css: "custom-content", width: 50},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {html: "<div class='custom-content'>custom content</div>", css: "custom-content", width: 50},
                {view: "scrollbar", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", scroll: "x", id: "scrollHor"}
    ]
};

Необходимые представления и настройки

API Gantt включает методы, такие как gantt.getTaskPosition, gantt.getTaskNode и gantt.getScrollState, которые зависят от определенных представлений макета. Чтобы эти методы работали правильно, макет должен включать стандартный грид, временную шкалу и полосы прокрутки с правильно назначенными ID.

Вот как вы можете настроить необходимые представления:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Необходимые представления и их ID:

  • view: "grid", id: "grid"
  • view: "timeline", id: "timeline"
  • view: "scrollbar", id: "scrollHor"
  • view: "scrollbar", id: "scrollVer"

Если ID не указан, Gantt либо использует имя представления в качестве стандартного ID, либо генерирует уникальный. Для стандартного грида и временной шкалы параметр "id" можно опустить:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Дополнительные представления можно добавлять по мере необходимости.

Конфигурации и шаблоны представлений

Представления Grid и Timeline используют шаблоны и конфигурации из глобальных gantt.config и gantt.templates. Однако вы можете переопределить эти настройки для конкретных представлений на уровне макета.

Например:

var secondGridColumns = {
    columns: [
        {
            name: "status", label: "Status", width: 60, align: "center",
            template: function (task) {
                var progress = task.progress || 0;
                return Math.floor(progress * 100) + "";
            }
        },
        {
            name: "impact", width: 80, label: "Impact", template: function (task) {
                return (task.duration * 1000).toLocaleString("en-US", {
                    style: 'currency', currency: 'USD'
                });
            }
        }
    ]
};
 
gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", id: "grid", width: 320, scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "grid", width: 120, bind: "task", scrollY: "scrollVer", config: secondGridColumns},
                {view: "scrollbar", scroll: "y", id: "scrollVer"}
            ]
        },
        {view: "scrollbar", id: "scrollHor", height: 20}
    ]
};

Представления также могут наследовать конфигурации и шаблоны от родительского макета:

var resourceConfig = {    
    scale_height: 30      
};                        
 
gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", group: "grids", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer", group: "vertical"}
            ],
            gravity: 2
        },
        {resizer: true, width: 1},
        {
            config: resourceConfig,
            cols: [
                {view: "resourceGrid", group: "grids", width: 435, scrollY: "resourceVScroll"},
                {resizer: true, width: 1},
                {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
                {view: "scrollbar", id: "resourceVScroll", group: "vertical"}
            ],
            gravity: 1
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Для получения более подробной информации обратитесь к статье Управление ресурсами.

Группы видимости

Иногда вы можете захотеть синхронизировать видимость определенных элементов макета. Например, если в соседних ячейках есть горизонтальные полосы прокрутки, вы можете захотеть, чтобы они появлялись или исчезали вместе.

Related sample:  Horizontal scroll inside Grid

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

Related sample:  Resource load diagram

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

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

Вот пример синхронизации видимости полос прокрутки:

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            width: 400,
            minWidth: 200,
            maxWidth: 600,
            rows: [
                {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
                {view: "scrollbar", id: "gridScroll", group: "horizontal"}
            ]
        },
        {resizer: true, width: 1},
        {
            rows: [
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollHor", group: "horizontal"}
            ]
        },
        {view: "scrollbar", id: "scrollVer"}
    ]
};

Чтобы синхронизировать ширину гридов:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", group: "grids", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollVer", group: "vertical"}
            ],
            gravity: 2
        },
        {resizer: true, width: 1},
        {
            config: resourceConfig,
            cols: [
                {view: "resourceGrid", group: "grids", width: 435, scrollY: "resourceVScroll"},
                {resizer: true, width: 1},
                {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
                {view: "scrollbar", id: "resourceVScroll", group: "vertical"}
            ],
            gravity: 1
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

Размеры частей макета Gantt

Вы можете контролировать относительные размеры ячеек макета Gantt, используя свойство gravity. Это свойство устанавливает размер ячеек пропорционально друг другу.

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                // конфигурация колонок
            ],
            gravity: 2
        },
        {resizer: true, width: 1},
        {
            config: resourceConfig,
            cols: [
                // конфигурация колонок
            ],
            gravity: 1
        },
        {view: "scrollbar", id: "scrollHor"}
    ]
};

В этом примере диаграмма Gantt и диаграмма ресурсов имеют размерное соотношение 2:1, что означает, что диаграмма Gantt занимает 66% пространства, а диаграмма ресурсов — 33%. Для равного разделения используйте соотношение 1:1.

Минимальная/максимальная ширина ячейки

Чтобы ограничить ширину части макета при изменении размера, вы можете использовать свойства minWidth и maxWidth:

gantt.config.grid_elastic_columns = true;
 
gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            width: 400,
            minWidth: 200,
            maxWidth: 600,
            rows: [
                {view: "grid", scrollable: true, scrollX: "scrollHor1", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollHor1", scroll: 'x', group: 'hor'}
            ]
        },
        {resizer: true, width: 1},
        {
            rows: [
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {view: "scrollbar", id: "scrollHor", scroll: 'x', group: 'hor'}
            ]
        },
        {view: "scrollbar", id: "scrollVer"}
    ]
};

Скрытие представлений родительского макета

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

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            hide_empty: true,
            rows: [
                {view: "grid"}
            ]
        },
        {resizer: true},
        {
            hide_empty: true,
            rows: [
                {view: "timeline"}
            ]
        }
    ]
};

Related sample:  Скрытие представлений grid/timeline

Переключение между представлениями

Если вам нужно переключаться между различными представлениями макета, вы можете найти больше деталей в разделах Как переключать grid/diagram и Как переключать представление ресурсов.

Фиксация колонок в представлении грид

Чтобы зафиксировать одну или несколько колонок в диаграмме Gantt, следуйте инструкциям, предоставленным в разделе Как зафиксировать/исправить колонки в гриде.

К началу