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

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

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

定制指南

工作項(xiàng)的自定義圖標(biāo)

在路線圖時(shí)間線中顯示的工作項(xiàng)自定義圖標(biāo)可能是這個(gè)場(chǎng)景中最奇怪的元素，我們?cè)谥暗奈恼轮薪忉屃怂鼈兊暮x，現(xiàn)在想揭開這些圖標(biāo)是如何實(shí)現(xiàn)的。

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

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

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

if (task.items) {

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

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

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

for (timestamp in task.items) {

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

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

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

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

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

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

自定義圖標(biāo)必須顯示在單元格的中心，默認(rèn)情況下，元素寬度為15px。

let elWidth = 15;

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

let cellWidth = gantt.getScale().col_width;

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

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

let marginLeft = (cellWidth - elWidth) / 2;

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

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

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

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

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

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

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

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

mainEl.appendChild(el);

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

filter: saturate(180%);

這樣無(wú)論文本的顏色是白色、黑色還是灰色，它都不會(huì)影響文本的顏色。

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

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

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

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

相對(duì)于時(shí)間軸的點(diǎn)擊位置被保存到一個(gè)變量中。

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

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

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

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

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

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