专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-11-25 10:18:24 基础教程 1 ℃

使用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);
    // ************完成***********

下面是一个完整的例子。

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

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

有需要的朋友，可以到官网(mzgantt.tecjt.com)下载示例程序：

MZGantt甘特图插件_普通js版示例程序: MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到我们的web程序或者移动应用中。

Tags：

猜你喜欢

最近发表
标签列表