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

今天，您將學(xué)習(xí)如何使用進(jìn)度線補(bǔ)充JavaScript 甘特圖，以便于監(jiān)控項目進(jìn)度。

DHTMLX Gantt 最新試用版下載

什么是進(jìn)度線，以及它如何為甘特圖帶來好處

在復(fù)雜的甘特圖場景中，項目團(tuán)隊成員或利益相關(guān)者可能難以及時準(zhǔn)確地估計多個任務(wù)的當(dāng)前狀態(tài)。這時進(jìn)度線就派上用場了。它是一種曲線形式的視覺指示器，顯示任務(wù)相對于其計劃時間表的當(dāng)前狀態(tài)。這條線源于當(dāng)前日期，指示每個任務(wù)的進(jìn)度，為團(tuán)隊提供項目狀態(tài)的清晰視覺摘要。此功能還可以幫助項目團(tuán)隊快速了解是否需要進(jìn)行任何調(diào)整，而無需深入了解詳細(xì)數(shù)據(jù)。

總體而言，最終用戶可以從進(jìn)度線的實(shí)施中獲得以下好處：

• 一目了然地了解任務(wù)狀態(tài)（進(jìn)行中、提前或延遲）
• 降低錯過最后期限和資源錯配的風(fēng)險
• 增強(qiáng)團(tuán)隊協(xié)調(diào)
• 更好的工作流程透明度

因此，此功能可幫助項目團(tuán)隊在項目管理工作流程中保持清晰度和良好的時間安排。

以下是使用 DHTMLX 構(gòu)建的帶有進(jìn)度線的甘特圖示例：

使用進(jìn)度線補(bǔ)充 DHTMLX 甘特圖的指南

DHTMLX Gantt 默認(rèn)不提供進(jìn)度線功能，但可以通過 Gantt API 輕松將其添加到 Gantt 配置中。

• 先決條件

從編碼角度來看，進(jìn)度線是一個自定義元素，可以使用addTasklayer()方法顯示在甘特圖時間軸中。此方法會針對包含任務(wù)的每一行調(diào)用，這意味著您可以分段添加進(jìn)度線。

如果任務(wù)在當(dāng)前日期之前開始并完成，或者任務(wù)的進(jìn)度狀態(tài)為 0% 并在當(dāng)前日期之后開始，則需要添加一條直線。如果任務(wù)進(jìn)度從 0 到 100%，則繪制兩條與當(dāng)前日期和任務(wù)進(jìn)度相關(guān)的線。可以使用 SVG 完成。您需要三個進(jìn)度線坐標(biāo)：

• 與任務(wù)行和時間軸中的日期位置相關(guān)的頂點(diǎn)
• 與當(dāng)前任務(wù)進(jìn)度相關(guān)的彎道點(diǎn)（及其日期）
• 與任務(wù)行和時間軸中的日期位置相關(guān)的底部點(diǎn)
• 步驟 1：定位所需元素

首先，您需要使用posFromDate()方法來獲取任務(wù)在時間軸上的開始和結(jié)束日期的位置。

const startPos = gantt.posFromDate (任務(wù).開始日期) ; const endPos = gantt.posFromDate (任務(wù).結(jié)束日期) ;

此后，您將獲得當(dāng)前日期的位置。

const linePos = gantt.posFromDate (今天) ;

接下來，計算任務(wù)開始日期和結(jié)束日期的位置差，并將其乘以任務(wù)進(jìn)度。結(jié)果，您將獲得任務(wù)進(jìn)度日期。

const progressOffset = ( endPos - startPos ) * task.progress ; const progressPos = startPos + progressOffset ;

要獲取任務(wù)欄的坐標(biāo)，您應(yīng)該使用getTaskPosition()方法。

const大小= gantt.getTaskPosition (任務(wù)，任務(wù)。開始日期，任務(wù)。結(jié)束日期) ;

• 步驟2：創(chuàng)建SVG元素并添加屬性

現(xiàn)在您可以創(chuàng)建一個 SVG 元素并添加必要的屬性。高度參數(shù)取自任務(wù)坐標(biāo)（整行的高度），而寬度參數(shù)則是繼承的。位置使用頂部和左側(cè)樣式指定。SVG 元素將占據(jù)時間軸中的整個任務(wù)行。

const svgNS = "http://www.w3.org/2000/svg" ; const svg = document.createElementNS ( svgNS , " svg" ) ; svg.classList.add ( " progress-line" ) ; svg.setAttribute ( "width" , ' inherit ' ) ; svg.setAttribute ( " height " , size.rowHeight ) ; svg.setAttribute ( " style " , ` top : $ { size.top } px ; left : 0 ; ` ) ;

