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

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求是最完善的甘特图图表库。当您声称您的产品具有高级定制功能时客户一定会对产品进行严格测试这个规则当然适用于DHTMLX Gantt官方技术团队收到了很多关于如何在JavaScript甘特图组件中实现某些外观定制的请求结合实际的案例我们将在本文中为您展示如何在实践中实现这些定制。用例带有自定义项目任务、资源、图标等的JavaScript甘特图DHTMLX Gantt附带了一个全面的API使您能够根据自己的喜好调整JavaScript组件的默认视图并根据时间轴调整任何HTML元素如下面的例子所示这个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参数来做到这一点。row_height: 40, bar_height: 20,请注意如果不这样做项目任务中的括号将扩展到任务边界之外并将显示在下一行。由于篇幅有限下期继续讲解请持续关注查看最新产品资讯哦~