美文网首页
一起来了解React的四种优秀甘特图方案(上篇)

一起来了解React的四种优秀甘特图方案(上篇)

作者: 嗯哼_9793 | 来源:发表于2020-04-08 12:35 被阅读0次

本文将重点向您介绍基于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领取海量学习资料进行学习。

相关文章

  • 一起来了解React的四种优秀甘特图方案(上篇)

    本文将重点向您介绍基于React的四种甘特图解决方案。它们基本上被分为两种类型。一类是提供基本功能,且适合小型公司...

  • PPT中的甘特图,你知多少?

    前几天有用户在会员群里面,问起甘特图的用法以及做法。 那么啥是甘特图,以及怎么用甘特图呢? 一、了解甘特图的作用 ...

  • 什么是甘特图

    再造《优秀的时间管理和项目管理工具》精品系列:让你了解更多优秀软件,并且学会熟练地使用它们。 甘特图(Gantt ...

  • React_项目基本目录(详细解读)

    我们今天就来深入了解React。 童鞋们在上篇文章中已经初步认识了React ,并且安装并启动成功了,但很多...

  • Ant Modal的封装二

    前言 上篇实现了一个Ant Model的封装方案,虽然能work,但代码有点丑不够美观。本篇结合了React的高阶...

  • react-native 入门Demo-- weather(天气

    react-native版本: 0.57   reactnative是一个优秀的跨平台开发解决方案, 但是无奈跟新...

  • react-router

    React Router 是完整的 React 路由解决方案 import React from 'react' ...

  • ScrollView嵌套ListView问题

    四种方案解决ScrollView嵌套ListView问题 “四种方案解决ScrollView嵌套ListView问...

  • React 学习总结(二)-组件

    上篇文章介绍了有关React基本知识,这篇文章主要介绍React的组件部分,组件即封装起来的具有独立功能的UI部件...

  • 甘特图使用说明

    一、甘特图功能操作视频 二、甘特图界面 甘特图界面默认展示甘特图模板,通过编辑功能来修改甘特图内容,参照图2.1。...

网友评论

      本文标题:一起来了解React的四种优秀甘特图方案(上篇)

      本文链接:https://www.haomeiwen.com/subject/ujzzphtx.html