当前位置: 首页 > 科技观察

Angular优秀的甘特图解决方案_0

时间:2023-03-16 11:19:27 科技观察

【.com快译】在本文中,我们将向您介绍三种不同的Angular组件,可用于创建甘特图应用程序(参见:https:https://dzone.com/文章/什么是甘特图-如何以及何时使用甘特图)。别着急,我们这里不会讨论过多的技术细节,而是从基本功能和配套文档的角度,和大家一起探讨这些图表的实际使用,以及如何通过他们的文档页面。业务需求。1.angular-gantt(https://www.angular-gantt.com/)angular-gantt允许你在当前的AngularJS项目中添加甘特图组件(相关概念参见:https://dzone.com/)文章/angulajs-basic-to-expert-day-one)。您可以在模型和视图之间实现双向数据绑定。它的日历可以自定义,用户可以定义自己的假期和工作时间。它的排序和过滤功能还可以突出显示特定的任务和等级。angular-ganttAPI可以用来监听控制器中的各种事件和调用方法。当然,它的基本功能可以借助插件进行扩展。目前,有十多个这样的扩展。如果需要,您可以添加一个可视指示器来显示任务的配置进度,或显示带有一些附加信息的工具提示。因此,您可以创建具有基本功能的最小应用程序,然后根据需要添加新功能。您可以使用演示链接:https://www.angular-gantt.com/demo/了解更多信息。angular-gantt的支持文档不长,但包含足够的信息来使用该组件。同时,它的入门指南(https://www.angular-gantt.com/get-started/)也可以指导你深入学习。相应的配置指南包含并描述了如何将数据加载到angular-gantt中以及如何配置相应的行信息。2.DHTMLXGanttChart(https://dhtmlx.com/docs/products/dhtmlxGantt/)DHTMLXGanttChart不仅提供了创建在线甘特图应用程序所需的功能,还为付费用户提供了一些高级功能选项。与其他应用相比,其优势更为明显。您可以轻松地使用鼠标来更改任务完成的百分比并在任务之间创建不同类型的链接。关键路径计算确保您可以及时完成手头的项目。同时,您可以在相应的甘特图中添加基线或截止日期等不同类型的自定义元素。它的自动调度功能使您从各种手动例程中解脱出来。此外,您可以通过向后规划(Backwardplanning)从MSProject、Excel或Oracle的PrimaveraP6导出/导入,以及对触摸屏设备的支持、排序、过滤、动态加载和辅助功能支持。功能来创建一个强大的项目管理工具。同时,其丰富的资源管理功能、各种资源图和有效的工作负载跟踪都为其增添了魅力。如果您想了解如何在Angular框架中使用该组件,可以从GitHub页面(https://github.com/DHTMLX/angular2-gantt-demo)下载相应的演示程序。DHTMLX甘特图的文档非常详尽。例如,您可以查看其高级指南(https://dhtmlx.com/blog/dhtmlx-gantt-chart-usage-angularjs-2-framework/)以了解如何将DHTMLX甘特图与Angular2Framework一起使用。文档详尽无遗:详细描述了每个步骤并包括代码示例和屏幕截图。同时,还配备了详细的甘特图配置指南,方便开发者针对所有用户类型进行综合考虑。如果你想知道如何在Angular1.X项目中使用DHTMLX甘特图,那么这个解决方案链接也许能给你答案(https://dhtmlx.com/blog/gantt-chart-angularjs-app-dhtmlxgantt/).3.DayPilot甘特图(https://www.daypilot.org/gantt/)除了提供事件日历、月历、计划表等不同类型的组件外,DayPilot还提供甘特图服务。由于支持JavaScript、jQuery、AngularJS、PHP、WebFormsforASP.NET、MVC和Java,DayPilot甘特图可用于不同类型的项目。DayPilot对拖放的支持让您可以轻松移动各种任务和里程碑,调整任务大小,创建任务之间的依赖关系,拖动任务树,让您通过进度条监控当前项目进度。借助CSS的可用主题,您可以使用CSS更改此组件的外观,从而轻松地为所有元素设置不同的样式。其导出功能可以支持PNG、JPG、GIF、BMP、TIFF等文件格式。此外,您可以使用在线主题设计器(请参阅https://themes.daypilot.org/)来创建您自己的主题。当然,你也可以在任务框中自定义活动区域,然后选择与之关联的各种具体操作。例如:它提供上下文菜单和处理器(handler)。虽然DayPilotGanttChart允许您创建HTML工具提示以显示附加事件的详细信息,但此功能仅体现在增值服务列表中。也就是说,DayPilot甘特图不提供关键路径计算,或除基本功能之外的任何其他高级功能。您可以通过演示链接了解更多信息:https://www.daypilot.org/demo/Gantt/。由于DayPilotGanttChart的文档看起来有点乱,您必须花一些时间才能找到您要查找的页面。例如,Angular2+的教程(参见:https://doc.daypilot.org/gantt/angular-2/)非常详细,但其文档结构很差。当然,如果你已经对Angular有了扎实的了解和足够的使用经验,那么使用这张甘特图应该不是问题。总结综上所述,如果您打算将甘特图添加到Angular项目中,您可以选择以上三个选项之一。其中,angular-gantt是一个非常轻量级的组件,如果你只是想搞定一些基本的功能,它会非常适合你。它的插件架构允许您按需添加自定义函数和挂钩。由于它是在MIT许可证下,如果你想省点钱,这是一个不错的选择。DHTMLX甘特图可以为您提供关键路径计算、自动规划、资源管理等高级功能。当然,所有服务都是有代价的,而且这些组件仅在其PRO版本中提供。但是,它的标准版已经具备创建功能齐全的甘特图应用程序所需的一切。虽然DayPilotGanttChart没有任何高级功能,但它仍然是一个轻量级、可定制的解决方案。此外,您可以将它与其他DayPilot组件(如事件日历等)结合使用,以创建复杂的时间管理应用程序。原标题:TopGanttChartSolutionsforAngular,作者:IvanPetrenko