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

當(dāng)您聲稱您的產(chǎn)品具有高級定制功能時(shí)，客戶一定會(huì)對產(chǎn)品進(jìn)行嚴(yán)格測試，這個(gè)規(guī)則當(dāng)然適用于DHTMLX Gantt，官方技術(shù)團(tuán)隊(duì)收到了很多關(guān)于如何在JavaScript甘特圖組件中實(shí)現(xiàn)某些外觀定制的請求，結(jié)合實(shí)際的案例，我們將在本文中為您展示如何在實(shí)踐中實(shí)現(xiàn)這些定制。

用例：帶有自定義項(xiàng)目任務(wù)、資源、圖標(biāo)等的JavaScript甘特圖

DHTMLX Gantt附帶了一個(gè)全面的API，使您能夠根據(jù)自己的喜好調(diào)整JavaScript組件的默認(rèn)視圖，并根據(jù)時(shí)間軸調(diào)整任何HTML元素，如下面的例子所示：

這個(gè)JavaScript甘特圖包含許多自定義的DHTMLX Gantt，在這里我們更改了項(xiàng)目任務(wù)的外觀，在網(wǎng)格和時(shí)間軸中指定了資源，增加了在任務(wù)欄中顯示任務(wù)名稱和資源圖像的功能，突出顯示了屬于特定項(xiàng)目的周末和常規(guī)任務(wù)，并在任務(wù)頂部放置了自定義圖標(biāo)。

這樣的自定義將使最終用戶更容易管理工作流并跟蹤資源分布，讓我們?yōu)槟峁┯嘘P(guān)如何將這些特性添加到甘特項(xiàng)目中的更多細(xì)節(jié)。

帶有自定義括號(hào)的項(xiàng)目任務(wù)欄

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

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

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

添加自定義括號(hào)的另一種更方便的方法是應(yīng)用CSS，可以使用::before和::after偽元素。

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

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

自定義括號(hào)是用border屬性繪制的，但您需要在樣式規(guī)則中添加border-width參數(shù)：

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

由于每個(gè)項(xiàng)目都有不同的顏色，因此您需要根據(jù)項(xiàng)目顏色生成樣式。為此迭代每個(gè)任務(wù)，看看它是否是一個(gè)項(xiàng)目，并具有顏色參數(shù)。如果是這樣，您應(yīng)該給::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);

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

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

要使一切順利進(jìn)行還有一個(gè)條件，它是項(xiàng)目元素的高度。默認(rèn)情況下，任務(wù)欄可以拉伸到幾乎整個(gè)可用行的高度，這意味著您需要降低任務(wù)欄的高度以顯示項(xiàng)目欄中的角，您可以使用應(yīng)該為項(xiàng)目指定的bar_height參數(shù)來做到這一點(diǎn)。

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

請注意，如果不這樣做，項(xiàng)目任務(wù)中的括號(hào)將擴(kuò)展到任務(wù)邊界之外，并將顯示在下一行。

由于篇幅有限，下期繼續(xù)講解，請持續(xù)關(guān)注查看最新產(chǎn)品資訊哦~