大家好，我是Echa。

上周有部分友友们私信小编问道：用程序怎么实现甘特计划图、甘特进度图、甘特载负图这些呢？友友们知识渊博问到问题都这么专业，幸好小编之前在项目开发中这些都有接触过，明白这些甘特图真正含义。为了考虑到部分友友不太了解甘特图是什么，先做个甘特图简单的介绍。

今天小编就分享15个优秀的甘特图开源项目，希望对友友们有所帮助，同时祝福友友们的财富像甘特图一样一直涨下去。

全文大纲

1. 甘特图介绍及特点
2. gantt-task-react
3. Vue Ganttastic
4. NgxGantt
5. Frappe Gantt
6. Dhtmlx Gantt
7. cloud-engine.miniproductionsystem
8. wyg-gantt
9. qiu-gantt
10. javascriptgantt_chart
11. Vue-Gantt-chart
12. react-gantt-table
13. jz-gantt
14. jQuery.ganttchart
15. ganttproject
16. mermaid

甘特图介绍及特点

甘特图（Gantt chart）是条状图的一种流行类型，显示项目、进度以及其他与时间相关的系统进展的内在关系随着时间进展的情况，是由亨利·甘特 (Henry Laurence Gantt) 于1910年开发出。在项目管理中，甘特图显示项目的终端元素的开始和结束，概要元素或终端元素的依赖关系，管理者可透过甘特图，监控项目当前各任务的进度。若想要同时显示多个不同的项目开始与结束的时间，就可以利用甘特图呈现，监控项目当前各任务的进度。

甘特图包含以下三个含义：

• 以图形或表格的形式显示活动；
• 通用的显示进度的方法；
• 构造时含日历天和持续时间，不将周末节假算在进度内。

简单、醒目、便于编制，在管理中广泛应用。

甘特图按内容不同，分为计划图表、负荷图表、机器闲置图表、人员闲置图表和进度表五种形式。

特点

甘特图的特点是突出了生产管理中最重要的因素— 时间，它的作用表现在三个方面：

• 计划产量与计划时间的对应关系。
• 每日的实际产量与预定计划产量的对比关系。
• 一定时间内实际累计产量与同时期计划累计产量的对比关系。

gantt-task-react

在线演示：https://matematuk.github.io/gantt-task-react/

Github：https://github.com/MaTeMaTuK/gantt-task-react

介绍

gantt-task-react是一个基于React和TypeScript的交互式甘特图组件。它允许用户快速创建美观、可交互的甘特图，并提供了各种配置选项，使得开发者可以自定义甘特图的背景色、时间刻度、任务栏等样式。其具有以下特点：

• 基于React + TypeScript 开发，易于集成到现有项目中。
• 支持拖拽、缩放、滚动等交互操作，并提供了多种事件回调函数，便于开发者处理用户的操作行为。
• 可以自定义任务栏的背景色、文本、进度条样式等，支持多种任务类型（如里程碑、汇总任务等）。
• 提供了多种适配器（adapter）插件，可以与不同的数据源（如本地数据、RESTful API接口）进行集成。

可以通过以下步骤来使用 gantt-task-react：

1. 在终端中导航到项目目录并运行以下命令安装gantt-task-react：

npm install gantt-task-react

2. 在需要使用 gantt-task-react 的组件中引入Gantt组件：

import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';import "gantt-task-react/dist/index.css";let tasks: Task[] = [    {      start: new Date(2020, 1, 1),      end: new Date(2020, 1, 2),      name: 'Idea',      id: 'Task 0',      type:'task',      progress: 45,      isDisabled: true,      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },    },    ...];<Gantt tasks={tasks} />

3. 在Gantt组件中添加需要的配置项

<Gantt  tasks={tasks}  viewMode={view}  onDateChange={onTaskChange}  onTaskDelete={onTaskDelete}  onProgressChange={onProgressChange}  onDoubleClick={onDblClick}  onClick={onClick}/>

以上代码将在 MyComponent 中创建一个简单的甘特图，并设置了一些常用的配置项。

效果图：

Vue Ganttastic

在线演示：https://zunnzunn.github.io/vue-ganttastic/

Github：https://github.com/zunnzunn/vue-ganttastic

介绍

