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

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

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

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

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

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

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

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

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

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

定制指南

時間刻度和Today標記

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

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

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

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

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

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

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

在這些更改之后，必須在標記的文本下指定背景顏色，否則文本將不可見：

.gantt_marker .gantt_marker_content {
background: gray;
}

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