半岛权威十大直营(官方)网站

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。

当您声称您的产品具有高级定制功能时，客户一定会对产品进行严格测试，这个规则当然适用于DHTMLX Gantt，官方技术团队收到了很多关于如何在JavaScript甘特图组件中实现某些外观定制的请求，结合实际的案例，我们将在本文中为您展示如何在实践中实现这些定制。

在上文中（点击这里回顾>>），我们介绍了如何为任务分配资源以及任务栏中的任务名称和资源等，本文将继续介绍如何高亮显示项目任务和周末等。

高亮显示项目的任务和周末

当通过DHTMLX构建的JavaScript甘特图管理项目时，能够突出显示属于不同项目和周末的任务组是很有用的。

让我们从突出显示项目的任务开始。要启用此特性，需要应用根据任务坐标绘制的附加层，但在此之前，请检查任务类型是否为project。

gantt.addTaskLayer(function (task) {
if (task.type == "project") {

使用getTaskPosition()方法获取项目坐标，最上面的坐标是已知的——尺寸对象最上面的参数。

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

将最左边的任务坐标添加到左边数组，将最右边的坐标添加到右边数组，然后遍历项目的每个子任务并添加这些坐标。另外，根据子任务的坐标增加sizes对象中的height参数。

const left = [sizes.left];
const right = [sizes.left + sizes.width];
gantt.eachTask(function (child) {
const childSizes = gantt.getTaskPosition(child, child.start_date, child.end_date);
left.push(childSizes.left)
right.push(childSizes.left + childSizes.width)
if (sizes.height < childSizes.top + childSizes.height) sizes.height = childSizes.top + childSizes.height - sizes.top
}, task.id);

在遍历所有任务之后，必须对左侧数组进行排序以获得最小值，然后将其添加到sizes对象的左侧参数中。

sizes.left = left.sort((a, b) => a - b)[0]

 接下来，对正确的数组进行排序，但不要将最右边的值添加到sizes对象的右边参数中。相反，从结果值中减去最左边的坐标以获得矩形的宽度。

const mostRight = right.sort((a, b) => a - b).reverse()[0]
sizes.width = mostRight - sizes.left

然后您需要创建一个HTML元素，并从sizes对象中获取其坐标。在样式中从项目的颜色参数中指定颜色，如果不指定颜色，则默认设置为灰色。

在突出显示周末时，应该应用timeline_cell_class模板。在这里，您应该检查数组中是否有包含周末的日期，如果有，则返回一个自定义类名。

const weekends = [
+new Date(2025, 11, 24),
+new Date(2025, 11, 25),
+new Date(2025, 11, 31),
+new Date(2026, 0, 1),
]

gantt.templates.timeline_cell_class = function (task, date) {
if (weekends.indexOf(+date) > -1) {
return "weekend";
}
};

任务顶部的自定义图标

最后我们想与大家分享如何在任务顶部显示自定义图标。一个简单的方法是使用addTaskLayer()方法，使用此方法，您可以检查任务是否具有icon参数，该参数将指示任务是否具有自定义图标，它是我们添加到演示项目中的自定义任务属性。

gantt.addTaskLayer(function (task) {
if (task.type == "project") {

 之后，让我们使用getTaskPosition()方法获取任务的坐标。然后，创建一个HTML元素，根据icon参数从带有图标的数组中指定图像，并设置样式。

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

const img = document.createElement('img');
img.src = icons[task.icon - 1]
img.style = `
left: ${sizes.left - 10}px;
width: 30px;
top: ${sizes.top}px;
height: 30px;
margin-top: 2px;

position: absolute;
border-radius: 2px;
color: white;
opacity: 0.9;
z-index:1;
pointer-events: none;

return img;

就是这样，按照上面的说明，您可以实现我们示例中的关键自定义甘特图特性，并将它们添加到您的项目中。