dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。

本文將為大家揭示DHTMLX Gantt自定義的典型用例，包括自定義任務(wù)、網(wǎng)格的新外觀等，來展示其功能的強(qiáng)大性！

用例 - 新建項(xiàng)目外觀、當(dāng)前月份標(biāo)記和可折疊網(wǎng)格

DHTMLX Gantt的默認(rèn)視圖顯示寫在條形內(nèi)的項(xiàng)目和任務(wù)名稱中，項(xiàng)目欄通常具有矩形形狀，就像任務(wù)欄一樣，并且在顏色上與任務(wù)不同。然而這并不是在DHTMLX Gantt中顯示項(xiàng)目和任務(wù)的唯一方法，我們的甘特圖庫(kù)在定制方面非常靈活，并允許多種方式可視化數(shù)據(jù)。

在這里您可以看到項(xiàng)目用彩色且細(xì)的線條和標(biāo)簽很好地描述在頂部，項(xiàng)目日期和持續(xù)時(shí)間標(biāo)記在項(xiàng)目名稱旁邊。因此，最終用戶可以很快地掌握每個(gè)項(xiàng)目將花費(fèi)多少時(shí)間。

任務(wù)標(biāo)簽也位于任務(wù)欄的右側(cè)，當(dāng)前月份在時(shí)間標(biāo)度上清晰地突出顯示，以免在時(shí)間軸上丟失。此外，還有一個(gè)切換按鈕，用于折疊網(wǎng)格部分，以便為甘特圖騰出更多空間。

這樣的自定義有助于工作流的透明性，對(duì)于中小型項(xiàng)目尤其有用。它還使您的甘特圖更加用戶友好，更容易管理，在視圖與擴(kuò)展的網(wǎng)格部分和全屏圖表之間切換。

自定義指南

讓我們深入研究一下DHTMLX制作的甘特圖。

當(dāng)前月份標(biāo)記

我們從甘特圖時(shí)間軸中使用的時(shí)間尺度和垂直標(biāo)記開始，scales的配置通過scales屬性指定：

gantt.config.scales = [
{
unit: "quarter", step: 1, format: function (date) {
const quarter = (date.getMonth() % 3) + 1;
const year = date.getFullYear();
return `<b>Q${quarter}</b> ${year}`;
}
},
{
unit: "month", step: 1, format: function (date) {
const monthName = gantt.date.date_to_str("%F")(date)
const nextDate = gantt.date.add(date, 1, "month");
if (+date <= +today && +today <= +nextDate) {
return `<div class="current_month">${monthName}</div>`;
}
else {
return monthName;
}
}
},
]

在scales配置的數(shù)組中，我們指定了兩種內(nèi)置的scale類型，“quarter”和“month”。在這兩種比例類型的單元格中，可以顯示任何值或HTML元素，但它們不會(huì)改變單元格的寬度。例如，較低刻度中的一個(gè)單元格包含一個(gè)自定義元素，該元素帶有一個(gè)特定的類，用于用CSS樣式為該單元格著色。該元素突出顯示當(dāng)前月份，在today參數(shù)中指定：

const today = new Date(2023, 05, 18)
const todayMarker = gantt.addMarker({
start_date: today,
css: "today",
});

addMarker()方法中還使用today參數(shù)來添加一個(gè)突出顯示當(dāng)前月份的垂直標(biāo)記。在標(biāo)記配置中，我們指定用于設(shè)置標(biāo)記日期的Date對(duì)象和用于添加標(biāo)記顏色的CSS類。由于沒有在addMarker()方法中應(yīng)用text參數(shù)，因此標(biāo)記將顯示為一條簡(jiǎn)單的線。

任務(wù)行為

有必要對(duì)與甘特圖時(shí)間軸上的任務(wù)交互多說幾句，最終用戶可以沿著時(shí)間軸將給定的任務(wù)移動(dòng)到任何特定的點(diǎn)，它不會(huì)捕捉到任何單元格的開始或結(jié)束。為了實(shí)現(xiàn)這一點(diǎn)，我們?cè)诟侍貓D中將round_dnd_dates參數(shù)的值更改為false。配置對(duì)象：

gantt.config.round_dnd_dates = false;

根據(jù)這個(gè)演示項(xiàng)目的需求，我們還添加了移動(dòng)項(xiàng)目任務(wù)的功能，并禁用了任務(wù)之間的依賴關(guān)系(鏈接)和任務(wù)進(jìn)度的顯示：

gantt.config.drag_project = true;
gantt.config.drag_progress = false;
gantt.config.drag_links = false;

網(wǎng)格

在甘特圖的網(wǎng)格部分，有兩列。第一列包含任務(wù)的名稱，第二列提供任務(wù)的時(shí)間框架。使用模板函數(shù)，您可以在網(wǎng)格列的單元格中添加任何文本或HTML元素：

gantt.config.columns = [
{ name: "text", label: " ", width: 300, tree: true },
{
name: "dates", label: getToggleButton(), align: "center", template: function (task) {
if (task.type == "project") {
return ""
}

return taskDatesFormat(task)
}
},
];