Vue Ganttastic 是一个基于Vue 3的简单、交互式且高度可定制的甘特图组件。它可以在Web应用中展示任务和进度，支持拖拽、缩放和事件处理等交互特性。其具有以下特点：

• 支持 Vue 3 版本，提供了可用的TypeScript类型声明。
• 支持拖拽、缩放和事件处理等交互特性。
• 提供了多种配置项使用户可以自定义样式、数据源等。
• 支持多种任务类型，包括普通任务、里程碑、汇总任务等。
• 提供了丰富的事件处理函数，例如onTaskSelected、onTaskMoved等，方便用户对任务的操作进行响应。
• 代码简洁易懂，易于定制和扩展。

可以通过以下步骤来使用 Vue Ganttastic：

1. 在终端中导航到Vue项目目录并运行以下命令安装Vue Ganttastic：

npm install vue-ganttastic

2. 在需要使用Vue Ganttastic的组件中引入GanttChart组件：

<template>  <div id="app">    <GanttChart :tasks="tasks" />  </div></template><script>import { defineComponent } from 'vue';import GanttChart from 'vue-ganttastic';export default defineComponent({  name: 'App',  components: {    GanttChart,  },  data() {    return {      tasks: [        {          id: 1,          label: 'Task 1',          start: '2023-04-12',          end: '2023-04-16',        },        {          id: 2,          label: 'Task 2',          start: '2023-04-14',          end: '2023-04-18',        },      ],    };  },});</script>

3. 在GanttChart组件中添加需要的配置项

<GanttChart  :tasks="tasks"  :chart-start-date="new Date('2023-04-13')"  :chart-end-date="new Date('2023-04-20')"  :bar-style="{ backgroundColor: '#66ccff' }"  :is-vertical="false"  :day-class-factory="dayClassFactory"/>

以上代码将在App组件中创建一个简单的甘特图，并设置了一些常用的配置项。

效果图：

NgxGantt

在线演示：http://gantt.ngnice.com/components/basic

Github： https://github.com/worktile/ngx-gantt

介绍

NgxGantt 是一款基于 Angular 框架的甘特图组件，支持多种视图展示并支持多种高级的特性，能快速的帮助开发者搭建自己的甘特图应用。其具有以下特点：

• 5 种视图（日、周、月、季、年）
• 任务分组展示
• 树形结构数据展示并支持异步加载
• 任务前后置依赖关联及展示
• 任务拖拽更改时间
• 表格自定义
• 滚动加载数据
• 导出为图片
• 可定制化开发

可以通过以下步骤来使用 ngx-gantt：

1. 在终端中导航到Vue项目目录并运行以下命令安装 ngx-gantt：

npm install ngx-gantt

2. 在"app.module.ts"中引入和注册GanttModule

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { GanttModule } from 'ngx-gantt';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    GanttModule,  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

3. 在组件中使用<ngx-gantt>标签，并传入需要展示的任务数据

<ngx-gantt [ganttOptions]="options" [tasks]="tasks"></ngx-gantt>

其中，tasks 是一个任务列表（数组），每个任务对象包含任务名、开始时间、结束时间、进度等属性；ganttOptions 是一个可选的配置对象，用于自定义甘特图的外观和行为，例如：设置语言、设置日期格式、设置样式风格等。

效果图：

Frappe Gantt

在线演示： https://frappe.io/gantt

Github： https://github.com/frappe/gantt

介绍

Frappe Gantt是一个用于生成甘特图的JavaScript库，支持交互式绘制、拖拽、缩放、任务依赖关系和时间刻度等功能。其具有以下特点：

• 交互式操作：可通过拖动、缩放等方式对甘特图进行操作，以便更好地展现项目进度；
• 任务依赖关系：支持设置任务之间的依赖关系，以便更好地管理项目进度；
• 时间刻度：支持按天、周、月等不同时间跨度进行刻度展示，方便用户选择合适的时间范围；
• 美观易用：采用现代UI设计，支持多种样式和主题，易于使用和集成到现有项目中；同时也支持多语言功能，方便国际化应用。

可以通过以下步骤来使用 Frappe Gantt：

1. 在终端中导航到项目目录并运行以下命令安装Frappe Gantt：

npm install frappe-gantt

2. 在JavaScript文件中引入Frappe Gantt，并创建容器元素、配置甘特图数据、初始化Gantt对象，并将其附加到容器元素上

