如何在前端实现甘特图？SpreadJS两招搞定

SpreadJS v14.0正式版下载

如果一个项目由多个任务组成，而任务之间又有关联，我们该怎样准确的显示项目整体进度呢？

使用甘特图，应该是最好的方式。

甘特图，不仅能够让管理者实时有效的掌握项目进度和资源分配，同时能够加强过程的可视化管理、人员实时沟通。因此，在企业项目管理工作中被广泛应用。

由于项目管理的工作往往存在时间上的交叉。在项目开始之前，领导都会要求我们先查找可以并行的事项，并将它们安排在一起，以此实现对时间的高效利用。合理的使用甘特图，可以把每天的工作安排得当。

Excel在2010版本中就已经内置了甘特图类型，SpreadJS 作为一款高度类似Excel的纯前端表格控件，对甘特图这一特殊图表同样提供支持。

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、远光软件、苏宁易购、天弘基金等为代表的企业用户青睐。

用以下两种方式，即可在使用 SpreadJS 搭建的Web系统中实现甘特图：

方法一：SpreadJS + ECharts 组件，实现甘特图

作为一款前端开发工具，SpreadJS具备一流的框架支持及二次扩展能力，可以通过集成第三方图表组件（如ECharts）实现甘特图，效果如下图：

这里的甘特图是通过SpreadJS的浮动对象来实现的。

在 SpreadJS中，你可以给表单添加浮动对象元素，浮动对象元素会覆盖在单元格的上面显示，该对象具备强大的框架兼容能力，可采用事件机制实现数图联动，具体实现方法可以参考示例代码：EchartsWithSpreadJS。

方法二：自定义 SpreadJS 图表，实现甘特图

从 SpreadJS V13.0版本开始，通过对其图表组件自定义，即可快速实现大家所期待的甘特图：

这里的甘特图是通过SpreadJS的自定义图表组件功能来实现的。

SpreadJS内置了外观与excel高度类似的图表功能，并提供了高度灵活的自定制能力，如可自定义图表的横纵坐标轴样式、图例、图表区样式、鼠标悬停效果和行为、趋势线和误差线等，借助此功能，你能更加简单和灵活的在SpreadJS中创建一个图表。

当然，通过自定义SpreadJS图表功能实现的甘特图同样支持数图联动，具体效果请参考附件示例代码：SpreadJS甘特图。

以上两种方式，都可以用来在SpreadJS 集成的Web系统中实现甘特图。对于新接触 SpreadJS的用户，建议使用第二种方式，更加简单、扩展性更强。

SpreadJS | 下载试用

纯前端表格控件SpreadJS，可满足 .NET、Java、App 等应用程序中的 Web Excel 组件开发、数据填报、在线文档、图表公式联动、类 Excel UI 设计等业务场景，并在数据可视化、Excel 导入导出、公式引用、数据绑定、框架集成中无需大量代码开发和测试，极大降低了企业研发成本和项目交付风险。

本文转载自葡萄城

如何在前端实现甘特图？SpreadJS两招搞定相关推荐

为什么wps数字前面有撇号_表格中输入18位超长的数值后变样了? 别急! 两招搞定!...
原标题:表格中输入18位超长的数值后变样了? 别急! 两招搞定! 输入超长的数值,就会显示成奇怪的样子, 好端端的身份证号码全都乱套了,为什么? 怎么办?这就为你解答~ 错误一:输入18位数之后变为含 ...
电脑关机Matlab文件没保存,文件还没保存就关机了？别怕，两招搞定它
原标题:文件还没保存就关机了?别怕,两招搞定它大家好!我依然是你们帅气依旧的小琛哥. 大家有没有碰到过这种情况. 老板交给你一项很重要的任务! 虽然晚上十二点了,但是今天晚上必须赶出来! 结果电脑突 ...
putty远程登录不上，并行配置不正确，两招搞定
@putty登录不上,两步搞定,亲测有效场景:putty应用程序的并行配置不正确方法1: Win + R,输入"services.msc" ,点击确定就会弹出服务窗口,如下图显 ...
渐变蓝底证件照如何制作？教你两招搞定
渐变蓝底证件照如何制作?在我们的日常生活中总是会经常使用到一些证件照,比如考试报名.填写简历以及职位公示得等.不同的情况对于证件照的要求也不尽相同,有的时候需要蓝底证件照,而有的时候却需要白底的,甚至 ...
组件分享之前端组件——甘特图时间表时间线日历组件
组件分享之前端组件--甘特图时间表时间线日历组件背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组 ...
51php服务器稳不稳定,百度经验：两步搞定PHP-FPM优化，让服务器更平稳
原标题:百度经验:两步搞定PHP-FPM优化,让服务器更平稳导言:Web服务器的CPU指标和MEM指标异常,不稳定?可能是PHP-FPM进程重启机制的问题导致的,一同和百度外卖探索下如何优化吧.作者 ...
免费GIF动图制作，简简单单一招搞定
免费的GIF动图制作,教你一招搞定,下面就给大家介绍一款好用的gif制作工具,在线一键制作gif动图. 我们在网络聊天中,表情包已经是不可分割的一部分,也是沟通的种的一个桥梁.详细我们每个人的手机里都 ...
两小时搞定负载均衡51CTO技术沙龙现场视频2
田逸田老师幽默风趣的案例讲解 7月5日下午,51CTO技术社区主办的"两小时搞定负载均衡全真实战案例解析"活动圆满结束.参加沙龙的100多位用户和嘉宾相聚近三个小时,生动的课程. ...
两步搞定Hyperledger主打区块链解决方案Fabric
区块链技术发展至今,形成了公有链和联盟链两种主流技术平台. 公有链面向大众,用户可以匿名参与,非常方便,账本数据也公开,加上强大的智能合约,因此公有链极大地促进了区块链概念和技术的普及,比如比特币. ...

如何在前端实现甘特图？SpreadJS两招搞定

如何在前端实现甘特图？SpreadJS两招搞定相关推荐

最新文章

热门文章