現(xiàn)在我們要關(guān)注taskDatesFormat函數(shù)，它從任務(wù)對(duì)象返回所需的字符串：

function taskDatesFormat(task) {
let startMonth = gantt.date.date_to_str("%M");
let endMonth = startMonth;
let day = gantt.date.date_to_str("%j");

if (task.start_date.getMonth() == task.end_date.getMonth()) {
endMonth = gantt.date.date_to_str("");
}
const start_date = `${startMonth(task.start_date)} ${day(task.start_date)} - `;
const end_date = `${endMonth(task.end_date)} ${day(task.end_date)}`;
return start_date + end_date;

}

這個(gè)函數(shù)的工作原理如下：

• 它將任務(wù)開始日期轉(zhuǎn)換為字符串，從而只顯示月份的名稱。
• 如果一個(gè)任務(wù)在同一個(gè)月開始和結(jié)束，那么這個(gè)月的名稱將只在開始日期之前顯示。如果開始日期和結(jié)束日期屬于不同的月份，則開始月份顯示在開始日期之前，結(jié)束月份顯示在結(jié)束日期之前。
• 日期跟在月份的名稱后面。

有一個(gè)特殊的切換按鈕，允許折疊和展開網(wǎng)格部分。為了添加這個(gè)按鈕，我們?cè)趌abel參數(shù)中指定了getToggleButton()函數(shù)。根據(jù)網(wǎng)格的當(dāng)前狀態(tài)，此函數(shù)返回不同的值。當(dāng)按鈕被點(diǎn)擊時(shí)，我們改變grid_width配置中的返回值和寬度：

function toggleGrid() {
if (gridToggleText == "lt") {
gantt.config.grid_width = 80;
gridToggleText = "gt"
}
else {
gantt.config.grid_width = initialGridWidth;
gridToggleText = "lt"
}
gantt.config.columns[1].label = getToggleButton();
gantt.render();
}

或者，可以使用調(diào)整大小器更改網(wǎng)格大小。min_grid_column_width參數(shù)設(shè)置每個(gè)列的最小寬度，因此不能使網(wǎng)格小于指定的大小。因?yàn)槲覀兊母侍貓D有兩列，min_grid_column_width參數(shù)的值是30px，所以最小的網(wǎng)格寬度是60px。

gantt.config.min_grid_column_width = 30;

網(wǎng)格區(qū)域中的彩色圓圈在grid_folder模板中指定：

gantt.templates.grid_folder = function (task) {
return `<div style="color:${task.color}" class="project_icon"> ? </div>`;
};

返回的自定義元素包含一個(gè)特殊符號(hào)“?”，圓圈的顏色和大小由CSS樣式指定。

對(duì)于具有子元素的任務(wù)，grid_folder模板顯示，而對(duì)于其他任務(wù)，grid_file模板返回空字符串(" ")：

gantt.templates.grid_file = function (item) {
return "";
};

task_row_class模板在帶有子元素的任務(wù)下面隱藏了一個(gè)邊框：

gantt.templates.task_row_class = function (start, end, task) {
if (task.type == "project") {
return "project_row";
}
};

任務(wù)外觀

最后讓我們介紹一下如何在甘特圖中自定義項(xiàng)目和任務(wù)，由于任務(wù)欄中不應(yīng)該有文本，task_text模板返回一個(gè)空字符串:

gantt.templates.task_text = function (start, end, task) {
return "";
};

在rightside_text模板的幫助下，文本標(biāo)簽顯示在右側(cè)：

gantt.templates.rightside_text = function (start, end, task) {
if (task.type != "project") {
return task.text;
}
};

在我們的演示中，rightside_text模板不返回任何項(xiàng)目任務(wù)。相反，我們使用addTaskLayer()方法，它允許在甘特圖時(shí)間軸中顯示任何文本或HTML元素。對(duì)于項(xiàng)目任務(wù)，我們?cè)谧远xtaskDatesFormat函數(shù)的幫助下，以甘特圖網(wǎng)格中使用的相同格式返回任務(wù)名稱、持續(xù)時(shí)間和日期，這些值用一個(gè)特殊的點(diǎn)符號(hào)“?”分開，自定義元素的位置是使用getTaskPosition()方法計(jì)算的：

gantt.addTaskLayer(function (task) {
if (task.type == "project") {
const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);
const el = document.createElement('div');
const dot = `<span class="dot">?</span>`
el.innerHTML = task.text + dot + taskDatesFormat(task) + dot + task.duration + "days";
el.style.left = sizes.left + 10 + 'px';
el.style.top = sizes.top + 'px';
el.style.zIndex = 1;
el.style.marginTop = "7px";
el.style.position = "absolute";
el.style.lineHeight = "16px";
return el;
}
});

就是這樣！通過這個(gè)分步指南，您可以實(shí)現(xiàn)相同的結(jié)果，并創(chuàng)建一個(gè)自定義甘特圖，就像我們的用例一樣。