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

當您聲稱您的產品具有高級定制功能時，客戶一定會對產品進行嚴格測試，這個規則當然適用于DHTMLX Gantt，官方技術團隊收到了很多關于如何在JavaScript甘特圖組件中實現某些外觀定制的請求，結合實際的案例，我們將在本文中為您展示如何在實踐中實現這些定制。在上文中（點擊這里回顧>>），我們主要介紹了JavaScript甘特圖用例以及如何可是構建一個JS甘特圖，本文將繼續介紹如何構建JS甘特圖。

為任務分配資源

下一個特性是將資源(在我們的例子中是員工)分配給任務的能力，DHTMLX Gantt以廣泛的資源管理能力而聞名，包括一個單獨的資源面板。

但是如果您需要對單個元素進行更簡單的配置，則可以使用簡化形式的資源。

在我們的演示中，有一個數組其中指定了員工的姓名和照片，這意味著這些數據可以從服務器加載。

const resourceData = [
{ "key": "1", "label": "John" },
{ "key": "2", "label": "Mike" },
{ "key": "3", "label": "Anna" },
{ "key": "4", "label": "Bill" },
{ "key": "5", "label": "Floe" },
]

DHTMLX Gantt有一個lightbox部分，使您能夠為一個任務分配多個資源并指定資源值（小時，天，材料等）。為了使其正常工作，您需要在options參數中指定一個帶有資源的數組。

{ name: "resources", type: "resources", map_to: "owners", options: resourceData, default_value: 8 },

如果使用簡單的甘特配置() 并且使用load()或parse()方法從服務器加載資源，Gantt將自動向lightbox部分添加必要的參數。

當使用自定義配置時，數組必須包含帶有key和label參數的對象。

在我們的演示中，還顯示了網格部分中分配給任務的資源(員工照片)。為此需要使用列配置的模板函數，其中將返回getOwnerPics函數的值。

name: "owners", label: "Owners", resize: true, width: 75, template: function (task) {
return getOwnerPics(task);
}

在這個函數中，有必要使用owner任務屬性，其中指定了分配的資源。如果存在分配，則應該將資源ID添加到單獨的所有者數組中。

下一步是用資源數據遍歷數組，如果資源ID在所有者數組中，則獲取帶有照片的屬性并將其添加到images變量中，之后返回這個包含所有員工照片的變量。

function getOwnerPics(task) {
let images = "";

const owners = [];
(task.owners || []).forEach(function (el) {
owners.push(el.resource_id);
})

resourceData.forEach(function (resource) {
if (owners.indexOf(resource.key) > -1) {
images += " " + resource.img || "";
}
})

return images;
}

任務欄中的任務名稱和資源

如果您看了Gantt演示，可以看到一些任務欄中顯示了任務名稱和資源圖像。如果它們不適合，這些元素將顯示在任務欄的右側。

要確定任務名稱和員工圖像是否可以放置在任務欄中，需要應用detectOverflow函數。在這個函數中，首先使用getTaskPosition()方法來獲取任務欄的坐標。因為您只需要任務欄的寬度，所以從getTaskPosition()方法返回的對象中獲取寬度參數。

const taskWidth = gantt.getTaskPosition(task, task.start_date, task.end_date).width;

然后需要創建canvas元素，使用getComputedStyle()方法查找通常在任務欄中顯示的文本字體樣式和字體大小。之后在context元素中指定這些參數，并使用measureText()方法來確定文本寬度。

const canvas = document.createElement('canvas');
const context = canvas.getContext("2d");

const bar = document.querySelector(".gantt_task_content")
if (bar) {
const fontFamily = getComputedStyle(bar)['font-family'];
const fontSize = getComputedStyle(bar)['font-size'];
context.font = fontSize + ' ' + fontFamily;
}
const textWidth = context.measureText(task.text).width;

現在是時候將照片添加到任務欄了，您需要指定這些照片的寬度。在我們的演示中，圖像的寬度被調整為任務欄的高度，因此您可以使用gantt.config.row_height配置的值。但如果元素的寬度不同，則需要設置一個新值，寬度值必須乘以分配給給定任務的資源數量。

const ownersWidth = (task.owners || []).length * gantt.config.row_height;

現在有必要對文本和圖像的寬度值進行總結，如果結果值大于任務欄的寬度，則返回true，這意味著內容(文本+照片)不會包含在任務欄中。

if (textWidth + ownersWidth > taskWidth) {
return true;
}

如果detectOverflow返回false，則task_text模板包含以下條件。如果任務類型是項目，則只需返回任務文本。如果它是一個常規任務，則返回一個HTML元素，其中包含任務文本和可以從getOwnerPics函數獲得的員工照片。

gantt.templates.task_text = function (start, end, task) {
if (detectOverflow(task)) {
return ""
}
else {
if (task.type == gantt.config.types.project) {
return task.text;
}
else {
return `<span style="vertical-align: top" >${task.text}</span>${getOwnerPics(task)}`;
}
}
};

在rightside_text模板中，對“task”類型的任務使用detectOverflow函數。如果此函數返回true，則應該返回一個HTML元素，其中包含來自getOwnerPics函數的任務文本和員工圖像。

在DHTMLX Gantt中可以只使用一個模板，您不能多次指定不同的模板并期望它們正常工作，所以必須在一個模板中添加所有的代碼：

gantt.templates.rightside_text = function (start, end, task) {
if (task.type == gantt.config.types.project) {
return `<div class='project-right' style="${getTriangleStyles(task, "right")}"></div>`
}


if (detectOverflow(task)) {
return `<span style="vertical-align: top" >${task.text}</span>${getOwnerPics(task)}`;
}
return "";
};

由于篇幅有限，下期繼續講解，請持續關注查看最新產品資訊哦~