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

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

在這個系列的文章中，您將學習如何使用DHTMLX Gantt組件構建類似jira的項目路線圖。

用例：帶有自定義時間線圖標、狀態欄、時間線調整器等的項目路線圖

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

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

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

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

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

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

定制指南

時間刻度和Today標記

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

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

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

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

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

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

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

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

.gantt_marker .gantt_marker_content {
background: gray;
}

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