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

最新推荐文章于 2024-05-21 14:15:14 发布

界面开发小八哥

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量871

点赞数 22

文章标签： javascript 甘特图 DHTMLX 项目管理

本文链接：https://blog.csdn.net/AABBbaby/article/details/136527574

版权

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

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

DHTMLX Gantt v8.0正式版下载

用例：带有自定义项目任务、资源、图标等的JavaScript甘特图

DHTMLX Gantt附带了一个全面的API，使您能够根据自己的喜好调整JavaScript组件的默认视图，并根据时间轴调整任何HTML元素，如下面的例子所示：

如何用DHTMLX构建自定义JavaScript甘特图

这个JavaScript甘特图包含许多自定义的DHTMLX Gantt，在这里我们更改了项目任务的外观，在网格和时间轴中指定了资源，增加了在任务栏中显示任务名称和资源图像的功能，突出显示了属于特定项目的周末和常规任务，并在任务顶部放置了自定义图标。

这样的自定义将使最终用户更容易管理工作流并跟踪资源分布，让我们为您提供有关如何将这些特性添加到甘特项目中的更多细节。

带有自定义括号的项目任务栏

在甘特图中，用特殊括号(三角形)显示项目可能很有用，括号(三角形)指示项目的开始和结束日期。默认情况下，DHTMLX Gantt将所有任务(包括项目)显示为矩形，并且没有这样的内置功能来强调项目任务中的时间框架。但是DHTMLX Gantt丰富API允许您将这些元素添加到web项目中。

例如它可以通过gantt.config.type_renderers完成，使用此配置，您可以完全重新定义任务的外观。这个选项提供了大量的定制机会，但也带来了一些不便。问题是，当创建自定义元素时，您必须手动添加具有特定类和属性的html元素，或者为某些现有的甘特图功能（如添加依赖项或进度条的处理程序）添加事件处理程序，否则它们将无法工作。

不过别担心，还有另外两种方法可以解决这个问题。第一个是使用一个额外的层，允许在甘特图时间轴上显示任何HTML元素。

添加自定义括号的另一种更方便的方法是应用CSS，可以使用::before和::after伪元素。

它们将有以下常见的样式：

.gantt_project::before,
.gantt_project::after {
content: "";
position: absolute;
top: 100%;
background-color: transparent;
border-style: solid;
}

自定义括号是用border属性绘制的，但您需要在样式规则中添加border-width参数：

.gantt_project::before {
left: -1px;
border-width: 0px 0px var(--gantt-bracket-height) var(--gantt-bracket-width);
}

.gantt_project::after {
right: 0px;
border-width: 0px var(--gantt-bracket-width) var(--gantt-bracket-height) 0px;
}

由于每个项目都有不同的颜色，因此您需要根据项目颜色生成样式。为此迭代每个任务，看看它是否是一个项目，并具有颜色参数。如果是这样，您应该给::before和::after伪元素添加样式，类的名称将是以下组合:" task + task ID "。

const dynamicStyle = document.createElement('style');
gantt.eachTask(function (task) {
if (task.type == gantt.config.types.project && task.color) {
dynamicStyle.innerHTML += `
.task_${task.id}.gantt_project::before{
border-color: transparent transparent transparent ${task.color};
}

.task_${task.id}.gantt_project::after {
border-color: transparent ${task.color} transparent transparent;
}
`;
}
})
document.body.appendChild(dynamicStyle);

还需要应用task_class模板来返回自定义类，其中需要检查任务类型。如果它是一个项目类型，将classic_project添加到变量中。另外检查任务是否具有color属性，如果具有，则向变量添加task +任务ID。之后，您应该返回一个包含所有自定义类名的变量。

gantt.templates.task_class = function (start, end, task) {
if (task.type == gantt.config.types.project) {
let css = "classic_project";
if (task.color) {
css += ` task_${task.id}`;
}
return css;
}
}

要使一切顺利进行还有一个条件，它是项目元素的高度。默认情况下，任务栏可以拉伸到几乎整个可用行的高度，这意味着您需要降低任务栏的高度以显示项目栏中的角，您可以使用应该为项目指定的bar_height参数来做到这一点。