四川建设工程招标信息网,哪里有seo排名优化,网站备案要幕布照,红色旅游网站页面建设DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求#xff0c;是最完善的甘特图图表库。
在web项目中使用DHTMLX Gantt时#xff0c;开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的…DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求是最完善的甘特图图表库。
在web项目中使用DHTMLX Gantt时开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力因此本文仅继续介绍DHTMLX Gantt的自定义用例。
DHTMLX Gantt v8.0正式版下载
在这个系列的文章中您将学习如何使用DHTMLX Gantt组件构建类似jira的项目路线图。
用例带有自定义时间线图标、状态栏、时间线调整器等的项目路线图
项目路线图提供了一种易于遵循的方式使每个人都对最新的关键项目了如指掌这个功能经常在项目管理应用程序中被要求并成为其他流行工具(如甘特图)的一个很好的补充。下图是本次文章的一个示例 这个路线图示例可视化了项目工作流最终用户可以清楚地了解他们的工作如何在计划间隔内与其他任务对齐。实际上这种路线图可有助于实现下列目标
规划未来的工作跟踪已计划工作的进度根据路线图承诺报告进展情况。
如果您查看一下时间轴可以看到带有指定数值的不同颜色的自定义图标它们是与特定项目任务相关的待办事项元素(子任务、改进、用户描述等)。当待办事项元素超出任务时间范围时它们会被突出显示为红色以吸引用户的注意每个任务的待办事项元素的总数显示在网格的“Item”列中。
您可以在路线图网格中看到的另一个值得注意的参数称为“Story Points”它表示用于评估在给定任务上花费时间的常规单位每个任务的描述点的数量和持续时间由用户指定。
在其他方面路线图结构非常清晰和直接我们继续分享实际的定制步骤这些步骤将允许您使用DHTMLX Gantt构建相同的项目路线图。
定制指南
时间刻度和Today标记
对于任何具有时间限制结构(如项目路线图)的工具来说时间刻度都是至关重要的元素。因此我们从配置和制定刻度和today标记开始。路线图时间表包括两个时间尺度——“month” 和 “day”要设置这些刻度您应该在scales配置中使用unit属性指定相应的选项
gantt.config.scales [
{ unit: month, step: 1, date: %F },
{ unit: day, step: 1, date: %d },
];
使用addMarker方法将今天的标记添加到时间轴区域
const todayMarker gantt.addMarker({
start_date: today,
css: today,
text: Today
});
可以使用CSS样式更改标记的外观css参数指定标记的类名这个参数可以用作选择器来为标记添加样式。
您不需要在标记的垂直线中使用背景色因此可以禁用此参数并显示左边框border-left属性帮助在标记上添加虚线替代实线
.today {
border-left: 2px dashed gray;
background: unset;
}
在这些更改之后必须在标记的文本下指定背景颜色否则文本将不可见
.gantt_marker .gantt_marker_content {
background: gray;
}
现在我们可以考虑对路线图接口进行更复杂的定制下期再见记得点赞关注收藏哦
