值得拥有！React的四种优秀甘特图方案

【51CTO.com快译】在Web开发爱好者，以及那些重视Web应用的高性能与可靠性的大型企业中，React已经广受欢迎，并得到了广泛的使用。目前，业界出现了各种复杂程度不一的React组件，它们的功能各不相同。

本文将重点向您介绍基于React的四种甘特图解决方案。它们基本上被分为两种类型。一类是提供基本功能，且适合小型公司的轻量级图表。另一类则是提供丰富功能，且适用于大型公司和复杂项目的方案。通过此类方案，项目经理能够确保不会放过任何一个值得重视的细节。下面，我们来具体看看这四种方案。

1. React Google Charts(https://react-google-charts.com/)

React Google Charts是一个包装器(wrapper)，它可以让您使用由Google开发的大量图表。此类甘特图使用的是SVG(Scalable Vector Graphics，可缩放矢量图形)渲染。虽然其功能非常基础，但是您可以据此来获悉并跟踪项目的整体状态，以及各个子任务涉及的一切。Google通过提供此工具，既可以显示任务的持续时间，又可以展示其开始与结束日期。此外，将鼠标悬停在某个任务上时，您还能够获悉一些其他方面的相关信息。根据图表配置的不同，这些信息可以包括：完成百分比、持续时间、以及用到的资源等。此外，该工具的提示也有助于定义特定的任务是否处在关键的路径上。

通过使用箭头，它可以显示不同任务之间的依赖关系。当然，您也可以使用不显示任何依赖项的模式。同时，其分组功能可以使您将相似的任务组合到一起。“关键路径”是所有甘特图的必备功能。在此方面，Google可以为您定义那些对于项目时间影响最大的任务。

值得一提的是，Google甘特图的样式是可调的，您可以更改那些用来标记任务和轨迹之间依赖关系的箭头外观。此外，Google甘特图也提供了那些创建轻巧、整洁且美观的图表所需的几乎所有功能。总之，如果您想构建一个使用多种不同图表的Web应用，并使其轻巧且功能齐全的话，那么React Google Charts绝对是您的不二选择。

2. Frappe Gantt React(https://www.npmjs.com/package/frappe-gantt-react)

Frappe Gantt React也是一个包装器，它允许用户使用MIT许可证下的Frappe甘特图发行版。作为一个简单轻巧的开源JavaScript甘特图，它具有拖放、调整大小、创建依赖项、以及时间刻度等功能。您可以用它来创建任务，并将其拖到时间轴上，或通过调整大小来更改持续的时间。通过单击某项特定的任务，您也可以获悉诸如：持续时间和当前进度等，某些其他信息。

该方案能够按照季度、月、周、天、半天，提供查看模式。通过事件监听器，您可以定义自己的应用将如何针对用户的某项操作做出何种反应。而通过在弹出窗口中使用自定义的HTML，您也可以修改该工具提示中所显示的信息格式。目前，该方案对外提供的功能列表较为保守，因此，如果您对甘特图的功能要求不高的话，则可以使用这款极简的工具。

在了解了只提供基本功能的甘特图方案之后，下面我们再来看看两个能够满足苛刻用户需求的方案。

3. DHTMLX Gantt(https://dhtmlx.com/docs/products/dhtmlxGantt/)

作为一款功能齐全的甘特图工具，DHTMLX Gantt能够实现跨浏览器和平台的应用。它能够完全自定义各种图表，其灵活的API也能够方便每个元素的配置。

您可以自定义从任务栏到网格结构的所有内容。使用其缩放功能，以及在月、日和小时之间灵活的切换，您可以更专注于项目的某个特定部分。鉴于基线对于确保按时完成任务的重要性，您可以使用自定义基线，来标记项目的初始计划，并将其与项目的当前状态进行比较。同时，它的自动计划功能，可以让您避免手动进行更改，而将所有需要的更改都自动应用于计划之中。当然，如果任务的结束日期需要跟踪变更的话，那么此功能也会更新任务的开始日期。

DHTMLX Gantt的资源分配功能可以让用户实施各种高级管理功能。您可以在资源使用图、直方图和资源日历的帮助下，为各项任务合理地分配资源，并跟踪其工作负荷。

上文提到的关键路径方法，不但可以显著地简化项目工作，也可以定义确定项目总体工期的任务顺序。对此，您可能需要添加一些自定义的内容。例如：通过一个S曲线来显示项目的进度。除了可以在React项目中使用甘特图之外，您还可以通过该工具，从与Vue.js、Angular、jQuery、Laravel、Node.js、以及ASP.NET等服务器端技术的集成中受益。

目前，DHTMLX Gantt还在持续迭代改进中，其功能也会越来越丰富。如果您想了解更多其相关信息的话，请访问该项目的主页，以及它在GitHub上的demo(https://github.com/DHTMLX/react-gantt-demo)。

4. React Gantt by Bryntum(https://www.react-gantt.com/)

该React甘特图工具由Bryntum公司开发。该公司以高质量的Ext JS框架插件而闻名。其调度引擎是从头开始构建的，具有出色的性能，被称为Chronograph。而它的异步重调度功能则可以处理任意数量的任务。在移动了任务之后，Bryntum会将生成的变更集放到适当的位置，以便用户跟踪某个变更是如何轻松地影响到其他变更的。

目前，Bryntum的开发人员已经实现了，用户在可能进行有效项目管理过程中的所有功能。其中包括：通过拖放支持，允许用户使用鼠标或触摸设备，来创建、调整任务窗口的大小;以及以编程的方式，验证编辑动作，以避免可能出现的错误，并确保提供信息的准确性。而可定制的工具提示则允许用户使用HTML定义，获悉特定任务的额外详细信息。

另外，Bryntum内置的可自定义上下文菜单，将有助于实现企业所需的某些特定功能。当然，您也可以在任何条件下，过滤出可用的任务，并更改其显示的比例。与前面提到的工具类似，Bryntum也提供了关键路径的计算。您可以使用其提前(leads)和滞后(lags)功能，来灵活地管理项目过程，并在任务之间创建各种类型的依赖关系(如：FF、FS、SF、以及SS等)。

通过该工具，您可以只需使用普通CSS，即可轻松地设置所有元素的样式，自定义行高，动态更改自定义模板，以及设置每个时间线元素的呈现。另外，通过使用PHP、Java、ASP.NET、以及其他技术，开发人员还能够实现一些服务器与数据库的集成功能。

原文标题：Top 4 Gantt Chart Solutions for React，作者：Ivan Petrenko

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】