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

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

DHTMLX Gantt通常用于項目管理應(yīng)用程序中詳細的項目調(diào)度和管理，但它也可以用于構(gòu)建項目路線圖，如下面的例子所示。

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

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

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

讓我們在編程級別討論這些定制的實現(xiàn)。

定制指南

時間刻度和標記

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

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()方法確定標記的位置，并使用左側(cè)CSS屬性指定此位置。

拆分任務(wù)的項目階段

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

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

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

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(” “);
};

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

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

子任務(wù)的形狀

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

.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);
}

任務(wù)欄的文本標簽

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

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

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

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

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

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

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