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

在web項目中使用DHTMLX Gantt時，開發(fā)人員經(jīng)常需要滿足與UI外觀相關(guān)的各種需求。因此他們必須確定JavaScript甘特圖庫的自定義能力，因此本文僅繼續(xù)介紹DHTMLX Gantt的自定義用例。

在這個系列的文章中，您將學習如何使用DHTMLX Gantt組件構(gòu)建類似jira的項目路線圖。在上文中（點擊這里回顧>>）主要介紹了項目路線圖的用例、時間刻度和Today標記定制等，本文將繼續(xù)講解如何實現(xiàn)定制，持續(xù)關(guān)注我們哦~

定制指南

工作項的自定義圖標

在路線圖時間線中顯示的工作項自定義圖標可能是這個場景中最奇怪的元素，我們在之前的文章中解釋了它們的含義，現(xiàn)在想揭開這些圖標是如何實現(xiàn)的。

在實踐中，這些方形圖標被添加到時間軸區(qū)域的任務(wù)中，并使用addTaskLayer方法添加了一個帶有自定義元素的附加層。為了確保這些元素在重新初始化后不會消失，您需要在ongantready事件處理程序中添加代碼。

gantt.attachEvent("onGanttReady", function () {
gantt.addTaskLayer(function (task) {

addTaskLayer方法適用于所有項目任務(wù)，因此您應(yīng)該首先檢查特定任務(wù)屬性(項)中是否存在已保存的值。

if (task.items) {

對于這樣保存的值，您必須為任務(wù)創(chuàng)建附加層的主元素。該元素將在函數(shù)結(jié)束時返回，并且工作項的自定義圖標將被添加到其中。

const mainEl = document.createElement('div');

之后，需要遍歷task.items中的所有值:

for (timestamp in task.items) {

下一步是獲取unix時間戳值并將其轉(zhuǎn)換為日期，結(jié)果值應(yīng)該存儲在一個單獨的變量中。

const itemDate = new Date(+timestamp);
const value = task.items[timestamp];

使用getTaskPosition方法來指定任務(wù)對象和應(yīng)該顯示自定義圖標的日期，需要確定圖標方塊在時間軸上的坐標。

const sizes = gantt.getTaskPosition(task, itemDate, itemDate);

然后需要創(chuàng)建一個HTML元素，在其中指定一個特定的類名和一個值(數(shù)字)，并添加一個帶有任務(wù)ID的屬性。

const el = document.createElement('div');
el.className = 'work_item';
el.innerHTML = value;
el.setAttribute("data-taskId", task.id);

自定義圖標必須顯示在單元格的中心，默認情況下，元素寬度為15px。

let elWidth = 15;

因此，如果時間軸單元格寬度的一半小于自定義元素的寬度，則該元素將自動縮小。

let cellWidth = gantt.getScale().col_width;

if (elWidth > cellWidth / 2) {
elWidth = cellWidth / 2
}

考慮到元素的寬度和時間軸單元格的寬度，計算將元素放置在單元格中心所需的左邊距的數(shù)量：

let marginLeft = (cellWidth - elWidth) / 2;

元素的位置(坐標)是用styles指定的：

el.style.left = sizes.left + 'px';
el.style.top = sizes.top + 'px';
el.style.marginLeft = marginLeft + 'px';
el.style.width = elWidth + "px"

工作項的自定義圖標默認顏色是灰色的，此選項在未為任務(wù)指定其他顏色時使用。如果圖標的日期不包括在任務(wù)的日期范圍內(nèi)，它將以紅色突出顯示。

let background = "Gray";
if (+itemDate < +task.start_date || +itemDate > +task.end_date) {
background = "DarkRed";
}

如果自定義圖標放置在時間軸上的任務(wù)日期內(nèi)，則其顏色必須取自此任務(wù)的父任務(wù)。在單個任務(wù)和父任務(wù)中，自定義圖標將具有這些任務(wù)的顏色。

else {
if (task.parent) {
const parent = gantt.getTask(task.parent);
background = parent.color || background;
}
else {
background = task.color || background;
}
}

之后使用樣式設(shè)置圖標的顏色，并將其附加到任務(wù)附加圖層的主要元素上：

el.style.background = background;
el.style.color = "#eee"

mainEl.appendChild(el);

為了使自定義圖標看起來與任務(wù)欄有所不同，我們添加了一個樣式規(guī)則，使顏色更飽和：

filter: saturate(180%);

這樣無論文本的顏色是白色、黑色還是灰色，它都不會影響文本的顏色。

然后，您必須為onEmptyClick事件添加一個事件處理程序。當單擊任何時間軸單元格以及沒有與任務(wù)(如任務(wù)欄和任務(wù)行)相關(guān)聯(lián)的元素的路線圖界面的任何點時，將調(diào)用此事件。

gantt.attachEvent("onEmptyClick", function (e) {

首先，嘗試使用close()方法獲取任務(wù)行或自定義圖標元素：

const taskRow = e.target.closest(".gantt_task_row");
const customElement = e.target.closest(".work_item");

相對于時間軸的點擊位置被保存到一個變量中。

const position = gantt.utils.dom.getRelativeEventPosition(e, gantt.$task_data).x

單擊任務(wù)行或自定義圖標后，您將從HTML元素獲得任務(wù)ID，然后使用getTask()方法獲得任務(wù)本身。

const taskId = targetElement.dataset.taskId || targetElement.dataset.taskid;
const task = gantt.getTask(taskId);

之后，需要使用dateFromPos()方法獲取點擊位置的時間軸日期。日期帶有時間參數(shù)，因此使用gantt.date.day_start()方法將時間四舍五入到一天的開始會更方便。這一步使得在addTaskLayer()方法中迭代日期元素變得更加容易。

const clickDate = +gantt.date.day_start(gantt.dateFromPos(position));

更多教程內(nèi)容請下期再見，記得點贊關(guān)注收藏哦！