Available only in PRO Edition

Несколько диаграмм на странице

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

Конфигурация экземпляра Gantt

Чтобы настроить новый экземпляр Gantt, используйте метод Gantt.getGanttInstance():

// Примечание: "Gantt" в названии метода начинается с заглавной буквы
const ganttChart = Gantt.getGanttInstance();

Этот метод позволяет передать объект конфигурации в качестве необязательного параметра:

const gantt = Gantt.getGanttInstance({
    plugins: {
        auto_scheduling: true,
    },
    container: "gantt_here",
    config: {
        work_time: true,
        duration_unit: "minute",
        auto_scheduling_compatibility: true,
        auto_scheduling: true,
        auto_scheduling_strict: true,
        auto_scheduling_initial: true,
        start_date: new Date(2020, 0, 1),
        end_date: new Date(2021, 0, 1),
    },
    calendars: [
        {
            id: "global",
            worktime: {
                hours: ["8:00-17:00"],
                days: [0, 1, 1, 1, 1, 0, 0],
                customWeeks: {
                    lastMonthOfYear: {
                        from: new Date(2020, 11, 1), // 1 декабря 2020 года
                        to: new Date(2021, 0, 1),   // 1 января 00:00, 2021 года
                        hours: ["9:00-13:00"],
                        days: [0, 1, 1, 1, 1, 1, 0]
                    },
                    firstMonthOfNextYear: {
                        from: new Date(2021, 0, 1), // 1 января 2021 года
                        to: new Date(2021, 1, 1),   // 1 февраля 00:00, 2021 года
                        hours: ["14:00-16:00"],
                        days: [1, 1, 1, 1, 1, 0, 1]
                    }
                }
            }
        }
    ],
    data: {
        tasks: [
            { id: 11, text: "Проект #1", type: "project", open: true, parent: 0 },
            { id: 1, start_date: "05-04-2020", text: "1", duration: 1, parent: "11", type: "task" },
            { id: 2, start_date: "05-04-2020", text: "2", duration: 3, parent: "11", type: "task" },
            { id: 3, start_date: "05-04-2020", text: "3", duration: 3, parent: "11", type: "task" },
            { id: 4, start_date: "05-04-2020", text: "4", duration: 3, parent: "11", type: "task" },
            { id: 5, start_date: "05-04-2020", text: "5", duration: 1, parent: "11", type: "task" }
        ],
        links: [
            { source: "1", target: "2", type: "0", id: 1 },
            { source: "1", target: "3", type: "0", id: 2 },
            { source: "1", target: "4", type: "0", id: 3 },
            { source: "2", target: "4", type: "0", id: 4 },
            { source: "3", target: "4", type: "0", id: 5 },
            { source: "4", target: "5", type: "0", id: 6 }
        ]
    }
});

Этот код инициализирует диаграмму Gantt с заданной конфигурацией.

Объект конфигурации может включать следующие свойства:

• container - (string|HTMLElement) Указывает HTML контейнер (или его id), в котором должна появиться диаграмма Gantt. Если не задано, Gantt инициализируется без контейнера.
• config - (object) Содержит настройки конфигурации диаграммы Gantt.
• calendars - (array) Список календарей рабочего времени, которые будут загружены в Gantt. Эти календари должны соответствовать формату, поддерживаемому методом gantt.addCalendar.
• templates - (object) Содержит шаблоны для диаграммы Gantt.
• events - (object) Определяет обработчики событий в этом формате:

const gantt = Gantt.getGanttInstance({
     events: {
          onTaskCreated: function(task) {
               task.owner = null;
               return true;
          },
          onTaskClick: function(id) {
               alert(gantt.getTask(id).text);
               return true;
          }
     }
})

• data - (object|string) Указывает данные для загрузки или URL для их получения.
• plugins - (object) Список расширений, которые нужно активировать.
• locale - (string|object) Двухбуквенный код языка или объект локали для активации.

Если вы вызываете Gantt.getGanttInstance() без параметров, он создает объект Gantt с настройками по умолчанию. Вам нужно будет настроить, инициализировать и заполнить его данными впоследствии.

Вот пример отображения двух диаграмм Gantt, одна под другой:

window.addEventListener("DOMContentLoaded", function() {
    var gantt1 = Gantt.getGanttInstance();
    gantt1.init("gantt_here");
    gantt1.parse(tasksA);
 
    var gantt2 = Gantt.getGanttInstance();
    gantt2.init("gantt_here_2");
    gantt2.parse(tasksB);
});
 
<body>
<div id="gantt_here" style="width:100%; height: 50%;"></div>
<div id="gantt_here_2" style="width:100%; height: 50%;"></div>
</body>

Интеграция с dhtmlxLayout

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

Чтобы подключить экземпляр dhtmlxGantt к ячейке макета, используйте метод attachGantt().

Учтите, что прикрепление диаграммы Gantt к ячейке макета автоматически инициализирует ее. Настройте экземпляр Gantt перед размещением в макете.

function init() {
    var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
 
    gantt1 = Gantt.getGanttInstance();
    gantt1.config.min_column_width = 50;
    gantt1.config.scale_height = 90;
    dhxLayout.cells("a").attachGantt(null, null, gantt1);     gantt1.parse(tasksA);
 
    gantt2 = Gantt.getGanttInstance();
    gantt2.config.date_grid = "%Y-%m-%d %H:%i";
    gantt2.config.xml_date = "%Y-%m-%d %H:%i:%s";
    dhxLayout.cells("b").attachGantt(null, null, gantt2);     gantt2.parse(tasksB);
}

Деструктор экземпляров Gantt и DataProcessor

Начиная с версии 5.1, объект dhtmlxGantt включает метод деструктора для удаления ненужных экземпляров Gantt.

Вот как использовать деструктор:

var gantt = Gantt.getGanttInstance();
gantt.destructor();

Деструктор выполняет следующие действия:

• Очищает данные в экземпляре Gantt.
• Удаляет прикрепленный dataProcessor (если есть).
• Отсоединяет экземпляр Gantt от DOM.
• Отменяет привязку всех событий DOM, прикрепленных с помощью метода gantt.event().

Деструктор не удаляет хранилища данных, созданные с помощью gantt.createDatastore(). Вам нужно будет удалить их вручную:

// Создание хранилища данных
var resourcesStore = gantt.createDatastore({
    name: "resource",
    initItem: function(item) {
        item.id = item.key || gantt.uid();
        return item;
    }
});
 
// Удаление хранилища данных позже
resourcesStore.destructor();

Использование деструктора с Angular

Вот пример для Angular для удаления экземпляра Gantt:

@Component({selector: 'app-gantt', template: `...`})
class MyGanttComponent implements OnDestroy {
  ngOnInit() {
     this.$gantt = Gantt.getGanttInstance();
 
     // Настройка и инициализация
  }
 
  ngOnDestroy() {
     this.$gantt.destructor();
     this.$gantt = null;
  }
}

Отсоединение DataProcessor

Чтобы очистить экземпляр dataProcessor и отсоединить его от Gantt, вызовите его деструктор:

var gantt = Gantt.getGanttInstance();
var dp = new gantt.dataProcessor("url");
dp.init(gantt);
 
// Уничтожает dataProcessor и отсоединяет его
dp.destructor();

К началу