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

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

DHTMLX Gantt 最新試用版下載

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

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

總體而言，最終用戶可以從進度線的實施中獲得以下好處：

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

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

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

使用進度線補充 DHTMLX 甘特圖的指南

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

• 先決條件

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

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

• 與任務(wù)行和時間軸中的日期位置相關(guān)的頂點
• 與當(dāng)前任務(wù)進度相關(guān)的彎道點（及其日期）
• 與任務(wù)行和時間軸中的日期位置相關(guā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ù)進度。結(jié)果，您將獲得任務(wù)進度日期。

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：計算進度線的坐標(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ù)進度日期的坐標(biāo)。x 取自進度的位置。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ù)日期和進度

此時需要檢查任務(wù)的日期和進度，如果任務(wù)在當(dāng)前日期之前開始且進度為 100%（即 1），或者在當(dāng)前日期之后開始且進度大于 0，則表示任務(wù)仍在進行中，此時需要從任務(wù)進度中畫兩條線，如果不滿足上述條件，則畫一條線，即第二個坐標(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：添加樣式

最后一步是為進度線添加樣式。

.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è)置顏色。

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

總結(jié)

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

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

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