MZGantt-纯JS甘特图插件

快速创建甘特图(点击此处下载)

使用非常简单：

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

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

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

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

   // 5.创建甘特图
   myGantt.createGantt("GanttChartDIV", "day", {}, taskData);
   // ************完成***********

一个完整html例子：

<!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>