介绍
甘特图又名横道图，是项目管理中比较流行的一种工具。在图表的左侧显示任务列表，顶部显示合适的时间刻度，每个任务由一个条形表示，条形的位置和长度反映了任务的开始日期、持续时间和结束日期，使项目管理者一目了然。
技术方案
1. 调研
调研了以下几种方案
- 方案 1：vue-ganttastic github456
- 方案 2：gantt-task-react github692
- 方案 3：NgxGantt github195
- 方案 4：Frappe Gantt github4.1k
- 方案 5：Dhtmlx Gantt
- 方案 6：qiu-gantt
- 方案 7：mermaid
2. 方案 1：vue-ganttastic
Vue Ganttastic 是一个基于Vue 3的简单、交互式且高度可定制的甘特图组件。它可以在Web应用中展示任务和进度，支持拖拽、缩放和事件处理等交互特性。其具有以下特点：
支持 Vue 3 版本，提供了可用的TypeScript类型声明。 支持拖拽、缩放和事件处理等交互特性。 提供了多种配置项使用户可以自定义样式、数据源等。 支持多种任务类型，包括普通任务、里程碑、汇总任务等。 提供了丰富的事件处理函数，例如onTaskSelected、onTaskMoved等，方便用户对任务的操作进行响应。 代码简洁易懂，易于定制和扩展。
2.1 安装
npm install vue-ganttastic
2.2 案例
3. 方案 2：gantt-task-react
gantt-task-react是一个基于React和TypeScript的交互式甘特图组件。它允许用户快速创建美观、可交互的甘特图，并提供了各种配置选项，使得开发者可以自定义甘特图的背景色、时间刻度、任务栏等样式。其具有以下特点：
基于React + TypeScript 开发，易于集成到现有项目中。 支持拖拽、缩放、滚动等交互操作，并提供了多种事件回调函数，便于开发者处理用户的操作行为。 可以自定义任务栏的背景色、文本、进度条样式等，支持多种任务类型（如里程碑、汇总任务等）。 提供了多种适配器（adapter）插件，可以与不同的数据源（如本地数据、RESTful API接口）进行集成。
3.1 安装
npm install gantt-task-react
3.2 案例
案例演示open in new window githubopen in new window
4. 方案 3：NgxGantt Angular
NgxGantt 是一款基于 Angular 框架的甘特图组件，支持多种视图展示并支持多种高级的特性，能快速的帮助开发者搭建自己的甘特图应用。其具有以下特点：
5 种视图（日、周、月、季、年） 任务分组展示 树形结构数据展示并支持异步加载 任务前后置依赖关联及展示 任务拖拽更改时间 表格自定义 滚动加载数据 导出为图片 可定制化开发
4.1 安装
npm install ngx-gantt
4.2 案例
案例演示open in new window githubopen in new window
5. 方案 4：Frappe Gantt Js
Frappe Gantt是一个用于生成甘特图的JavaScript库，支持交互式绘制、拖拽、缩放、任务依赖关系和时间刻度等功能。其具有以下特点：
交互式操作：可通过拖动、缩放等方式对甘特图进行操作，以便更好地展现项目进度； 任务依赖关系：支持设置任务之间的依赖关系，以便更好地管理项目进度； 时间刻度：支持按天、周、月等不同时间跨度进行刻度展示，方便用户选择合适的时间范围； 美观易用：采用现代UI设计，支持多种样式和主题，易于使用和集成到现有项目中；同时也支持多语言功能，方便国际化应用。
5.1 安装
npm install frappe-gantt
5.2 案例
案例演示open in new window githubopen in new window
6. 方案 5：Dhtmlx Gantt 收费Js
DHTMLX Gantt 是一个收费的 JavaScript 甘特图库，可以在图表中说明和管理项目进度。其具有以下特点：
易于使用：使用dhtmlxGantt可创建可视化的交互式甘特图，使项目进度变得更加清晰易懂。 可自定义：dhtmlxGantt提供丰富的配置选项，可以自定义甘特图的外观和行为。 与其他库兼容性良好：dhtmlxGantt可以与其他JavaScript库进行集成，如React、Angular、Vue等。 可高度定制：这个库提供了各种扩展和插件，开发者可以根据需要进行高度定制。 多种导入和导出格式：dhtmlxGantt支持多种格式来导入和导出项目计划，便于用户进行数据转换和分享。
6.1 安装
npm install dhtmlx-gantt
6.2 案例
案例演示open in new windowgithubopen in new window
7. 方案 6：qiu-gantt Vue
vue2开发，Y轴拥有虚拟列表；时间条可拉伸可拖拽；遇到时间重叠的时间块会自行换行，防止重叠；带自定义的右键下拉菜单组件
7.1 安装
npm i wyg-gantt --save
7.2 案例
8. 方案 7：mermaid md方案
Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
Doc-Rot 是 Mermaid 致力于解决的一个难题。
绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。
Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。 你可以访问 教程 来查看 Live Editor 的视频教程，也可以查看 Mermaid 的集成和使用 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。