<div id="gantt"></div>

import Gantt from 'frappe-gantt';const tasks = [  {    id: 'task-1',    name: 'Task 1',    start: '2023-04-12',    end: '2023-05-12'  },  {    id: 'task-2',    name: 'Task 2',    start: '2023-05-12',    end: '2023-06-12',    dependencies: 'task-1'  }];const gantt = new Gantt('#gantt', tasks);

需要注意的是，在使用 Frappe Gantt 时，还需要在项目中引入相关样式和语言包等资源，以便正常使用。

效果图：

Dhtmlx Gantt

在线演示： https://dhtmlx.com/docs/products/dhtmlxGantt/

Github： https://github.com/DHTMLX/gantt

介绍

DHTMLX Gantt 是一个开源的 JavaScript 甘特图库，可以在图表中说明和管理项目进度。其具有以下特点：

• 易于使用：使用dhtmlxGantt可创建可视化的交互式甘特图，使项目进度变得更加清晰易懂。
• 可自定义：dhtmlxGantt提供丰富的配置选项，可以自定义甘特图的外观和行为。
• 与其他库兼容性良好：dhtmlxGantt可以与其他JavaScript库进行集成，如React、Angular、Vue等。
• 可高度定制：这个库提供了各种扩展和插件，开发者可以根据需要进行高度定制。
• 多种导入和导出格式：dhtmlxGantt支持多种格式来导入和导出项目计划，便于用户进行数据转换和分享。

dhtmlxGantt 提供了免费版和付费版，使用步骤如下：

1. 在终端中导航到项目目录并运行以下命令安装 dhtmlxGantt 插件

npm install dhtmlx-gantt

2. 在JavaScript文件中初始化dhtmlxGantt对象并配置相关参数

<div id="gantt_here" style='width:1000px; height:450px;'></div>

import 'dhtmlx-gantt';import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';const tasks = {  data: [    {      id: 1,      text: 'Project #1',      start_date: '2023-04-12',      duration: 18,      progress: 0.4    },    {      id: 2,      text: 'Task #1',      start_date: '2023-04-12',      duration: 8,      parent: 1,      progress: 0.6    }  ],  links: [    {      id: 1,      source: 1,      target: 2,      type: '1'    }  ]};gantt.init('gantt_here');gantt.parse(tasks);

以上代码将在id为"gantt_here"的div中创建一个简单的甘特图。

效果图：

cloud-engine.miniproductionsystem

Gitee： https://gitee.com/mtpas/cloud-engine.miniproductionsystem

介绍

本系统糅合了ERP和MES的功能；支持从订单 -> 排单 -> 生产跟踪 -> 装配 -> 发货，一系列的业务流程闭环操作。

技术栈

后端：采用.NET Core平台，ASP.NET Core3.1，C#语言（使用反射等高级技术），Entity FrameworkCore（数据库ORM框架）。 前端：Vue2.x全家桶+Ant Design Vue，其中集成常用组件，力求方便项目开发。

效果图：

wyg-gantt

Gitee： https://gitee.com/wangyigang/gantt-chart-encapsulation

介绍

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关Markdown Oper Preview to the Side系随着时间进展的情况。

已支持el-table参数及事件列表

:fit="fit"    :size="size"    :border="border"    :data="selfData"    :stripe="stripe"    :height="height"    :row-key="rowKey"    :row-style="rowStyle"    :class="dateTypeClass"    :cell-style="cellStyle"    :max-height="maxHeight"    :tree-props="selfProps"    :current-row-key="rowKey"    :row-class-name="rowClassName"    :cell-class-name="cellClassName"    :expand-row-keys="expandRowKeys"    :header-row-style="headerRowStyle"    :header-cell-style="headerCellStyle"    :default-expand-all="defaultExpandAll"    :header-row-class-name="headerRowClassName"    :highlight-current-row="highlightCurrentRow"    :header-cell-class-name="headerCellClassName"    :currentPage="pages.currentPage"    :pageSizes="pages.pageSizes"    :pageSize="pages.pageSize"    :total="pages.total"        :colorArr='colorArr'    :colorLower='colorLower'    :bgOne='bg_one'    :bgTwo="bg_two"    :bgThree="bg_three"    :bgFour="bg_four"    :bgLower="bg_lower"    @header-contextmenu="handleHeaderContextMenu"    @selection-change="handleSelectionChange"    @row-contextmenu="handleRowContextMenu"    @current-change="handleCurrentChange"    @cell-mouse-enter="handleMouseEnter"    @cell-mouse-leave="handleMouseLeave"    @expand-change="handleExpandChange"    @filter-change="handleFilterChange"    @cell-dblclick="handleCellDbClick"    @header-click="handleHeaderClick"    @row-dblclick="handleRowDbClick"    @sort-change="handleSortChange"    @cell-click="handleCellClick"    @select-all="handleSelectAll"    @row-click="handleRowClick"    @select="handleSelect"    @rowClick="rowClick"    @current-change-page="currentChange"

