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

今天，您將學習如何使用進度線補充JavaScript 甘特圖，以便于監控項目進度。

DHTMLX Gantt 最新試用版下載

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

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

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

• 一目了然地了解任務狀態（進行中、提前或延遲）
• 降低錯過最后期限和資源錯配的風險
• 增強團隊協調
• 更好的工作流程透明度

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

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

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

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

• 先決條件

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

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

• 與任務行和時間軸中的日期位置相關的頂點
• 與當前任務進度相關的彎道點（及其日期）
• 與任務行和時間軸中的日期位置相關的底部點
• 步驟 1：定位所需元素

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

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

此后，您將獲得當前日期的位置。

const linePos = gantt.posFromDate (今天) ;

接下來，計算任務開始日期和結束日期的位置差，并將其乘以任務進度。結果，您將獲得任務進度日期。

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

要獲取任務欄的坐標，您應該使用getTaskPosition()方法。

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

• 步驟2：創建SVG元素并添加屬性

現在您可以創建一個 SVG 元素并添加必要的屬性。高度參數取自任務坐標（整行的高度），而寬度參數則是繼承的。位置使用頂部和左側樣式指定。SVG 元素將占據時間軸中的整個任務行。

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 ; ` ) ;

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

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

• 步驟 3：計算進度線的坐標

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

• M – 移動構建元素的初始坐標（從 0,0 到指定坐標）。
• L – 從當前坐標到新坐標畫一條線。

坐標按以下順序指定：

• M x,y – 初始坐標。x 取自當前日期的位置。y 為 0，因為它是從頂部開始的第一個坐標。
• L x,y – 任務進度日期的坐標。x 取自進度的位置。y 取自行高的一半。
• L x,y – 結束坐標。x 取自當前日期的位置。y 取自行高。

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

• 步驟 4：檢查任務日期和進度

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

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%)
}

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

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

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

總結

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

如需了解更多DHTMLX產品資訊，歡迎咨詢“”！

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