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

```css
	// ************开始*********
	
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.css" />
    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.js"></script>
    
    <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);
    // ************完成***********
```
下面是一个完整的例子。

```css
	<!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@1.0.7/cdn/mzgantt.css" />
           <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/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>
```

![甘特图示例](https://developer.qcloudimg.com/http-save/yehe-11992461/25876f967d99dbc909189ce6c529a8d2.png)
有需要的朋友，可以到官网(www.mzgantt..com)下载示例程序：

MZGantt甘特图插件_普通js版示例程序: MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到我们的web程序或者移动应用中。[超链接](https://gitee.com/tecjt_home/mzgantt_js_sample) 

![支持编辑，按条件标记等](https://developer.qcloudimg.com/http-save/yehe-11992461/3a3ea99a3cad9d2b432a451a007b3c3e.png)
![效果图](https://developer.qcloudimg.com/http-save/yehe-11992461/97733fe270ea9ee26aaed9f35ca92e29.png)

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

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

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

编程语言

MZGantt插件快速实现网页甘特图功能，仅需3步：导入插件、定义容器、设置数据。支持Vue/TS/JS等主流框架，轻松集成到Web或移动应用。官网提供完整示例下载，助您快速开发项目进度管理工具。

容器

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

给web页面添加甘特图功能，只需三条命令！-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