創建一致且引人注意的視覺樣式是任何項目管理應用程序的重要要求，這就是為什么我們會在這個系列中繼續探索DHTMLX Gantt圖庫的自定義。在本文中我們將考慮一個新的甘特圖定制場景，DHTMLX Gantt組件如何創建一個項目路線圖。

用例 - 帶有自定義時間尺度、拆分任務和文本標簽的項目路線圖

DHTMLX Gantt通常用于項目管理應用程序中詳細的項目調度和管理，但它也可以用于構建項目路線圖，如下面的例子所示。

客戶要求我們基于Office Timeline Pro插件創建一個類似于swimlane PowerPoint模板的示例。

該路線圖在時間軸上提供了項目目標和主要可交付成果(任務、里程碑)的高級概述，在這個演示中添加了swimlanes來可視化工作流，Swimlanes有助于清晰地將任務和里程碑劃分為產品路線圖的不同階段。

但是這個演示中最值得注意的部分是團隊交付的幾個自定義更改，這里我們討論的是甘特圖時間軸上的刻度、任務分割（分割模式）的使用、任務欄的形狀以及該顯示任務欄文本內容的多個選項。

讓我們在編程級別討論這些定制的實現。

定制指南

時間刻度和標記

我們從甘特圖頂部的刻度和標記開始，使用scales屬性指定scales的配置，在scales配置的數組中包含了兩個scale對象，這些對象帶有unit屬性，其中指定了相應的“年”和“季度”比例。

gantt.config.scales = [
{
unit: "year", step: 1, date: function (date) {
const markerDates = [
new Date("2025-03-28"),
new Date("2025-07-05"),
new Date("2025-09-25"),
new Date("2025-12-20"),
];
const markers = [];
markerDates.forEach(function (markerDate, index) {
markers.push(`span class="scale_label" style="left: ${gantt.posFromDate(markerDate)}px;" Q${index + 1} review /span

`)
})

return markers.join(“”)
}
},
{
unit: “quarter”, step: 1, date: function (date) {
return “Q” + (new Date(date).getMonth() / 3 + 1)
}
},
];

在較高的“年”刻度中，我們還添加了自定義標記。要做到這一點，需要使用posFromDate()方法確定標記的位置，并使用左側CSS屬性指定此位置。

拆分任務的項目階段

現在我們進入這個場景中最有趣的部分，即在時間軸中顯示具有拆分任務的項目階段。有四個主要(父)任務(計劃、策略、服務開發和商業智能)，它們被劃分為顯示在同一行中的子任務(子任務)。

為了在特定任務中啟用分割模式，我們通常需要將其渲染屬性設置為split。但是當前版本的DHTMLX Gantt沒有內置在不同垂直位置顯示拆分任務的功能，因此我們必須想出一個定制的解決方案。對于每個任務，我們添加了level參數，其中使用從1到4的變量來表示其位置。

根據該參數的取值，task_class模板中會返回不同的類名，任務的位置由CSS樣式決定(margin-top參數)。在task_class模板中，我們還指定了任務文本應該顯示的位置。

gantt.templates.task_class = function (start, end, task) {
const css = [];
if (task.level) {
css.push("level_" + task.level)
}
if (task.type == "skew") {
css.push("skew")
}
if (task.text_position) {
css.push("text_position_" + task.text_position)
}
css.push(styleFromParent(task.parent))

return css.join(” “);
};

這個甘特圖場景不需要創建任務依賴項和更改任務進度的能力，因此我們在此場景中禁用這些功能。

gantt.config.drag_links = false;
gantt.config.drag_progress = false;

子任務的形狀

時間軸上的子任務(子分裂任務)具有多邊形和八邊形的形狀，而不是正矩形和菱形，任務的形狀可以用CSS樣式修改。例如，使用clip-path屬性創建多邊形形式的分割任務，此屬性用于在CSS中創建復雜的形狀。

.gantt_task_line.gantt_bar_task .gantt_task_content {
clip-path: polygon(50% 0%, 98% 0, 100% 21%, 100% 65%, 96% 98%, 2% 100%, 0 77%, 0% 43%, 4% 0);
}

任務欄的文本標簽

最后我們繼續考慮顯示任務標簽的選項。默認情況下，在task_text模板中指定HTML內容后，會顯示在任務欄中。但在我們的演示中，任務的文本內容也顯示在任務欄之外。

如果需要在任務欄外顯示文本，task_text模板應該包含text_position參數。在本例中，task_text模板返回一個空字符串。

gantt.templates.task_text = function (start, end, task) {
if (task.text_position) {
return ""
}
return task.text
};

讓我們更詳細地研究一下如何在任務欄的左側添加文本塊，為此使用了leftside_text模板。該模板還包括text_position參數，但這里我們返回任務文本。

gantt.templates.leftside_text = function (start, end, task) {
if (task.text_position) {
return task.text
}
};

任務文本的位置是使用CSS樣式指定的，選擇器的第一部分由task_class模板返回，而它的第二部分(.gantt_side_content.gantt_left)可以從任務欄左側的元素中獲取。

按照這些說明，您可以使用DHTMLX Gantt創建與我們的示例類似的自定義項目路線圖。