5个最佳ReactJS甘特图解决方案

本文概述

• 5. Ext Gantt
• 4. React Gantt Chart with D3.js
• 3. ReactGantt
• 2. dhtmlxGantt
• 1. React-google-charts
• 结论

React最初于2013年由Facebook发布, 此后便获得了相当大的欢迎。 Stack Overflow进行的开发者调查证实, React在2016年成为最受喜爱, 想要和最流行的技术之一。这一趋势相当稳定, 不可忽视。袖子上的王牌越多, 你漂浮的机会就越大。该规则也适用于React开发人员。这就是为什么我们决定查看五个可用于创建在线甘特图应用程序的React组件的原因。它们具有不同级别的功能, 因此可以用于不同类型的项目。

5. Ext Gantt

Bryntum公司以其Ext JS框架的高质量插件而闻名。 Ext Gantt是该公司开发的高级甘特图, 可以用作React组件。让我们检查一下它可以提供的内容, 以决定是否值得你注意。拖放支持可以大大简化基于该组件的应用程序的工作。你可以在任何条件下过滤可用任务并更改比例。与大多数其他组件一样, 你可以使用关键路径计算功能。提前和滞后可以为项目管理过程带来一定的灵活性。 Ext Gantt支持任务之间的不同类型的依赖关系(FF / FS / SF / SS)。它可以与流行的服务器端技术(例如PHP, Java, ASP.NET等)集成。你可以创建自定义上下文菜单, 并在需要时轻松地对应用程序进行本地化。 Ext Gantt是一个非常先进的工具, 具有许多方便的功能。但是它也有薄弱的一面。 Bryntum提供的文档不是很详细。适用于对一切工作原理有一般了解的高级开发人员。

4. React Gantt Chart with D3.js

D3.js是一个著名的JavaScript库, 你可以使用它来可视化几乎所有类型的数据。那么, 为什么不使用它来创建甘特图呢？如果你对同一问题感兴趣, 可以查看Yani Iliev撰写的这篇简短文章。它描述了利用D3.js库创建可重用的React组件以开发甘特图应用程序的原理。

3. ReactGantt

在这种情况下, 如果你对大量功能不感兴趣, 并计划创建一个极简应用程序以甘特图的形式可视化工作流程, 则可以查看ReactGantt。这是一个开放源代码组件, 根据MIT或GPL第3版许可进行分发。使用npm软件包管理器可以很容易地安装它。你可以为表格的左右边界指定日期。当用户将鼠标悬停在边框上时, 也可以启用或禁用边框, 更改边框的颜色, 显示任务完成的百分比以及显示带有任务信息的工具提示。图表网格上显示的任务可以分组。如你所见, ReactGantt并没有为你提供高级功能, 例如关键路径计算。其目的是显示日历网格的一些水平条, 并标记每个水平条的完成百分比。如果你打算创建一个应用程序来处理包含数百个任务的大型复杂项目, 那么ReactGantt将不是最佳选择。但是, 如果你正在寻找一种可以尽快安装和使用的工具, 以可视化一个包含数十个任务的小型项目的进度, 那么它可能正是你想要的。

2. dhtmlxGantt

与前面的示例相比, dhtmlxGantt为你提供了扩展功能。此JavaScript组件允许使用面向拖放的用户界面为跨浏览器的Web应用程序创建功能齐全的Gantt图表应用程序。开发人员提供的包装器允许你在React应用程序中使用此甘特图。你可以访问此GitHub页面以获取演示, 并查看描述所有工作原理的文档页面。你可以通过npm将dhtmlxGantt添加到你的项目中, 然后根据需要进行配置。你可以使用鼠标光标更改任务完成百分比, 并在任务之间创建不同类型的链接。除了这些对于此类软件而言微不足道的功能之外, dhtmlxGantt还提供了更多其他功能。如果你要完全确定自己能够及时完成项目, 那么关键路径计算将非常有用。你可以使用不同类型的自定义元素, 例如基准或期限。自动调度可以帮助避免手动进行例行工作的必要性。向后计划, 触摸设备支持, 从MS Project导出/导入, 排序, 过滤, 动态加载, 可访问性支持–很难在一个段落中描述所有可用功能。 dhtmlxGantt为你提供创建全功能的在线项目管理应用程序所需的所有功能。

1. React-google-charts

React-google-charts是一个包装, 允许你在项目中使用Google Gantt Chart。该图表是使用SVG呈现的, 可以显示任务的开始和结束日期及其持续时间。当你将鼠标悬停在数据上时, 带有其他信息的工具提示将显示在屏幕上。你可以使用可调整样式的箭头或使用不显示任何依赖项的模式来显示每个任务具有哪些依赖项。相似的任务可以组合在一起。关键路径功能允许定义对项目总体时间影响最大​​的任务。你可以设置图表样式并配置其外观。 Google甘特图提供了创建轻巧, 整洁且美观的图表所需的几乎所有功能。该文档非常详细。在你能够创建自己的甘特图应用程序之前, 无需花费大量时间来学习一切工作原理。

结论

很明显, React将继续存在。它每天越来越受欢迎。结果, 著名的大型软件公司以及独立开发人员为开发人员提供了将其甘特组件作为React应用程序的一部分来保持流行的可能性。结果超出了所有预期。无需忍受单个可用解决方案的缺点。可用组件的范围非常广泛, 因此你始终可以选择更适合你的组件。想要创建一个简单而简约的甘特图应用程序吗？ ReactGantt在这里为你服务。寻找具有高级功能的东西吗？检查dhtmlxGantt或Ext Gantt。