效果图：

qiu-gantt

Gitee： https://gitee.com/firechildren/qiu-gantt

介绍

vue2开发，Y轴拥有虚拟列表；时间条可拉伸可拖拽；遇到时间重叠的时间块会自行换行，防止重叠；带自定义的右键下拉菜单组件

文件结构说明

src--    common -- 一些通用的scss 和 js    components -- 通用组件包        context-menu -- 右键下拉菜单        gantt -- 甘特图通用组件    fake-data        airPlaneData.js -- 伪造的数据    pages        gantt-index.vue -- 具体的页面

效果图：

javascriptgantt_chart

Gitee： https://gitee.com/mickle/javascriptgantt_chart

介绍

以 jQuery.Gantt 为基础，做了一些美化和修改。 增加了

1、星期的显示。

2、周末的特殊标记。

3、当前日期的特殊标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head>	<meta charset="utf-8">	<link rel="stylesheet" type="text/css" href="../lib/jquery-ui-1.8.4.css" />	<link rel="stylesheet" type="text/css" href="reset.css" />	<link rel="stylesheet" type="text/css" href="../jquery.ganttView.css" />	<style type="text/css">		body {			font-family: tahoma, verdana, helvetica;			font-size: 0.8em;			padding: 10px;		}	</style>	<title>jQuery Gantt</title></head><body>	<div id="ganttChart"></div>	<br/><br/>	<div id="eventMessage"></div>	<script type="text/javascript" src="ly002/20240426/rq52dc13h44uci4rrkk7xjvdlihne5qcmx3fyg3h.jpg"></script>	<script type="text/javascript" src="ly002/20240426/e1yn5dv2i8bdc6xr1n40tl6r18qrz9u47iiqokce.jpg"></script>	<script type="text/javascript" src="ly002/20240426/e1yn5dv2i8bdc6xr1n40tl6r18qrz9u47iiqokce.jpg"></script>	<script type="text/javascript" src="ly002/20240426/e1yn5dv2i8bdc6xr1n40tl6r18qrz9u47iiqokce.jpg"></script>	<script type="text/javascript" src="ly002/20240426/e1yn5dv2i8bdc6xr1n40tl6r18qrz9u47iiqokce.jpg"></script>	<script type="text/javascript">		$(function () {			$("#ganttChart").ganttView({ 				data: ganttData,				slideWidth: 900,				monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],				dowNames : ["日", "一", "二", "三", "四", "五", "六"],				confNames : ["天"],				behavior: {					onClick: function (data) { 						var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";						$("#eventMessage").text(msg);					},					onResize: function (data) { 						var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";						$("#eventMessage").text(msg);					},					onDrag: function (data) { 						var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";						$("#eventMessage").text(msg);					}				}			});						// $("#ganttChart").ganttView("setSlideWidth", 600);		});	</script></body></html>

效果图：

Vue-Gantt-chart

在线演示：https://w1301625107.github.io/Vue-Gantt-chart/demo/index.html

Gitee： https://gitee.com/natsum1/Vue-Gantt-chart

基于 Vue 实现的 gantt-like 图表 ,用于排班展示
特性

• 虚拟列表，快速渲染可视区域，支持大量数据渲染
• 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天
• 可变单元格
• 标记线
• 支持自定义描述和容器块
• 标记线

npm 安装

npm i v-gantt-chart --save

Include plugin in your main.js file.

import Vue from 'vue'import vGanttChart from 'v-gantt-chart';Vue.use(vGanttChart);

使用链接引入

<script src="ly002/20240426/knhgd95jnp9n1dfeqcq7txnjkkugu6a655a39crw.jpg"></script>

<body>  <div id="app">    <v-gantt-chart></v-gantt-chart>  </div></body>  <!-- 先引入vue -->  <script src="ly002/20240426/knhgd95jnp9n1dfeqcq7txnjkkugu6a655a39crw.jpg"></script>  <!-- 再引入v-gantt-chart.js -->  <script src="ly002/20240426/knhgd95jnp9n1dfeqcq7txnjkkugu6a655a39crw.jpg"></script>  <script>    new Vue({      el: '#app',    })  </script></html>

效果图：

react-gantt-table

Gitee： https://gitee.com/liao_zi_mo/react-gantt-table

用react-typescript构建到一个甘特图表格、

tooltips的格式自行修改源码，这里写死了两层树形结构、需要的可自己递归实现无限级的树，例子很简单，自己修改源码可实现自定义效果。

效果图：

jz-gantt

Gitee： https://gitee.com/zishuimuyu/jz-gantt

什么是 JzGantt

• 根据日期自动生成甘特图
• 支持多层扩展
• 高性能
• 多层联动
• 支持自定义表内容
• 支持自定义甘特内容
• 支持自定义表头
• 动态更新数据
• 定制任意风格
• 支持黑暗模式
• 更多持续更新

安装

npm install jz-gantt --save// oryarn add jz-gantt  // 推荐

使用

import Gantt from "jz-gantt";import "jz-gantt/dist/index.css";createApp(App).use(Gantt).mount("#app");

基本用法

Data 应该是 Array<any> 类型，index，startDate，endDate和children 应该在 Data item 中，它们有助于正确显示数据。当然，每一个字段都可以自定义。

const dataList = [  {    index: 1,    startDate: "2020-06-05",    endDate: "2020-08-20",    ttt: {      a: "aaa",      b: "bbb"    },    name: "mydata1",    children: []  },  {    index: 2,    startDate: "2020-07-07",    endDate: "2020-09-11",    ttt: {},    name: "mydata2",    children: [      {        index: 3,        startDate: "2020-07-10",        endDate: "2020-08-15",        ttt: {          a: "aaa"        },        name: "child1",        children: []      }    ]  }];

<j-gantt data-index="index" :data="dataList" />

使用列插槽组件

我们提供了一个名为 JGanttColumn 的插槽。 Label 是必需的，它应该匹配数据的属性键名。

<j-gantt data-index="index" :data="dataList">  <j-gantt-column label="name" /></j-gantt>

使用滑块插槽组件

我们提供一个名为 JGanttSlider 的插槽。如果传入多个滑块，有且只有最后一个滑块将被渲染。

<j-gantt data-index="index" :data="dataList">  <j-gantt-slider />   <!-- no render -->  <j-gantt-slider />   <!-- will be rendered --></j-gantt>

效果图：

jQuery.ganttchart

Gitee： https://gitee.com/zhhhcode/jquery.ganttchart

介绍

基于 jQuery 的 JavaScript 甘特图插件。

参考了 jQuery.ganttView 的设计思路，但 ganttView 太 Low 了，给客户骂了半个月，自己重写了一个。

兼容 IE8+。

效果图：

ganttproject

在线演示：https://www.ganttproject.biz/

Gitee： https://gitee.com/mirrors/ganttproject

GanttProject 是一个免费易用的使用甘特图进行项目调度和管理的工具。

GanttProject是一款免费的桌面项目管理应用程序。它附带：

• 任务层次结构和依赖关系、里程碑、基线。
• 带有生成PERT图选项的甘特图。
• 资源负载图表。
• 任务成本计算。
• 导出为PDF、HTML、PNG。
• 与MS Project、Excel和其他电子表格应用程序的互操作性。
• 使用WebDAV和商业协作服务GanttProjectCloud进行项目协作。

效果图：

mermaid

在线预览：https://mermaid.js.org/intro/

Github： https://github.com/mermaid-js/mermaid

过解析类 Markdown 的文本语法来实现图表的创建和动态修改。

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

Doc-Rot 是 Mermaid 致力于解决的一个难题。

绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。
你可以访问 教程 来查看 Live Editor 的视频教程，也可以查看 Mermaid 的集成和使用 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

效果图：

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。