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

當您聲稱您的產品具有高級定制功能時，客戶一定會對產品進行嚴格測試，這個規則當然適用于DHTMLX Gantt，官方技術團隊收到了很多關于如何在JavaScript甘特圖組件中實現某些外觀定制的請求，結合實際的案例，我們將在本文中為您展示如何在實踐中實現這些定制。

用例：帶有自定義項目任務、資源、圖標等的JavaScript甘特圖

DHTMLX Gantt附帶了一個全面的API，使您能夠根據自己的喜好調整JavaScript組件的默認視圖，并根據時間軸調整任何HTML元素，如下面的例子所示：

這個JavaScript甘特圖包含許多自定義的DHTMLX Gantt，在這里我們更改了項目任務的外觀，在網格和時間軸中指定了資源，增加了在任務欄中顯示任務名稱和資源圖像的功能，突出顯示了屬于特定項目的周末和常規任務，并在任務頂部放置了自定義圖標。

這樣的自定義將使最終用戶更容易管理工作流并跟蹤資源分布，讓我們為您提供有關如何將這些特性添加到甘特項目中的更多細節。

帶有自定義括號的項目任務欄

在甘特圖中，用特殊括號(三角形)顯示項目可能很有用，括號(三角形)指示項目的開始和結束日期。默認情況下，DHTMLX Gantt將所有任務(包括項目)顯示為矩形，并且沒有這樣的內置功能來強調項目任務中的時間框架。但是DHTMLX Gantt豐富API允許您將這些元素添加到web項目中。

例如它可以通過gantt.config.type_renderers完成，使用此配置，您可以完全重新定義任務的外觀。這個選項提供了大量的定制機會，但也帶來了一些不便。問題是，當創建自定義元素時，您必須手動添加具有特定類和屬性的html元素，或者為某些現有的甘特圖功能（如添加依賴項或進度條的處理程序）添加事件處理程序，否則它們將無法工作。

不過別擔心，還有另外兩種方法可以解決這個問題。第一個是使用一個額外的層，允許在甘特圖時間軸上顯示任何HTML元素。

添加自定義括號的另一種更方便的方法是應用CSS，可以使用::before和::after偽元素。

它們將有以下常見的樣式：

.gantt_project::before,
.gantt_project::after {
content: "";
position: absolute;
top: 100%;
background-color: transparent;
border-style: solid;
}

自定義括號是用border屬性繪制的，但您需要在樣式規則中添加border-width參數：

.gantt_project::before {
left: -1px;
border-width: 0px 0px var(--gantt-bracket-height) var(--gantt-bracket-width);
}

.gantt_project::after {
right: 0px;
border-width: 0px var(--gantt-bracket-width) var(--gantt-bracket-height) 0px;
}

由于每個項目都有不同的顏色，因此您需要根據項目顏色生成樣式。為此迭代每個任務，看看它是否是一個項目，并具有顏色參數。如果是這樣，您應該給::before和::after偽元素添加樣式，類的名稱將是以下組合:" task + task ID "。

const dynamicStyle = document.createElement('style');
gantt.eachTask(function (task) {
if (task.type == gantt.config.types.project && task.color) {
dynamicStyle.innerHTML += `
.task_${task.id}.gantt_project::before{
border-color: transparent transparent transparent ${task.color};
}

.task_${task.id}.gantt_project::after {
border-color: transparent ${task.color} transparent transparent;
}
`;
}
})
document.body.appendChild(dynamicStyle);

還需要應用task_class模板來返回自定義類，其中需要檢查任務類型。如果它是一個項目類型，將classic_project添加到變量中。另外檢查任務是否具有color屬性，如果具有，則向變量添加task +任務ID。之后，您應該返回一個包含所有自定義類名的變量。

gantt.templates.task_class = function (start, end, task) {
if (task.type == gantt.config.types.project) {
let css = "classic_project";
if (task.color) {
css += ` task_${task.id}`;
}
return css;
}
}

要使一切順利進行還有一個條件，它是項目元素的高度。默認情況下，任務欄可以拉伸到幾乎整個可用行的高度，這意味著您需要降低任務欄的高度以顯示項目欄中的角，您可以使用應該為項目指定的bar_height參數來做到這一點。

"row_height": 40,
"bar_height": 20,

請注意，如果不這樣做，項目任務中的括號將擴展到任務邊界之外，并將顯示在下一行。

由于篇幅有限，下期繼續講解，請持續關注查看最新產品資訊哦~