「实战应用」如何用DHTMLX构建自定义JavaScript甘特图（三）

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;就是这样按照上面的说明您可以实现我们示例中的关键自定义甘特图特性并将它们添加到您的项目中。