给web页面添加甘特图功能，只需三条命令！

关中老四

已于 2024-05-31 16:24:58 修改

阅读量1.7k

点赞数 31

分类专栏：项目管理甘特图 js插件文章标签：甘特图 javascript 进度管理 js甘特图项目管理

于 2024-03-13 23:52:39 首次发布

本文链接：https://blog.csdn.net/alistguy/article/details/136695072

版权

项目管理同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

甘特图

2 篇文章 0 订阅

订阅专栏

js插件

2 篇文章 0 订阅

订阅专栏

使用MZGantt插件，给web页面添加一个甘特图，只需要三条命令。请看示例。

	// ************开始*********
	<!-- 1. 导入甘特图插件 -->
    <link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />

    <!-- 2. 定义甘特图容器 -->
    <div id="GanttChartDIV" style="width:90%;height:500px;"></div>

		// 命令1.实例化甘特图
   const myGantt = MZGantt.init();

    // 命令2：设置甘特图数据
    var taskData= [{"id":11,
                    "name":"任务名称1",
                    "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                    "resId":"刘德华",
                    "pctComp":40,}];

    // 命令3：创建甘特图
    MZGantt.createGantt("GanttChartDIV", "day", {}, taskData);
    // ************完成***********

下面是一个完整的例子。

	<!DOCTYPE html>
   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
           <!-- 导入甘特图插件 -->
           <link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />
           <script language="javascript" src="../../gantt/mzgantt.js"></script>
       </head>
       <body>
           <!-- 第一步：定义甘特图容器 -->
           <div id="GanttChartDIV" style="width:90%;height:500px;"></div>
           <script language="javascript">
               // MZGantt.LicenseKey = "0oruALdKiUsAA4lLAkFGrAJ3g";

               // 第二步：设置甘特图数据
               var taskData= [
                   {
                       "id":11,
                       "name":"任务名称1",
                       "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                       "resId":"刘德华",
                       "pctComp":40,

                   },
                   {	"id":12,
                       "name":"任务名称2",
                       "plan":[{"start":"2023-07-07","end":"2023-07-16","dur":10}],
                       "resId":"张曼玉",
                       "planBarColor":"#F5A9D0",
                       "pctComp":20,

                   },
                   {	"id":13,
                       "name":"任务名称3",
                       "plan":[{"start":"2023-07-17","end":"2023-07-26","dur":10}],
                       "resId":"周星驰",
                       "pctComp":50,

                   }
               ];

               // 第三步: 实例化甘特图
               const myGantt = MZGantt.init();

               // 第四步：创建甘特图
               myGantt.createGantt("GanttChartDIV", "day", {}, taskData);
           </script>
       </body>
   </html>