之后，創(chuàng)建繪制線條所需的路徑元素并添加屬性。

const path = document.createElementNS ( svgNS ，"path" ) ; path.setAttribute ( "stroke" ，"black" ) ; path.setAttribute ( "stroke-width" ，" 2" ) ; path.setAttribute ( "fill " ，" none " ) ;

• 步驟 3：計算進(jìn)度線的坐標(biāo)

下一步是計算線條的坐標(biāo)。對于那些從未使用過 SVG 元素的人，我們想澄清一下路徑坐標(biāo)中使用的幾個符號：

• M – 移動構(gòu)建元素的初始坐標(biāo)（從 0,0 到指定坐標(biāo)）。
• L – 從當(dāng)前坐標(biāo)到新坐標(biāo)畫一條線。

坐標(biāo)按以下順序指定：

• M x,y – 初始坐標(biāo)。x 取自當(dāng)前日期的位置。y 為 0，因為它是從頂部開始的第一個坐標(biāo)。
• L x,y – 任務(wù)進(jìn)度日期的坐標(biāo)。x 取自進(jìn)度的位置。y 取自行高的一半。
• L x,y – 結(jié)束坐標(biāo)。x 取自當(dāng)前日期的位置。y 取自行高。

const startPoint = `M$ { linePos } , 0 ` ;
const middlePoint = ` L $ { progressPos } , $ { size.rowHeight / 2 } ` ; const endPoint = `L $ { linePos } , $ { size.rowHeight } ` ;

• 步驟 4：檢查任務(wù)日期和進(jìn)度

此時需要檢查任務(wù)的日期和進(jìn)度，如果任務(wù)在當(dāng)前日期之前開始且進(jìn)度為 100%（即 1），或者在當(dāng)前日期之后開始且進(jìn)度大于 0，則表示任務(wù)仍在進(jìn)行中，此時需要從任務(wù)進(jìn)度中畫兩條線，如果不滿足上述條件，則畫一條線，即第二個坐標(biāo)被簡單排除。

const progressiveTask = task.start_date < today && task.progress < 1 ; const unfinishedTask = today < = task.start_date && task.progress > 0 ; if ( progressiveTask || unfinishedTask ) { pathData = ` $ { startPoint } $ { middlePoint } $ { endPoint } ` ; } else { pathData =     ` $ { startPoint }     $ { endPoint } ` ; }

之后，將路徑元素添加到 SVG 元素并返回 SVG 元素。

path.setAttribute ( " d " , pathData ) ; svg.appendChild ( path ) ;返回svg ;

步驟5：添加樣式

最后一步是為進(jìn)度線添加樣式。

.progress-line {
   position: absolute;
   pointer-events: none;
   z-index: 10;
}
.progress-line path {
   stroke: rgba(255, 0, 0, 70%)
}

讓我們澄清一下上面這段代碼中使用的參數(shù)：

• 位置：絕對； ——確保元素在時間軸上繪制在它們的位置上。
• pointer-events: none; - 禁用 SVG 元素的鼠標(biāo)事件，即當(dāng)您單擊 SVG 元素時，將在其下方的元素上觸發(fā)單擊。
• z-index: 10; – 允許在任務(wù)欄和鏈接頂部顯示自定義元素。
• 描邊——用于設(shè)置顏色。

就是這樣。上面的說明將幫助您使用像我們的示例一樣的自定義進(jìn)度線來豐富您的 JavaScript 甘特圖。

總結(jié)

總的來說，能夠輕松地將進(jìn)度線等簡單但實(shí)用的功能添加到甘特圖真是太好了。此功能使最終用戶能夠看到他們的工作如何與項目時間表保持一致，并在事情沒有按計劃進(jìn)行時及時采取措施。使用 DHTMLX Gantt，您可以獲得用于實(shí)現(xiàn)進(jìn)度線和許多其他自定義功能的廣泛 API。如果仍有疑問，請下載我們產(chǎn)品的30 天免費(fèi)試用版并試用。敬請期待 2025 年有關(guān) DHTMLX Gantt 自定義的更多教程。

如需了解更多DHTMLX產(chǎn)品資訊，歡迎咨詢“”！

加入DHTMLX甘特圖控件交流QQ群：764148812，與更多朋友一起溝通探討，提升開發(fā)技能。