dhtmlxGantt включает удобный встроенный модуль для управления зумированием временной шкалы. Если вы хотите настроить поведение зумирования по умолчанию, доступен гибкий API, который позволяет динамически изменять настройки временной шкалы.
Модуль зумирования является частью расширения gantt.ext.zoom. Чтобы активировать его, вызовите gantt.ext.zoom.init(zoomConfig) и предоставьте объект zoomConfig с массивом уровней зумирования. Вот пример:
var zoomConfig = {
levels: [
{
name:"day",
scale_height: 27,
min_column_width:80,
scales:[
{unit: "day", step: 1, format: "%d %M"}
]
},
{
name:"week",
scale_height: 50,
min_column_width:50,
scales:[
{unit: "week", step: 1, format: function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(date, 6, "day");
var weekNum = gantt.date.date_to_str("%W")(date);
return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
}},
{unit: "day", step: 1, format: "%j %D"}
]
},
{
name:"month",
scale_height: 50,
min_column_width:120,
scales:[
{unit: "month", format: "%F, %Y"},
{unit: "week", format: "Week #%W"}
]
},
{
name:"quarter",
height: 50,
min_column_width:90,
scales:[
{unit: "month", step: 1, format: "%M"},
{
unit: "quarter", step: 1, format: function (date) {
var dateToStr = gantt.date.date_to_str("%M");
var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
}
}
]},
{
name:"year",
scale_height: 50,
min_column_width: 30,
scales:[
{unit: "year", step: 1, format: "%Y"}
]}
]
};
gantt.ext.zoom.init(zoomConfig);
Более подробная информация о модуле зумирования и его API доступна в статье Zoom Extension.
Related sample: Mouse wheel zoom
Если вы предпочитаете не использовать модуль зумирования и хотите управлять настройками шкалы самостоятельно, вы можете сделать это с помощью соответствующих параметров конфигурации.
По сути, добавление функции зумирования включает настройку нескольких пресетов временной шкалы (уровней зумирования) и предоставление пользователям возможности переключаться между ними.
Вот настройки, которые вам понадобятся для настройки временной шкалы:
gantt.config.scales - позволяет определить несколько строк для временной шкалы.
gantt.config.min_column_width, gantt.config.scale_height - управляют шириной колонок и общей высотой временной шкалы.
Ниже приведен пример создания некоторых пресетов:
/* global gantt */
function setScaleConfig(level) {
switch (level) {
case "day":
gantt.config.scales = [
{unit: "day", step: 1, format: "%d %M"}
];
gantt.config.scale_height = 27;
break;
case "week":
var weekScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.scales = [
{unit: "week", step: 1, format: weekScaleTemplate},
{unit: "day", step: 1, format: "%D"}
];
gantt.config.scale_height = 50;
break;
case "month":
gantt.config.scales = [
{unit: "month", step: 1, format: "%F, %Y"},
{unit: "day", step: 1, format: "%j, %D"}
];
gantt.config.scale_height = 50;
break;
case "year":
gantt.config.scales = [
{unit: "year", step: 1, format: "%Y"},
{unit: "month", step: 1, format: "%M"}
];
gantt.config.scale_height = 90;
break;
}
}
Эта функция настраивает объект gantt на одну из четырех предопределенных конфигураций, охватывающих шкалы от "дня" до "года". После изменения конфигурации необходимо полностью перерисовать Gantt, чтобы применить обновления:
setScaleConfig("year");
gantt.init("gantt_here");
Вы также можете создать простой интерфейс, чтобы пользователи могли выбрать уровень зумирования:
<label><input type="radio" name="scale" value="day" checked/>Дневная шкала</label>
<label><input type="radio" name="scale" value="week"/>Недельная шкала</label>
<label><input type="radio" name="scale" value="month"/>Месячная шкала</label>
<label><input type="radio" name="scale" value="year"/>Годовая шкала</label>
var els = document.querySelectorAll("input[name='scale']");
for (var i = 0; i < els.length; i++) {
els[i].onclick = function(e){
var el = e.target;
var value = el.value;
setScaleConfig(value);
gantt.render();
};
}
Related sample: Dynamic scales
К началу