彩票走势图

dhtmlxSuite使用教程:项目管理应用程序中的JavaScript时间线图表

翻译|使用教程|编辑:杨鹏连|2020-10-26 11:07:53.547|阅读 569 次

概述:如果有必要在特定时间范围内直观地呈现数据,那么JavaScript时间线图(或图表)正是您所需要的。此类图表是一种有效的方式,可以显示按时间顺序排列的各种过程。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

dhtmlxSuite是一个用JavaScript建立的富客户端开发框架。它是一个JavaScript UI库,用于建立一个完整的具有Ajax能力的前台组件。用户可以使用它建立一个企业级的跨浏览器Web应用和移动应用程序,它能提供优秀的性能和更丰富的用户体验。

点击下载dhtmlxSuite最新版

如果有必要在特定时间范围内直观地呈现数据,那么JavaScript时间线图(或图表)正是您所需要的。此类图表是一种有效的方式,可以显示按时间顺序排列的各种过程。

该数据可视化工具具有广泛的应用范围。它通常用于教育目的,历史研究和自然科学中。随着计算机技术的飞速发展,时间表在商业领域也得到了极大的普及。

JavaScript时间轴
很难想象没有时间轴功能的现代B2B或企业应用程序。在本文中,我们将考虑在项目管理中JavaScript时间轴控件的可能使用场景,并了解如何在DHTMLX库中使用这些数据可视化组件。

项目管理应用程序中的JavaScript时间线图表

使用时间线已成为面向业务的应用程序的关键支柱,因为任何项目通常都包含与时间有关的任务和事件。对项目活动的整体了解可以清楚地了解项目的过去和当前状况,并可以制定未来计划。

这就是为什么商人(尤其是项目经理)经常依赖时间线功能进行路线图或项目组合管理,而在计划工具(如项目日历和甘特图)中更频繁地使用它的原因。

可以使用Excel,PowerPoint,MS Project或各种在线服务来创建基本的时间表图表。但是,如果您想构建一个具有项目管理功能但没有外部依赖性的Web应用程序,并为最终用户削减昂贵的第三方许可证的成本,则可以嵌入特殊的JavaScript时间轴库,例如DHTMLX Gantt和Scheduler。

DHTMLX Gantt中的JavaScript时间线功能

实际上,甘特图是描述项目工作流程的时间表的一种形式。它可以帮助项目经理安排任务,在员工之间分配任务以及监视其完成情况。但最重要的是,甘特图提供了指定任务之间的依存关系并计算关键路径的机会,从而为管理团队提供了所有必要的数据,以便及时完成项目。

DHTMLX Gantt

DHTMLX HTML5甘特图为JavaScript时间轴提供了多种时间配置变体。甘特图可以具有不同时间单位(年,月,周等)的任意数量的时间刻度。可以定义要在屏幕上显示的特定时间范围和时间步长。例如,您可以在每月时间范围内设置每日或每周时间步长,甚至可以指定一天内以分钟为单位的时间轴。此外,您可以通过添加自定义时间单位(例如会计季度和年份)来完全根据需要调整时间范围。

为了使处理大量数据更加方便,DHTMLX Gantt小部件允许使用鼠标滚动条快速浏览时间线。

拖动甘特语JavaScript时间线图

拖动甘特语JavaScript时间线图使用鼠标滚动条浏览时间线。

利用特殊的缩放模块,用户可以在甘特图刻度之间切换,甚至可以使用鼠标滚轮缩放时间线。

缩放时间表
缩放时间表使用鼠标滚轮缩放时间线。

时间轴刻度的其他方面(例如高度,日期格式和样式)也可以根据用户的需求进行修改。

在DHTMLX Gantt的有用的JavaScript时间轴设置中,可以仅显示工作时间并隐藏不必要的日期(例如周末)。

没有周末的时间表

得益于灵活的布局,甘特图可以补充其他网格和时间表。例如,可以将资源面板添加到用于管理项目资源的默认时间轴。它有助于实现更有效的资源分配和平衡的工作量强度。

DHTMLX Gantt-资源面板-时间轴
DHTMLX Gantt支持从右到左(RTL)模式。换句话说,甘特时间轴可以显示用属于左右书写系统的语言(阿拉伯语,波斯语,希伯来语等)书写的文本数据。
DHTMLX Gantt-RTL模式

DHTMLX Scheduler中的JavaScript时间线视图

如果要在项目中可视化约会,事件或关键里程碑,而又不显示其复杂性(例如任务关系),那么最好选择DHTMLX JavaScript事件日历。
JavaScript时间轴视图

DHTMLX Scheduler的主要特点是可提供10个事件日历视图,这些视图可满足最终用户有关显示重要项目任务的所有需求。JavaScript时间轴视图是使用最广泛的视图之一,旨在展示沿时间轴分配给资源的事件或任务。在资源下,我们通常是指负责任务的项目成员,进行约会的会议室或可供预订的住宿和车辆。

时间轴视图具有四种模式:条形,天,单元格和树形。在条形模式下,事件是在条形的帮助下绘制的,可能会占用多个时隙。天模式使开发人员可以将天显示为时间轴行。单元模式说明了单元矩阵中的事件。可以在同一天指定多个事件,并且在单元格中显示指定事件的数量。
计划程序-时间轴-单元格模式

树模式允许在Y轴上以分层树结构组织资源。例如,“时间轴”视图可以演示部门以及每个部门中员工的工作。

DHTMLX Scheduler-时间轴视图-树形模式

此外,可以在“时间轴”视图的所有模式下应用自定义HTML内容。以下示例显示了自定义元素,这些元素揭示了分配给每个管理器的任务总数。
DHTMLX Scheduler-时间轴视图-自定义内容
该视图带有水平滚动条,使浏览整个日历和立即查找特定事件变得更加容易。不仅如此,它还具有自动滚动功能,使项目经理只需沿时间轴拖动即可更改日历约会的时间范围。
DHTMLX Scheduler-时间轴视图-水平滚动
Scheduler组件还允许在日历时间轴中设置第二刻度(X轴)。附加的时间刻度旨在对默认刻度的时间范围进行分组。

作为甘特图库,DHTMLX Scheduler支持智能呈现,从而显着增强了时间轴视图的性能。它在数据密集型项目中非常有用。

在处理不同事件时,项目管理办公室可以利用DHTMLX Scheduler中嵌入的许多有用功能,例如重复事件,自定义工具提示,多部分事件,多语言支持等。


想要购买dhtmlxSuite正版授权,或了解更多产品信息请点击


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP