dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。

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

用例 - 新建項目外觀、當前月份標記和可折疊網格

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

在這里您可以看到項目用彩色且細的線條和標簽很好地描述在頂部，項目日期和持續時間標記在項目名稱旁邊。因此，最終用戶可以很快地掌握每個項目將花費多少時間。

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

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

自定義指南

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

當前月份標記

我們從甘特圖時間軸中使用的時間尺度和垂直標記開始，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配置的數組中，我們指定了兩種內置的scale類型，“quarter”和“month”。在這兩種比例類型的單元格中，可以顯示任何值或HTML元素，但它們不會改變單元格的寬度。例如，較低刻度中的一個單元格包含一個自定義元素，該元素帶有一個特定的類，用于用CSS樣式為該單元格著色。該元素突出顯示當前月份，在today參數中指定：

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

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

任務行為

有必要對與甘特圖時間軸上的任務交互多說幾句，最終用戶可以沿著時間軸將給定的任務移動到任何特定的點，它不會捕捉到任何單元格的開始或結束。為了實現這一點，我們在甘特圖中將round_dnd_dates參數的值更改為false。配置對象：

gantt.config.round_dnd_dates = false;

根據這個演示項目的需求，我們還添加了移動項目任務的功能，并禁用了任務之間的依賴關系(鏈接)和任務進度的顯示：

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

網格

在甘特圖的網格部分，有兩列。第一列包含任務的名稱，第二列提供任務的時間框架。使用模板函數，您可以在網格列的單元格中添加任何文本或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)
}
},
];

現在我們要關注taskDatesFormat函數，它從任務對象返回所需的字符串：

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;

}

這個函數的工作原理如下：

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

有一個特殊的切換按鈕，允許折疊和展開網格部分。為了添加這個按鈕，我們在label參數中指定了getToggleButton()函數。根據網格的當前狀態，此函數返回不同的值。當按鈕被點擊時，我們改變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();
}

或者，可以使用調整大小器更改網格大小。min_grid_column_width參數設置每個列的最小寬度，因此不能使網格小于指定的大小。因為我們的甘特圖有兩列，min_grid_column_width參數的值是30px，所以最小的網格寬度是60px。

gantt.config.min_grid_column_width = 30;

網格區域中的彩色圓圈在grid_folder模板中指定：

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

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

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

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

task_row_class模板在帶有子元素的任務下面隱藏了一個邊框：

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

任務外觀

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

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

在rightside_text模板的幫助下，文本標簽顯示在右側：

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

在我們的演示中，rightside_text模板不返回任何項目任務。相反，我們使用addTaskLayer()方法，它允許在甘特圖時間軸中顯示任何文本或HTML元素。對于項目任務，我們在自定義taskDatesFormat函數的幫助下，以甘特圖網格中使用的相同格式返回任務名稱、持續時間和日期，這些值用一個特殊的點符號“?”分開，自定義元素的位置是使用getTaskPosition()方法計算的：

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;
}
});

就是這樣！通過這個分步指南，您可以實現相同的結果，并創建一個自定義甘特圖，就像我們的用例一樣。