一起来了解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，您也可以修改该工具提示中所显示的信息格式。目前，该方案对外提供的功能列表较为保守，因此，如果您对甘特图的功能要求不高的话，则可以使用这款极简的工具。

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

最后，小编分类整理了许多java进阶学习材料和BAT面试给热爱IT行业的你，如果需要资料的请转发此文章后再私聊小编回复【java】就能领取2019年java进阶学习资料和BAT面试题以及《Effective Java》（第3版）电子版书籍。也可以加群：712263501领取海量学习资料进行学习。