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

DHTMLX Gantt正式版下載

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

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

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

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

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

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

定制指南

時間刻度和標記

我們從甘特圖頂部的刻度和標記開始，使用scales屬性指定scales的配置，在scales配置的數(shù)組中包含了兩個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屬性指定此位置。

拆分任務的項目階段

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

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

根據(jù)該參數(shù)的取值，task_class模板中會返回不同的類名，任務的位置由CSS樣式?jīng)Q定(margin-top參數(shù))。在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(” “);
};

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

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

子任務的形狀

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

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

任務欄的文本標簽

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

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

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

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

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創(chuàng)建與我們的示例類似的自定義項目路線圖。文章來源地址http://www.zghlxwxcb.cn/news/detail-744790.html

到了這里，關于甘特圖組件DHTMLX Gantt用例 - 如何拆分任務和里程碑項目路線圖的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！