【.com快译】React受到了Web开发爱好者和重视Web应用高性能和可靠性的大型企业的青睐，得到了广泛的应用。目前业界出现了各种复杂程度不一的React组件，功能各不相同。本文将重点向大家介绍四种基于React的甘特图解决方案。它们基本上分为两种类型。一类是提供基本功能的轻量级图表，适用于小型公司。另一类是提供丰富功能的解决方案，适用于大公司和复杂的项目。通过这样的方案，项目经理可以确保不遗漏任何值得关注的细节。让我们仔细看看这四个选项。1.ReactGoogleCharts(https://react-google-charts.com/)ReactGoogleCharts是一个包装器（wrapper），它允许你使用大量由谷歌开发的图表。这类甘特图是使用SVG（ScalableVectorGraphics，可缩放矢量图形）渲染的。虽然它的功能非常基本，但您可以使用它来了解和跟踪项目的整体状态，以及各个子任务中涉及的一切。Google通过显示任务的持续时间及其开始和结束日期来提供此工具。此外，当你将鼠标悬停在一个任务上时，你还可以获得一些其他的相关信息。根据图表配置，此信息可以包括：完成百分比、持续时间、使用的资源等。此外，工具提示有助于定义特定任务是否在关键路径上。通过使用箭头，它可以显示不同任务之间的依赖关系。当然，您也可以使用不显示任何依赖关系的模式。同时，它的分组功能允许您将相似的任务分组在一起。“关键路径”是所有甘特图必备的功能。在这方面，谷歌可以为你定义那些对项目时间影响最大??的任务。值得一提的是，Google的甘特图是可样式化的，您可以更改标记任务和轨道之间依赖关系的箭头的外观。此外，GoogleGanttChart还提供了创建轻巧、干净、漂亮的图表所需的几乎所有功能。总之，如果你想构建一个使用多种不同图表的Web应用程序，并使其轻量级且功能齐全，那么ReactGoogleCharts绝对是你的最佳选择。2.FrappeGanttReact(https://www.npmjs.com/package/frappe-gantt-react)FrappeGanttReact也是一个包装器，允许用户在MIT许可下使用FrappeGantt分布。作为一个简单轻量级的开源JavaScript甘特图，它具有拖放、调整大小、创建依赖关系和时间刻度等功能。您可以使用它来创建任务，将它们拖到时间线上，或通过调整它们的大小来更改它们的持续时间。通过单击特定任务，您还可以获得一些额外信息，例如持续时间和当前进度。程序可以提供按季、月、周、日、半天的观看模式。事件侦听器允许您定义您的应用程序将如何对用户操作做出反应。您还可以通过在弹出窗口中使用自定义HTML来修改工具提示中显示的信息的格式。目前程序提供的功能列表比较保守，所以如果你对甘特图的功能要求不高，可以使用这款极简工具。了解了仅提供基本功能的甘特图解决方案后，我们再来看看两种能够满足苛刻用户需求的解决方案。3.DHTMLXGantt(https://dhtmlx.com/docs/products/dhtmlxGantt/)作为一个全功能的甘特图工具，DHTMLXGantt可以实现跨浏览器和平台的应用。它可以完全自定义各种图表，其灵活的API也可以方便地配置每个元素。您可以自定义从任务栏到网格结构的所有内容。使用其缩放功能以及月、日和小时之间的灵活切换，您可以更专注于项目的特定部分。鉴于基线对于确保按时完成的重要性，您可以使用自定义基线来标记项目的初始计划并将其与项目的当前状态进行比较。同时，其自动计划功能使您可以避免手动更改并自动将所有需要的更改应用到计划中。当然，如果任务的结束日期需要跟踪变化，这个函数也会更新任务的开始日期。DHTMLXGantt的资源分配功能允许用户实现各种高级管理功能。借助资源使用图、直方图和资源日历，您可以将资源正确分配给任务并跟踪它们的工作量。上面提到的关键路径方法不仅大大简化了项目工作，而且还定义了决定整个项目持续时间的任务顺序。为此，您可能需要添加一些自定义内容。例如：通过一条S曲线来展示项目的进度。除了能够在React项目中使用甘特图之外，您还可以通过此工具从与服务器端技术（如Vue.js、Angular、jQuery、Laravel、Node.js和ASP.NET）的集成中受益。目前DHTMLXGantt还在不断迭代完善中，功能会越来越丰富。如果您想了解更多信息，请访问该项目的主页及其在GitHub上的演示(https://github.com/DHTMLX/react-gantt-demo)。4.Bryntum的ReactGantt(https://www.react-gantt.com/)ReactGantt图表工具由Bryntum开发。该公司以高质量的ExtJS框架插件而闻名。它的调度引擎是从头开始构建的，具有出色的性能，被称为Chronograph。并且其异步重新调度功能可以处理任意数量的任务。移动任务后，Bryntum将生成的变更集放在适当的位置，以便用户可以跟踪变更影响其他变更的难易程度。目前，Bryntum的开发人员已经实现了用户在有效项目管理过程中可能实现的所有功能。其中包括：允许用户使用鼠标或触摸设备通过拖放支持创建任务窗口并调整其大小；并以编程方式验证编辑操作以避免可能的错误并确保所提供信息的准确性。可自定义的工具提示允许用户使用HTML定义来获取有关特定任务的更多详细信息。此外，Bryntum内置的可自定义上下文菜单将有助于实现企业所需的一些特定功能。当然，您也可以过滤掉可用的任务，并在任何情况下更改其显示比例。与前面提到的工具类似，Bryntum也提供关键路径计算。您可以使用它的超前和滞后功能来灵活地管理项目进程，并在任务之间创建各种类型的依赖关系（例如：FF、FS、SF和SS等）。该工具允许您轻松地设置所有元素的样式、自定义行高、动态更改自定义模板以及仅使用纯CSS设置每个时间轴元素的呈现。此外，通过使用PHP、Java、ASP.NET等技术，开发者还可以实现一些服务器和数据库的集成功能。原标题：Top4GanttChartSolutionsforReact，作者：IvanPetrenko
