快速创建甘特图

  一个快速示例（拷贝保存为html文件，双击查看效果）：

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
       <!-- 导入甘特图插件 -->
       <link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/npm/mzgantt@2025.12.18/cdn/mzgantt.css" />
       <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2025.12.18/cdn/mzgantt.js"></script>
   </head>
   <body>
       <!-- 第一步：定义甘特图容器 -->
       <div id="GanttChartDIV" style="width:100%;height:518px;"></div>
       <script language="javascript">

           // var _0x6fc2="CNnVBMfSoJiWmG w14GxsSPkYKRwW sJzbt3LPzufeCW C1bbr2nIrefcBG ide1m

           // 第二步：设置甘特图数据
           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>