JS甘特图插件MZGantt：一个完整的示例

最新推荐文章于 2026-02-12 19:44:53 发布

原创

最新推荐文章于 2026-02-12 19:44:53 发布 · 742 阅读

标签

#javascript #前端 #html

MZGantt插件技术解析与实现

MZGantt作为纯JavaScript实现的甘特图解决方案，具备跨框架兼容特性。其核心功能包括任务时间轴可视化、依赖关系展示及动态交互能力。

以下为完整可执行示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MZGantt 示例</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="Keywords" content="MZGantt, Web甘特图, 网页甘特图, 条形图, 甘特图, 甘特图插件, JS甘特图插件, 网页甘特图插件, 拖拽编辑甘特图, npm安装甘特图插件" />
    <meta name="description" content="MZGantt是一个纯JavaScript甘特图插件。它支持Vue、TypeScript (TS)、JavaScript (JS)和各种流行的前端框架。可以快速集成到您的Web应用程序或移动应用中。">
    <meta name="author" content="ndes-global.com,tecjt.com" />

    <!-- 导入 MZGantt CSS -->
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.css">

    <!-- 导入 MZGantt JS 文件 -->
    <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/edit.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/export.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mobile.js"></script>

    <style>
        body {
     
     
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .button-container {
     
     
            margin-bottom: 15px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .scale-container {
     
     
            padding: 10px;
            margin-bottom: 15px;
            background: white;
            border: 1px solid #9E9E9E;
            border-radius: 5px;
            font-size: 12px;
        }

        .gantt-container {
     
     
            width: 100%;
            height: 600px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        button, input[type="button"] {
     
     
            margin: 2px;
            padding: 5px 10px;
            background: #2E9AFE;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        button:hover, input[type="button"]:hover {
     
     
            background: #1A8DFF;
        }

        label {
     
     
            margin-right: 10px;
            cursor: pointer;
        }

        input[type="radio"], input[type="checkbox"] {
     
     
            margin-right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <!-- 控制按钮 -->
    <div class="button-container">
        <button onclick="showData()">获取全部数据</button>
        <button onclick="alert(JSON.stringify(myGantt.getUpdatedRows()))">获取变更数据</button>
        <button onclick="alert(JSON.stringify(myGantt.getSelectedRows()))">获取选中数据</button>

        <button onclick="myGantt.showMileStone(true)">显示里程碑</button>
        <button onclick="myGantt.showMileStone(false)">隐藏里程碑</button>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="myGantt.addRow('add')">新增</button>
        <button onclick="myGantt.addRow('insert')">插入</button>
        <button onclick="myGantt.addRow(

最低0.47元/天解锁文章