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

在web項(xiàng)目中使用DHTMLX Gantt時(shí)，開(kāi)發(fā)人員經(jīng)常需要滿足與UI外觀相關(guān)的各種需求。因此他們必須確定JavaScript甘特圖庫(kù)的自定義能力，因此本文僅繼續(xù)介紹DHTMLX Gantt的自定義用例。

在這個(gè)系列的文章中，您將學(xué)習(xí)如何使用DHTMLX Gantt組件構(gòu)建類似jira的項(xiàng)目路線圖。

用例：帶有自定義時(shí)間線圖標(biāo)、狀態(tài)欄、時(shí)間線調(diào)整器等的項(xiàng)目路線圖

項(xiàng)目路線圖提供了一種易于遵循的方式，使每個(gè)人都對(duì)最新的關(guān)鍵項(xiàng)目了如指掌，這個(gè)功能經(jīng)常在項(xiàng)目管理應(yīng)用程序中被要求，并成為其他流行工具(如甘特圖)的一個(gè)很好的補(bǔ)充。下圖是本次文章的一個(gè)示例：

這個(gè)路線圖示例可視化了項(xiàng)目工作流，最終用戶可以清楚地了解他們的工作如何在計(jì)劃間隔內(nèi)與其他任務(wù)對(duì)齊。實(shí)際上，這種路線圖可有助于實(shí)現(xiàn)下列目標(biāo)：

• 規(guī)劃未來(lái)的工作；
• 跟蹤已計(jì)劃工作的進(jìn)度；
• 根據(jù)路線圖承諾報(bào)告進(jìn)展情況。

如果您查看一下時(shí)間軸，可以看到帶有指定數(shù)值的不同顏色的自定義圖標(biāo)，它們是與特定項(xiàng)目任務(wù)相關(guān)的待辦事項(xiàng)元素(子任務(wù)、改進(jìn)、用戶描述等)。當(dāng)待辦事項(xiàng)元素超出任務(wù)時(shí)間范圍時(shí)，它們會(huì)被突出顯示為紅色以吸引用戶的注意，每個(gè)任務(wù)的待辦事項(xiàng)元素的總數(shù)顯示在網(wǎng)格的“Item”列中。

您可以在路線圖網(wǎng)格中看到的另一個(gè)值得注意的參數(shù)稱為“Story Points”，它表示用于評(píng)估在給定任務(wù)上花費(fèi)時(shí)間的常規(guī)單位，每個(gè)任務(wù)的描述點(diǎn)的數(shù)量和持續(xù)時(shí)間由用戶指定。

在其他方面，路線圖結(jié)構(gòu)非常清晰和直接，我們繼續(xù)分享實(shí)際的定制步驟，這些步驟將允許您使用DHTMLX Gantt構(gòu)建相同的項(xiàng)目路線圖。

定制指南

時(shí)間刻度和Today標(biāo)記

對(duì)于任何具有時(shí)間限制結(jié)構(gòu)(如項(xiàng)目路線圖)的工具來(lái)說(shuō)，時(shí)間刻度都是至關(guān)重要的元素。因此，我們從配置和制定刻度和today標(biāo)記開(kāi)始。路線圖時(shí)間表包括兩個(gè)時(shí)間尺度——“month” 和 “day”，要設(shè)置這些刻度，您應(yīng)該在scales配置中使用unit屬性指定相應(yīng)的選項(xiàng)：

gantt.config.scales = [
{ unit: "month", step: 1, date: "%F" },
{ unit: "day", step: 1, date: "%d" },
];

使用addMarker方法將今天的標(biāo)記添加到時(shí)間軸區(qū)域：

const todayMarker = gantt.addMarker({
start_date: today,
css: "today",
text: "Today"
});

可以使用CSS樣式更改標(biāo)記的外觀，css參數(shù)指定標(biāo)記的類名，這個(gè)參數(shù)可以用作選擇器來(lái)為標(biāo)記添加樣式。

您不需要在標(biāo)記的垂直線中使用背景色，因此可以禁用此參數(shù)并顯示左邊框，border-left屬性幫助在標(biāo)記上添加虛線替代實(shí)線：

.today {
border-left: 2px dashed gray;
background: unset;
}

在這些更改之后，必須在標(biāo)記的文本下指定背景顏色，否則文本將不可見(jiàn)：

.gantt_marker .gantt_marker_content {
background: gray;
}

現(xiàn)在我們可以考慮對(duì)路線圖接口進(jìn)行更復(fù)雜的定制，下期再見(jiàn)，記得點(diǎn)贊關(guān)注收藏哦！