DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求,是最完善的甘特圖圖表庫。
當您聲稱您的產品具有高級定製功能時,客戶一定會對產品進行嚴格測試,這個規則當然適用於DHTMLX Gantt,官方技術團隊收到了很多關於如何在JavaScript甘特圖組件中實現某些外觀定製的請求,結合實際的案例,我們將在本文中爲您展示如何在實踐中實現這些定製。
用例:帶有自定義項目任務、資源、圖標等的JavaScript甘特圖
DHTMLX Gantt附帶了一個全面的API,使您能夠根據自己的喜好調整JavaScript組件的默認視圖,並根據時間軸調整任何HTML元素,如下面的例子所示:
這個JavaScript甘特圖包含許多自定義的DHTMLX Gantt,在這裏我們更改了項目任務的外觀,在網格和時間軸中指定了資源,增加了在任務欄中顯示任務名稱和資源圖像的功能,突出顯示了屬於特定項目的週末和常規任務,並在任務頂部放置了自定義圖標。
這樣的自定義將使最終用戶更容易管理工作流並跟蹤資源分佈,讓我們爲您提供有關如何將這些特性添加到甘特項目中的更多細節。
帶有自定義括號的項目任務欄
在甘特圖中,用特殊括號(三角形)顯示項目可能很有用,括號(三角形)指示項目的開始和結束日期。默認情況下,DHTMLX Gantt將所有任務(包括項目)顯示爲矩形,並且沒有這樣的內置功能來強調項目任務中的時間框架。但是DHTMLX Gantt豐富API允許您將這些元素添加到web項目中。
例如它可以通過gantt.config.type_renderers完成,使用此配置,您可以完全重新定義任務的外觀。這個選項提供了大量的定製機會,但也帶來了一些不便。問題是,當創建自定義元素時,您必須手動添加具有特定類和屬性的html元素,或者爲某些現有的甘特圖功能(如添加依賴項或進度條的處理程序)添加事件處理程序,否則它們將無法工作。
不過別擔心,還有另外兩種方法可以解決這個問題。第一個是使用一個額外的層,允許在甘特圖時間軸上顯示任何HTML元素。
添加自定義括號的另一種更方便的方法是應用CSS,可以使用::before和::after僞元素。
它們將有以下常見的樣式:
.gantt_project::before, .gantt_project::after { content: ""; position: absolute; top: 100%; background-color: transparent; border-style: solid; }
自定義括號是用border屬性繪製的,但您需要在樣式規則中添加border-width參數:
.gantt_project::before { left: -1px; border-width: 0px 0px var(--gantt-bracket-height) var(--gantt-bracket-width); } .gantt_project::after { right: 0px; border-width: 0px var(--gantt-bracket-width) var(--gantt-bracket-height) 0px; }
由於每個項目都有不同的顏色,因此您需要根據項目顏色生成樣式。爲此迭代每個任務,看看它是否是一個項目,並具有顏色參數。如果是這樣,您應該給::before和::after僞元素添加樣式,類的名稱將是以下組合:" task + task ID "。
const dynamicStyle = document.createElement('style'); gantt.eachTask(function (task) { if (task.type == gantt.config.types.project && task.color) { dynamicStyle.innerHTML += ` .task_${task.id}.gantt_project::before{ border-color: transparent transparent transparent ${task.color}; } .task_${task.id}.gantt_project::after { border-color: transparent ${task.color} transparent transparent; } `; } }) document.body.appendChild(dynamicStyle);
還需要應用task_class模板來返回自定義類,其中需要檢查任務類型。如果它是一個項目類型,將classic_project添加到變量中。另外檢查任務是否具有color屬性,如果具有,則向變量添加task +任務ID。之後,您應該返回一個包含所有自定義類名的變量。
gantt.templates.task_class = function (start, end, task) { if (task.type == gantt.config.types.project) { let css = "classic_project"; if (task.color) { css += ` task_${task.id}`; } return css; } }
要使一切順利進行還有一個條件,它是項目元素的高度。默認情況下,任務欄可以拉伸到幾乎整個可用行的高度,這意味着您需要降低任務欄的高度以顯示項目欄中的角,您可以使用應該爲項目指定的bar_height參數來做到這一點。
"row_height": 40, "bar_height": 20,
請注意,如果不這樣做,項目任務中的括號將擴展到任務邊界之外,並將顯示在下一行。
由於篇幅有限,下期繼續講解,請持續關注查看最新產品資訊哦~