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

當(dāng)您聲稱您的產(chǎn)品具有高級定制功能時(shí)，客戶一定會對產(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)這些定制。

在上文中（點(diǎn)擊這里回顧>>），我們介紹了如何為任務(wù)分配資源以及任務(wù)欄中的任務(wù)名稱和資源等，本文將繼續(xù)介紹如何高亮顯示項(xiàng)目任務(wù)和周末等。

高亮顯示項(xiàng)目的任務(wù)和周末

當(dāng)通過DHTMLX構(gòu)建的JavaScript甘特圖管理項(xiàng)目時(shí)，能夠突出顯示屬于不同項(xiàng)目和周末的任務(wù)組是很有用的。

讓我們從突出顯示項(xiàng)目的任務(wù)開始。要啟用此特性，需要應(yīng)用根據(jù)任務(wù)坐標(biāo)繪制的附加層，但在此之前，請檢查任務(wù)類型是否為project。

gantt.addTaskLayer(function (task) {
if (task.type == "project") {

使用getTaskPosition()方法獲取項(xiàng)目坐標(biāo)，最上面的坐標(biāo)是已知的——尺寸對象最上面的參數(shù)。

const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);

將最左邊的任務(wù)坐標(biāo)添加到左邊數(shù)組，將最右邊的坐標(biāo)添加到右邊數(shù)組，然后遍歷項(xiàng)目的每個(gè)子任務(wù)并添加這些坐標(biāo)。另外，根據(jù)子任務(wù)的坐標(biāo)增加sizes對象中的height參數(shù)。

const left = [sizes.left];
const right = [sizes.left + sizes.width];
gantt.eachTask(function (child) {
const childSizes = gantt.getTaskPosition(child, child.start_date, child.end_date);
left.push(childSizes.left)
right.push(childSizes.left + childSizes.width)
if (sizes.height < childSizes.top + childSizes.height) sizes.height = childSizes.top + childSizes.height - sizes.top
}, task.id);

在遍歷所有任務(wù)之后，必須對左側(cè)數(shù)組進(jìn)行排序以獲得最小值，然后將其添加到sizes對象的左側(cè)參數(shù)中。

sizes.left = left.sort((a, b) => a - b)[0]

接下來，對正確的數(shù)組進(jìn)行排序，但不要將最右邊的值添加到sizes對象的右邊參數(shù)中。相反，從結(jié)果值中減去最左邊的坐標(biāo)以獲得矩形的寬度。

const mostRight = right.sort((a, b) => a - b).reverse()[0]
sizes.width = mostRight - sizes.left

然后您需要創(chuàng)建一個(gè)HTML元素，并從sizes對象中獲取其坐標(biāo)。在樣式中從項(xiàng)目的顏色參數(shù)中指定顏色，如果不指定顏色，則默認(rèn)設(shè)置為灰色。

在突出顯示周末時(shí)，應(yīng)該應(yīng)用timeline_cell_class模板。在這里，您應(yīng)該檢查數(shù)組中是否有包含周末的日期，如果有，則返回一個(gè)自定義類名。

const weekends = [
+new Date(2025, 11, 24),
+new Date(2025, 11, 25),
+new Date(2025, 11, 31),
+new Date(2026, 0, 1),
]

gantt.templates.timeline_cell_class = function (task, date) {
if (weekends.indexOf(+date) > -1) {
return "weekend";
}
};

任務(wù)頂部的自定義圖標(biāo)

最后我們想與大家分享如何在任務(wù)頂部顯示自定義圖標(biāo)。一個(gè)簡單的方法是使用addTaskLayer()方法，使用此方法，您可以檢查任務(wù)是否具有icon參數(shù)，該參數(shù)將指示任務(wù)是否具有自定義圖標(biāo)，它是我們添加到演示項(xiàng)目中的自定義任務(wù)屬性。

gantt.addTaskLayer(function (task) {
if (task.type == "project") {

之后，讓我們使用getTaskPosition()方法獲取任務(wù)的坐標(biāo)。然后，創(chuàng)建一個(gè)HTML元素，根據(jù)icon參數(shù)從帶有圖標(biāo)的數(shù)組中指定圖像，并設(shè)置樣式。

const sizes = gantt.getTaskPosition(task, task.end_date, task.end_date);

const img = document.createElement('img');
img.src = icons[task.icon - 1]
img.style = `
left: ${sizes.left - 10}px;
width: 30px;
top: ${sizes.top}px;
height: 30px;
margin-top: 2px;

position: absolute;
border-radius: 2px;
color: white;
opacity: 0.9;
z-index:1;
pointer-events: none;

return img;

 就是這樣，按照上面的說明，您可以實(shí)現(xiàn)我們示例中的關(guān)鍵自定義甘特圖特性，并將它們添加到您的項(xiàng)目中。