5+ Web项目的最佳免费jQuery和JavaScript动态甘特图

本文概述

• 5. jsGanttImproved
• 4. jQuery Gantt
• 3. jQuery GanttView
• 2. Twproject Gantt
• 1. DHTMLX甘特图
• jQuery Gantt

如果你在项目管理中工作, 或者职位涉及计划任务和资源, 那么甘特图图表可能对你来说并不陌生。使用甘特图, 你将可以非常清楚地查看所有计划的活动, 每个活动计划持续多长时间, 活动与其他活动重叠以及每个资源的放置位置。这些图表将帮助你弄清各种任务之间是如何相互关联的, 此外还需要依靠完成另一个任务来实现特定的目标。如果你是Web开发人员, 并且正在寻找具有JavaScript的超棒可嵌入甘特图组件, 请不要再搜索了, 我确定你会在此顶部找到所需的东西。

享受我们为你的Web应用程序精选的5种最好的免费Dynamic Gantt组件。

5. jsGanttImproved

Github

一个功能齐全的甘特图组件, 完全用Javascript, CSS和AJAX构建。它是轻量级的, 不需要外部库或其他图像。该项目的主要功能包括：

• 任务和可折叠任务组。
• 依赖关系。
• 任务完成。
• 任务样式。
• 里程碑。
• 资源。
• 动态加载任务。
• 格式的动态更改：小时, 天, 周, 月, 季度。
• 从XML加载甘特
  • 来自外部文件(包括对MS Project XML文件的实验性支持)。
  • 来自JavaScript字符串。
• 支持国际化(可以覆盖所有硬编码字符串)

4. jQuery Gantt

Github

jQuery Gantt Chart是一个简单的图表, 将gantt功能实现为jQuery组件。它能够：

• 读取json数据
• 分页结果
• 为每个任务显示不同的颜色
• 显示简短描述作为提示
• 纪念假期

插件已经过测试, 应该可以在以下环境中工作：

• Firefox 4+
• 铬13+
• Safari 5+
• 歌剧9+
• IE 8+

该插件是根据MIT许可分发的。

3. jQuery GanttView

Github

jQuery.ganttView插件是一个非常轻量级的插件, 用于以纯HTML格式创建甘特图, 不需要任何矢量图形或图像。该插件支持拖动和调整甘特图块和回调的大小, 以捕获更新的数据。

该插件取决于以下库：

• jQuery 1.4或更高版本(显然)
• jQuery-UI 1.8或更高版本
• date.js

目前, 该插件已经过测试, 并且可以在FF 3.5 +, Chrome 5 +, Safari 4 +, IE8 +中运行。 IE7中有一些小问题, 我什至没有尝试在IE6中使用它。如果你在任何版本的Internet Explorer上遇到任何问题, 并且想提供CSS修复, 请访问存储库并创建请求请求, 一些人要求获得IE6支持。

2. Twproject Gantt

Github |文献资料

Twproject Gantt编辑器最初是用于创建和共享Gantts的免费在线工具, 但是它们提供了用JavaScript编写并基于jQuery构建的Gantt组件, 以创建Gantts, 任务树, 依赖项, 并以JSON格式导出结果数据。

• 就地编辑。
• 拖放。
• 缩放。
• 做/撤消。
• 多个依赖项。
• 关键路径。
• 全面编辑。
• 日期。
• 捷径。
• CSS皮肤。
• 里程碑。
• 多个浏览器。
• 资源编辑。
• 多个作业。
• 以JSON格式导出数据调整大小并滚动SVG平滑绘图, 便于打印。

尽管甘特浏览器(因此为只读)可以很容易地打包为单个组件, 但是甘特编辑器是一种更为复杂的对象, 因此, 作者更喜欢将其视为嵌入式jQuery应用程序, 而不仅仅是插件。

1. DHTMLX甘特图

说明文件|演示版

dhtmlxGantt提供了丰富而灵活的JavaScript API, 可让你配置甘特图的每个元素：自定义时间刻度, 定义网格结构, 更改任务栏的颜色, 向任务栏添加文本或任何自定义HTML, 定义依赖项(任务之间的关系)等等。任务编辑表单(灯箱)也可以自定义为包括新的自定义字段。该库的主要功能是：

• 可编辑或只读的甘特图
• 使用JavaScript API完全控制
• 跨浏览器：IE, FF, Chrome, Safari, Opera
• 键盘导航
• 支持触摸设备：iOS, Android
• jQuery整合
• 全屏模式
• 从XML, JSON载入
• 丰富的拖放行为来管理任务
• 能够在时间轴区域标记特定时间
• 工具提示
• 关键路径计算(仅限PRO)
• 向后计划
• 可选树状视图
• 可自定义的任务编辑表单(灯箱)
• 任务分组(仅限PRO)
• 支持基准, 截止日期和其他自定义元素(仅PRO)
• 三种任务类型：项目(仅PRO), 任务, 里程碑(仅PRO)
• 完成任务的着色百分比
• 自动计划(仅PRO)
• 支持计划外任务
• 依赖箭头
• 用于管理单个任务的可编辑性/只读模式的简单API
• 从MS Project导出/导入
• 智能渲染
• 撤消/重做功能
• 辅助功能

甘特图可以轻松地与jQuery, NodeJS, Angular, Angular 2框架一起使用。作为完全的客户端解决方案, 你可以将其与任何服务器端技术(包括PHP(Laravel, Slim和其他php框架), ASP.NET, Ruby on Rails等)一起使用。 DHTMLX Gantt图表组件支持所有主要浏览器-特别是Google Chrome, Firefox, Internet Explorer(8 +), Microsoft Edge和Safari。根据GPL许可, 此组件是免费的。

jQuery Gantt

Github

jQuery Gantt是用于创建甘特图的有用的jQuery插件。该插件的主要功能是：

• 可本地化
• 易于配置
• 轻量级(5KB压缩文件)
• 适用于所有主要浏览器, 包括IE11 +

如果你知道另一个用JavaScript编写的, 用于Web应用程序的很棒的免费DHTMLX Gantt Chart组件, 请在注释框中与社区共享。