❤
npm
Sign UpSign In

mzgantt

2025.5.19 • Public • Published

MZGantt甘特图插件

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

一. 插件特征

  • 拖拽编辑：支持拖拽编辑

  • 行内编辑：支持行内编辑功能

  • 弹框支持：提供任务model，与外部弹框配合，完成任务编辑。

  • 列自定义：支持自定义任务属性列

  • 多段展示：支持任务行内多段展示

  • 支持日历：支持自定义日历

  • 图片导出：支持甘特图完整图片导出

  • 大数据处理：支持懒加载方式加载任务

  • 过滤器支持：支持设定条件，快速筛选

  • 里程碑标记：支持配置显示里程碑标记线条

  • 四种任务关系：支持拖拽建立和编辑四种任务关系(FS,FF,SF,SS)

  • 消息框自定义：支持消息框内容和样式自定义

  • 样式可调：支持显示样式自定义

  • 使用简单：js直接引用或者通过npm安装使用（支持vue，ts）

  • 参数配置：提供丰富配置参数和接口满足项目需求

二. 演示

演示地址：https://mzgantt.tecjt.com

三. 如何使用?

MZGantt支持js引用和npm安装两种使用方式。

  1. 下载 使用前，先下载普通js版插件或使用npm进行安装。

  2. 引用MZGantt插件 在html页面头部中引入如下js包：

    • 普通js引用:
    <!-- 引入jquery库 -->
<script language="javascript" src="jquery.min.js"></script>

<!-- 引入甘特图插件 -->
<link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
<script language="javascript" src="./gantt/mzgantt.js"></script>
<script language="javascript" src="./gantt/edit.js"></script>
    • npm引用:
    // 导入MZGantt包，具体有如下几个包，按具体需求引入
//      1. 基础包：MZGantt（必须引入。包含甘特图基本展示等功能）
//      2. 编辑功能包：MZGanttEditor（按需引入。包含甘特图编辑功能）
//      3. 导出功能包：MZGanttExport（按需引入。包含甘特图导出图片功能）
//      4. 移动端支持包：MZGanttMobile（按需引入。包含移动端支持功能）
import {MZGantt, MZGanttEditor} from './mzgantt';

// 获取并设置授权key
MZGantt.LicenseKey = "您的授权key";

  3. 定义甘特图容器(div) 在html页面内定义一个div，作为展示甘特图的容器：

    <div id="GanttChartDIV" style="width:100%;"></div>

  4. 定义甘特图参数（可定义空对象{}，插件将使用使用默认值） 此步骤可选。在需要个性化显示甘特图时，可以通过设置甘特图参数来实现。部分可设置参数如下：

    var ganttConfig = {
    useFor: "Task",                         // 设置甘特图用途，资源利用（比如会议室管理）：'Resource', 任务管理（比如计划和进度管理）：'Task'。默认:Task
    ganttStatus: "e",                       // 设置甘特图状态（ e:编辑计划, r：只读）

    // 表格列配置（甘特图左侧表格部分显示列配置，非甘特图数据格式）
    columnDefs: [
        {name: 'seq',         field: "seq",        type:"level"},
        {name: 'checkbox',    field: "checkbox"},
        {name: 'iconColsVal', field: "iconColsVal", width: 30},

        // 以下字段，name可自定义，且须与数据中相应项目名称对应。field值为内置固定值，不可重新设置，且不支持设置type。
        {name: 'name',        field: "name",       title: "任务名称", width: 150},
        {name: 'resId',       field: "resId",      title: "责任人",   width: 50,    options: resourceList},
        {name: 'dur',         field: "dur",        title: "工期",     width: 60},
        {name: 'planStart',   field: "planStart",  title: "计划开始", width: 120,   editable: false},
        {name: 'planEnd',     field: "planEnd",    title: "计划完成", width: 120,   colCallBack:custCallbackFunc1},
        {name: 'planDur',     field: "planDur",    title: "计划人天", width: 60},
        {name: 'rsltStart',   field: "rsltStart",  title: "实际开始", width: 120},
        {name: 'rsltEnd',     field: "rsltEnd",    title: "实际完成", width: 120},
        {name: 'rsltDur',     field: "rsltDur",    title: "实际人天", width: 60},
        {name: 'pctComp',     field: "pctComp",    title: "完成度",   width: 60},
        // {name: 'caption',     field: "caption",    title: "标签文字"},

        // 自定义列（field: "custColsVal"）：支持设置type：DropDownList/TextBox
        // 属性altText:自定义列替换显示文字
        {name:"testCol1", field: "custColsVal", title:"列名1", type: "TextBox", default: 10, width:50,align:"left"},
        {name:"testCol2", field: "custColsVal", title:"列名2", type: "DropDownList", options:dropDownListData, width:100, align:"left"},
        {name:"testCol3", field: "custColsVal", title:"列名3","width":150,"align":"left", colCallBack:custCallbackFunc2, altText: "查看图文"}
    ],

    // 甘特图区域显示控制
    showTrack: 1,                           // 0:计划甘特图；1:实绩甘特图 。默认：计划甘特图。
    showDuplicate: 0,                       // 是否显示 资源重叠分配标志
    showMileStone: 1,                       // 是否显示 里程碑：不显示
    showDependencies: 1,                    // 是否显示 连接线(0/1),默认：0不显示。
    showDayDate: "date",                    // 设置day格式时，显示星期或者日期（day:星期；date:日期）。默认:day显示星期。
    showWeekIndex: "",                      // 设置day格式时，右侧首行显示第几周或者显示周第一个日期。Y：显示周数，其他，显示日期。默认显示日期。

    // 数据定义类===============================================================================
    weekWorkSetting:                        // 周工作日设置（D1:周1....D0:周天。1: 工作日，0：休息日)
	    {D1:1, D2:1, D3:1, D4:1, D5:1, D6:0, D0:0},
    holidayList: [                          // 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
        '2023-02-09',
        '2023-02-21',
        '2023-03-20'],
    workdayList: ['2023-03-18'],            // 设置出勤日列表
    mileStoneLines: [                       // 里程碑配置
        {date:'2023-11-05',name:'startMS', title:'项目设计讨论', color:'#FF00BF', thickness: "2px"},
        {date:'2023-11-25',name:'pjMeeting', title:'代码review', color:'#088A29', thickness: "2px"},
        {date:'today',name:'today', title:'今日', color:'#FF0000', thickness: "2px"}
    ],

    // 插件配置类===============================================================================
    captionType: 'Caption',                 // 设置甘特图标题(None,Name, Caption,Resource,Duration,Complete,Reserver,Title,Theme)  None:不显示标题
    captionPosition: 'Right',               // 设置甘特图标题显示位置（Over:甘特图条上方；Right:甘特图条右侧，默认Over)

    // 显示日期格式和输入日期格式应该统一
    dateFormat: 'yyyy-mm-dd',               // 设置参数日期格式 ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd','yyyy/mm/dd')
    weekStartDay: 0,                        // 设置星期第一日（1：星期一开始；0：星期天开始），默认：0

    workingHourRange: ['1','23'],           // 设置hour格式下的每天的工作时段。(以小时为单位)。默认: 1,23。
    hourFormat: 0,                          // 设置hour格式（0:小时后不加:00；1:小时后加:00）。默认:0显示星期.

    dragChgDur: "1",                        // 设置拖拽变更工日,如果showChgDur设置为不显示，则该选项的设置无效。
    autoCalDur: 1,                          // 设置自动计算工日（默认不自动计算）

    includeHoliday: "N",                    // 工日计算是否包含假期和周末：Y: 包含；N:不包含
    includeToTime: "Y",                     // 甘特图完成时间是否包含最后一个时间点（开始和完成时间为日期类型时设置为包含，小时的话设置为不包含），默认Y

    durPrecision: 2,                        // 设置工期和工日精度（默认小数后一位）
    fixColsCnt: 3,                          // 设置锁定列数, 默认:0(不锁定列)
    fixParent: 1,                           // 固定父任务范围（1：不随子任务拖动而变动；0：随子任务拖动而变动）
    idType: "Snow",                         // 任务id计算方法（默认：12位任意字符；UUID: uuid; Snow: 雪花id）

    // 样式控制类===============================================================================
    // 背景色设置类
    // planBackground: vPlanBackground,     // 设置甘特图计划条背景
    // resultBackground: vResultBackground, // 设置甘特图实绩条背景
    compBackground: '#0000FF',              // 设置完成度背景
    // groupBackground: '#00FF00',          // 设置父任务行背景
    holidayBGColor: '#E6E6E6',              // 设置休息日/假期背景
    currentTimeBackColor: ['h','#FF9797'],  // 设置当前时间背景(参数1：h: 通过设置表头样式显示当前时间; c: 通过设置内容单元格样式显示当前时间。参数2：颜色值)
    intervalColor: ['#FFFFFF','#F4F4F4'],   // 设置隔行背景颜色, 默认: #FFFFFF,#F4F4F4
    selectedRowColor: '#CAE1FF',            // 设置选中行背景颜色, 默认: #CAE1FF
    selectedCellColor: '#2E9AFE',			// 设置选中单元格边框颜色，默认：2E9AFE
    borderColor: '#9E9E9E',                 // 设置甘特图边框颜色, 默认: #9E9E9E

    // 甘特图条
    barBorderRadius: 6,                     // 设置甘特图条圆角半径, 默认: 3px
    barBorderWeight: 1,                     // 设置甘特图条边框粗细, 默认: 1px
    barBorderColor: '#9E0000',              // 设置甘特图条边框颜色, 默认: #9E9E9E
    barOpacity: 1,                          // 设置甘特图条透明度，默认：0.7
    barGridBorderWeight: 1,                 // 设置甘特图条背景边框粗细, 默认: 1px
    resultBarStyle: 'mark',                 // 实绩条样式（normal:不标记计划外日期，mark: 标记计划外日期; cust: 自定义分段）
    markResultBarColor:                     // 实绩条样式为mark类型时，实绩条背景颜色
	{beforePlanBGColor: '#00FF00',
	 exceedPlanDBColor: '#cc0000'},
    barHeightAdj: 0,						// 进度条高度调整量（默认0px，不做任何调整；值越大，进度条越高。可以为负值）
    barDistanceAdj: 0,						// 计划进度条和实际进度条之间距离调整量（默认0px，不做任何调整；值越大，距离越近。可以为负值。）

    // 拖动杆
    dragHandlerBackColor: '#D8D8D8',		// 拖动杆背景色

    // lineExpandLen: 0,                    // 依赖线伸出量参数
    dependLineColor: '#228B22',             // 连接线颜色
    dependLineMouseOverColor: '#FE9A2E',    // 连接线鼠标浮动颜色
    criticalPathBGColor: '#FE9A2E',         // 关键路径标记颜色

    // 宽高设置
    leftSideWidth: 300,                     // 设置左侧框宽度, 默认:300px
    contentHeight: 360,                     // 设置甘特图高度（不含表头）, 默认:300px.如果在页面调用adjustGanttHeight函数使甘特图高度自适应，则次参数可不设置。
    rowHeight: 35,                          // 设置行高度, 默认:35px

    // 左侧列宽度设置，在完善columnDefs后，这部分就可以废弃了。
    iconColWidth: 30,                       // 设置图标列宽度，默认:60px
    nameColWidth: 150,                      // 设置任务/资源列宽度，默认:150px
    dateColWidth: 120,                      // 设置日期列宽度，默认:80px

    // 右侧格子宽度设置（不同时间刻度时）
    hourColWidth: 20,                       // 小时刻度时
    dayColWidth: 20,                        // 天刻度时
    monthColWidth: 70,                      // 月刻度时
    quarterColWidth: 100                    // 季度刻度时
};

// 甘特图参数配置
myGantt.config(ganttConfig);

  5. 后台获取数据，或定义数据

    /*
  甘特图数据对象项目说明：
  一：内置固定数据项，不可自定义其他名称。
    1. id                  //（必须）String        节点编号（任意字符串或数字，不可重复）
    2. plan                //（可选）Array         计划数据
    3. isExpand            //（可选）Number(0或1)  是否展开显示 1:展开/0:收缩
    4. isGroup             //（可选）Number(0或1)  是否设置为父（组）1：组/0：叶子节点
    5. preNodes            //（可选）String|Array  前置节点，多个前置节点时，使用逗号分开
    6. parentId            //（可选）String        父节点编号(当前行是最顶层节点时，该值须设置为空"")
    7. isMS                //（可选）Number(0或1)  是否里程碑
    8. caption             //（可选）String        标题
    9. planBarColor        //（可选）String        甘特图计划背景（颜色值)

  二：以下数据项，可使用自定义名称，须与列定义中name匹配。
    10. name               //（必须）String        名称（可以作为任务名称，资源名称等）
    11. iconColsVal        //（可选）Array         图标列(可以是用逗号隔开的多个图标）
    12. rsltStart          //（可选）String Date   实际开始
    13. rsltEnd            //（可选）String Date   实际完成
    14. rsltDur            //（可选）Number        实际人天
    15. custColsVal        //（可选）String        自定义列的值，需要与自定义列配置一一对应。
    16. resId              //（可选）String        资源/负责人
    17. pctComp            //（可选）Number        完成度（0 ~ 100 百分比)
    18. seq                //（可选）Number        排序号
*/

// 甘特图数据
let ganttData= [
    {
        "id": 1,
        "seq": 1000,
        "iconColsVal": [],
        "name": "单位A施工期间",
        "plan": [{}],
        "rsltStart": "",
        "rsltEnd": "",
        "rsltDur": 1,
        "planBarColor": "",
        "isMS": 0,
        "resId": "1",
        "pctComp": 0,
        "isGroup": 1,
        "parentId": "",
        "isExpand": 1,
        "preNodes": "",
        "caption": "重点关注",
        "testCol1": "10",
        "testCol2": "02",
        "testCol3": "<img src='./images/stop.png'>",
    }, {
        "id": 11,
        "seq": 2000,
        "iconColsVal": [{
                "src": "./images/stop.png",
                "title": "停止"
            }
        ],
        "name": "任务名称1",
        "plan": [{
                "start": "",
                "end": "",
                "dur": "2"
            }
        ],
        "rsltStart": "2023-07-02",
        "rsltEnd": "2023-07-06",
        "rsltDur": 1,
        "planBarColor": "#2EFE9A",
        "isMS": 0,
        "resId": "2",
        "pctComp": 50,
        "isGroup": 0,
        "parentId": 1,
        "isExpand": 1,
        "preNodes": "",
        "caption": "",
        "testCol1": "1",
        "testCol2": "02",
        "testCol3": "",
        "custRsltBars": [
            {
                name: "p1",
                title: "分段1",
                start: "2023-07-02",
                end: "2023-07-04",
                style: "background:#2E9AFE;color:#FFFFFF;text-align:left;"
            }, {
                name: "p2",
                title: "分段2",
                start: "2023-07-06",
                end: "2023-07-17",
                html: "<span style='height:7px;border-radius:5px 5px;position:absolute;left:5px;top:-1px;background:red;font-size:9px;color:#FFFFFF'>美丽</span>",
                style: "background:#FF0000;color:#FFFFFF;text-align:left;"
            },
        ],
    }, {
        "id": 12,
        "seq": 3000,
        "iconColsVal": [],
        "name": "任务名称2",
        "plan": [{
                "start": "2023-07-06",
                "end": "2023-07-10"
            }
        ],
        "rsltStart": "2023-07-07",
        "rsltEnd": "2023-07-10",
        "rsltDur": 1,
        "planBarColor": "#2EFE9A",
        "isMS": 0,
        "resId": "2",
        "pctComp": 10,
        "isGroup": 0,
        "parentId": 1,
        "isExpand": 1,
        "preNodes": "",
        "caption": "备注1",
        "testCol1": "1",
        "testCol2": "03",
        "testCol3": "",
    }, {
        "id": 13,
        "seq": 4000,
        "iconColsVal": [{
                "src": "./images/star.png",
                "title": "星级"
            }
        ],
        "name": "任务名称3",
        "plan": [{
                "start": "2023-07-11",
                "end": "2023-07-15"
            }
        ],
        "rsltStart": "2023-07-11",
        "rsltEnd": "2023-07-14",
        "rsltDur": 1,
        "planBarColor": "#2EFE9A",
        "isMS": 0,
        "resId": "2",
        "pctComp": 20,
        "isGroup": 0,
        "parentId": 1,
        "isExpand": 1,
        "preNodes": 12,
        "caption": "",
        "testCol1": "50",
        "testCol2": "01",
        "testCol3": "",
    }, {
        "id": 14,
        "seq": 5000,
        "iconColsVal": [],
        "name": "任务名称4",
        "plan": [{
                "start": "",
                "end": "2023-07-17"
            }
        ],
        "rsltStart": "2023-07-16",
        "rsltEnd": "2023-07-17",
        "rsltDur": 1,
        "planBarColor": vPlanBackground,
        "isMS": 0,
        "resId": "2",
        "pctComp": 0,
        "isGroup": 0,
        "parentId": 1,
        "isExpand": 1,
        "preNodes": "",
        "caption": "",
        "testCol1": "20",
        "testCol2": "01",
        "testCol3": "",
    },
    {
        "id": 2,
        "seq": 6000,
        "iconColsVal": [],
        "name": "单位B施工期间",
        "plan": [{}
        ],
        "rsltStart": "",
        "rsltEnd": "",
        "rsltDur": 1,
        "planBarColor": "",
        "isMS": 0,
        "resId": "1",
        "pctComp": 0,
        "isGroup": 1,
        "parentId": "",
        "isExpand": 1,
        "preNodes": "",
        "caption": "",
        "testCol1": "4",
        "testCol2": "01",
        "testCol3": "<img src='./images/stop.png'>",
    }, {
        "id": 21,
        "seq": 7000,
        "iconColsVal": [{
                "src": "./images/stop.png",
                "title": "停止"
            }
        ],
        "name": "任务名称1",
        "plan": [{
                "start": "2023-07-19",
                "end": "2023-07-29"
            }
        ],
        "rsltStart": "2023-07-26",
        "rsltEnd": "2023-07-29",
        "rsltDur": 1,
        "planBarColor": vPlanBackground,
        "isMS": 0,
        "resId": "2",
        "pctComp": 40,
        "isGroup": 0,
        "parentId": 2,
        "isExpand": 1,
        "preNodes": "",
        "caption": "",
        "testCol1": "4",
        "testCol2": "02",
        "testCol3": "",
    },
    ......
];

  6. 创建甘特图对象

    // 实例化甘特图对象（在vue中需要执行此语句进行甘特图对象实例化）
const myGantt = MZGantt.init();

// 启动功能模块
//   (1)使用插件npm安装包时，如果需要编辑、导出和移动端支持功能，引用相应功能包后，需要在此启动
//   (2)使用插件普通js包时，以下启动（start）命令可以略去。
//启动甘特图编辑
MZGanttEditor.start(myGantt);
// 启动导出功能
MZGanttExport.start(myGantt);

/*
创建并展示甘特图
    参数1：(必须)容器div对象id
    参数2：(可选)时间刻度类型
    参数3：(可选)配置选项
    参数4：(可选)数据
*/
myGantt.createGantt("GanttChartDIV", "day", ganttConfig, data);

// 注意：此处如果为设置ganttConfig和data，可以独立使用配置方法和绑定数据等方法
// 甘特图参数配置
myGantt.config(ganttConfig);

// 加载数据
myGantt.bindGanttData(data);

// 甘特图展示
myGantt.drawGantt()

  7. 监听事件 MZGantt支持监听渲染或者点击等事件，可以使用这些事件实现一些特殊的控制效果。

    // 单元格渲染
myGantt.on("cellRender", function (row, cellObj) {
    // *******************************************************
    // 可对以下甘特图左侧表格以下类型（field)单元格进行渲染控制：
    // 一. 内置类型列：
    //    name                 名称
    //    iconColsVal          图标列
    //    resId                资源/负责人
    //    planStart            计划开始
    //    planEnd              计划完成
    //    planDur              计划人天
    //    rsltStart            实际开始
    //    rsltEnd              实际完成
    //    rsltDur              实际工日
    //    pctComp              完成度

    // 二.自定义列
    //    testCol1             自定义列名（name)
    // *******************************************************

    // 获取单元格名称（渲染对象单元格）
    var field = cellObj.field;

    // 定义渲染样式对象
    var cellStyle = {};

    // 样式设置：任务名称
    if (field == "name") {
        if (row.plan[0].dur > 5) {
            cellStyle["cellHTML"] = '<span style="color:red;" >' + row.name + '</span>';
            // cell.style.color = "red";
        }
        if (row.plan[0].dur >= 2 && row.plan[0].dur <= 5) {
            cellStyle["cellHTML"] = '<span style="color:green;" >' + row.name + '</span>';
        }
        if (row.plan[0].dur < 2) {
            cellStyle["cellHTML"] = '<span style="color:black;" >' + row.name + '</span>';
        }
    }

    // 样式设置：负责人
    if (field == "resId") {
        if (row.name == "任务名称1") {
            cellStyle["ce11Style"] = 'color:green;font-weight:bold';
        }
    }

    // // 样式设置：自定义列(使用自定义列名称)
    // if (field == "testCol2") {
    //   cellStyle["cellHTML"] = '<input id="tstBtn" type ="button" value="隐藏里程碑" onclick="test1">';
    // }

    return cellStyle;
});

// 进度条渲染
myGantt.on("barRender", function (row) {
    // 定义渲染样式对象
    var barStyle = {};

    if (row.name === "任务名称2") {
        barStyle["planBarStyle"] = 'background:red;';
        // barStyle["planBarLeftHtml"] = '<img width="20px" height="20px" src="./images/work.svg" />';
        // barStyle["planBarOverHtml"] = '';
        barStyle["planBarRightHtml"] = '<div style="display:block;">努力最酷啊</div>';
    }

    // 返回对象
    return barStyle;
});

// 点击进度条
myGantt.on("clickBar", function (row, eventXY, dom) {
    console.log("click: 任务：" + row.name + ", 点击日期:" + eventXY.date);
});

// 右键点击进度条
myGantt.on("rightClick", function (row, eventXY, dom) {
    console.log("right click: 任务：" + row.name + ", 点击对象id:" + dom.id);
    console.log("点击日期:" + eventXY.date);
});

  8. 多种加载方式 为了提升加载效率，插件支持多种加载方式。

    方式1：普通加载（一次性加载并渲染所有任务）
    // 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);
// 绑定数据
myGantt.bindGanttData(data);

// ※ 以上三个步骤可以简化为:
myGantt.createGantt("GanttChartDIV", "day", ganttConfig, data);
    方式2：数据监听渲染加载
    // 配置参数
var ganttConfig = {
    loadType: "listenLoad"
};

// 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);

// 定义甘特图监听器
var dataListener = myGantt.listener;

// 设置值甘特图值，自动驱动插件，更新显示。
dataListener.rawGanttData = [
    {
        "id": 1,
        "seq": 1000,
        "iconColsVal": [],
        "name": "单位A施工期间",
        "rsltStart": "",
        "rsltEnd": "",
        "rsltDur": 1,
        "planBarColor": "#C0EBE8",
        "linkTo": "http://",
        "isMS": 0,
        "resId": "1",
        "pctComp": 0,
        "isGroup": 1,
        "parentId": "",
        "isExpand": 1,
        "preNodes": "",
        "caption": "重点关注",
        "plan": [{ "start": "2023-07-05", "end": "2023-07-06", "dur": 10 }]
    }
];

// 不需要再执行bindGanttData和drawGantt方式
    方式3：分页渲染（一次性加载所有数据，分页渲染）
    // 配置参数
var ganttConfig = {
    loadType: "loadAllToPage",
    pageSize: 20         // 分页加载页面大小
};

// 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);

// 绑定数据(数据按页逐页展示出来)
myGantt.bindGanttData(data);
    方式4：分页加载渲染（每次加载并渲染一定行数，逐页加载并渲染）
    // 分页加载处理
//   参数pageNo为插件要请求页面的数据，从1开始
function loadPageData(pageNode) {
    // 返回参数指定页的甘特图数据
    ...
}

// 配置参数
var ganttConfig = {
    loadType: "loadByPage",
    pageSize: 20,               // 分页加载页面大小
    loadDataFunc: loadPageData  // 分页加载处理
};

// 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);

// 甘特图渲染
myGantt.drawGantt();

四. 甘特图数据行数据模型

下表格式为MZGantt甘特图数据行数据模型，在绑定数据到甘特图前，需要按照此格式作成数据。可以批量绑定，参考bindGanttDate方式；也可单行绑定，多用于与外部弹框结合。

数据项
类型
说明
id （必须）String 编号
name （必须）String 名称
isGroup （可选）Number(0或1) 是否组任务（父任务）,决定一个任务是否可以包含子任务。
iconColsVal （可选）Array 图像对象(src, title)数组
resId （可选）String 资源编号
resName （可选）String 资源名称
plan （可选）Array 计划对象，包含start,end,dur属性
rsltStart （可选）String Date 实际开始时间
rsltEnd （可选）String Date 实际完成时间
pctComp （可选）Number 完成度
rsltDur （可选）Number 实际投入
planBarColor （可选）String 甘特图条颜色（计划）
preNodes （可选）String Array
parentId （可选）String （可选）String
caption （可选）String 标题
isMS （可选）Number(0或1) 是否里程碑
自定义列1 （可选）String 自定义列
自定义列2 （可选）String 自定义列
custRsltBars （可选）Array 分段进度条(name, title, start, end, html, style)数组 
// ****************** 弹框示例参考如下 ******************
// 第一步：使用弹框，弹框确认时构造如下数据
var task = {};

task.name = "测试任务1";                                               // (必须)任务名称
task.isGroup = 0;                                                     // (可选)是否父任务（组）
task.iconColsVal = [{"src": "./images/test.jpg","title": "",}];       // (可选)图标列值
task.resId = "01";                                                    // (可选)担当者id
task.resName = "刘德华";                                              // (可选)担当者姓名（可选)
task.plan = [{"start": "2023-12-20","end": "2023-12-25","dur": 5}];   // (可选)计划数据
task.planBarColor = "#FF0000";                                        // (可选)进度条颜色
task.rsltStart = "2023-12-20";                                        // (可选)实际开始
task.rsltEnd = "2023-12-26";                                          // (可选)实际完成
task.pctComp = 90;                                                    // (可选)完成百分比
task.rsltDur = 6;                                                     // (可选)完成量
task.preNodes = [{"id":13,"type":"FS","gapDays":1}];                  // (可选)前置任务（可多个）
task.parentId = "";                                                   // (saveType为add/append/insert时可选；为addChild时必须)父任务
task.caption = "测试任务1";                                            // (可选)任务标题
task.isMS = 0;                                                        // (可选)是否里程碑任务

// 第二步: 更新任务行数据
var ret = MZGantt.updRows(saveType, createTaskModel());               // saveType: add/append/insert/edit/addChild
if (ret.code == 0) {
    // 关闭任务输入框

} else {
    // 提示错误消息
    console.log(ret.msg);
    return;
}

五. 高级功能

MZGantt支持更多高级功能，如国际化和多语言包设置，拖动建立并编辑任务关系，加载动画配置等。

  1. 国际化和语言包设置

    // 设置语言包
//   注意：设置语言类型，需要在甘特图显示方法（drawGantt）之前执行。
myGantt.setGanttLang("en");        // cn: 中文; en:英语; jp:日语;

// 字符重命名（以下字符可重命名）
//     count_tab: "第",
//     reserve_pic: "预约者",
//     theme: "主题",
//     loading:"加载中...",
//     click_2_view:"查看图文",
//     column_task: "任务名称",
//     column_complete_ratio: "完成度",
//     column_rslt: "实际起止日期",
//     column_start_date: "计划开始时间",
//     column_end_date: "计划完成时间",
//     column_rslt_start_date: "实际开始时间",
//     column_rslt_end_date: "实际完成时间",
//     week: "周",
//     quarter: "季度",
//     menu_goto:"转到任务",
//     menu_goto_today:"定位到今天",
//     select_child:"选择所有子任务",
//     menu_FF: "完成-完成(FF)",
//     menu_FS: "完成-开始(FS)",
//     menu_SF: "开始-完成(SF)",
//     menu_SS: "开始-开始(SS)"
var labelDefs = {
    "menu_SF":"开-完"}
;

// 国际化设置
myGantt.setMyLabels(labelDefs, "en");

  2. 进度条消息框自定义 鼠标放在进度条上，会自动显示提示框，显示任务信息。也可以根据需求，自定义提示框。

    // 在甘特图配置中设置参数infoBoxItems和infoBoxStyle
var ganttConfig = {
    ...
    infoBoxItems: [       // 信息框项目定义
        {
            title: '',value: "name",
            titleStyle: "font-weight: bold;",
            valStyle: "font-weight: bold;"},
        {
            title: '公式写法',	expression: "((testCol1 * testCol3) + pctComp) + '天'",
            titleStyle: "font-weight: bold;",
            valStyle: "color: red;"},
        {
            title: '格式化字串',	value: "这是格式化写法: {planStart}",
            titleStyle: "font-weight: bold;",
            valStyle: "color: red;"},
        {
            title: '计划开始',	value: "planStart",
            titleStyle: ""},
        {
            title: '计划结束', value: "planEnd",
            titleStyle: "", },
        {
            title: '实际开始',	value: "rsltStart",
            titleStyle: ""},
        {
            title: '实际结束', value: "rsltEnd",
            titleStyle: "", },
        {
            title: '标题', value: "title",
            titleStyle: "", }
    ],
    infoBoxStyle:        // 信息框样式定义
        "BORDER: #cdcdcd 1px solid;background:#FFFFFF;box-shadow: 3px 3px 2px #CDCDCD;border-radius:5px;padding:5px;",

    ...
}

    信息项目的设置，可以选择以下任意一种方式：

    1. 使用值（vulue）
    2. 使用公式（expression）
      • 日期/字符类型的值：须加上引号，比如:

        expression: "这是实际开始日: 'rsltStart'"

      • 数值型的值：直接写在公式中即可，比如：

        expression: "((testCol1 * testCol3) + pctComp) + '天'"

    3. 使用字符替换（{...}）

  3. 任务关系

  • 建立任务关系： 编辑状态下，在A任务进度条上按下鼠标向下拖动，拖动到B任务松*开鼠标，会弹出任务关系弹框，选择任务关系，点击确定即可建立任务A和B之间的关系。

  • 编辑任务关系： 编辑状态下，点击关系线，弹出任务关系弹框，修改或删除任务关系。

  • 间隔时间修改方法： 方法1：在关系弹框中修改保存； 方法2：拖动后置任务，自动修改。

  1. 加载动画设置 MZGantt支持显示加载动画。分为插件初始化加载动画和插件手动开关动画两种，请参考下例。 
    // 1. 插件初始化动画**************************************************
// 1.1 普通js版本时
<!-- 导入甘特图插件 -->
<link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />
<script language="javascript">
    // 参数：show: 是否显示插件初始化动画，默认不显示；containerId：显示到甘特图容器dom对象id，默认整个窗口
	window.showInitLoading = {show:true, containerId: "GanttChartDIV"};
</script>
<script language="javascript" src="../../gantt/mzgantt.js"></script>
...

// 1.2 npm版本时
// 初始化甘特图插件（参数解释同上）
var showInitLoadingMsg = {show:true, containerId: "GanttChartDIV"};
const myGantt = MZGantt.init(showInitLoadingMsg);
...

// 2. 手动开关动画****************************************************
//    手动开关打开加载动画时，普通js版本和npm版本使用相同方法。
//    参数1：显示开关（true：显示；false：关闭）
//    参数2：显示位置dom对象ID（默认整个窗口）
myGantt.showLoading(true,"GanttChartDIV");

六. 插件方法及事件

MZGantt提供丰富接口，操作或控制甘特图数据和特征。

  1. 甘特图显示

    方法
    方法
    参数
    init 初始化甘特图实例 无（vue中使用插件时，需要执行此方法实例化插件）
    createGantt 创建甘特图对象 参数1：（必须）DIV容器ID
    参数2：（可选）时间刻度day/week/month/quarter（默认day）
    参数3：配置选项
    参数4：(可选)数据
    config 配置甘特图 JSON对象值，参考：甘特图参数配置
    bindGanttData 绑定甘特图数据 甘特图JSON数据：需要符合MZGantt数据model
    drawGantt 显示甘特图 无

  2. 显示控制

    方法
    说明
    参数
    changeFormat 变更显示刻度 显示刻度：day/week/month/quarter
    switchTrack 切换显示实绩 开关值：true/false
    showMileStone 切换显示里程碑时间标记线 开关值：true/false
    setMSLine 动态添加/修改里程碑时间标记线 里程碑定义对象（参考mileStoneLines中对象定义）
    rmMSLine 动态删除里程碑时间标记线 里程碑标记线名(name)

  3. 获取数据

    方法
    说明
    参数
    getAllRows 获取所有行数据 无
    getUpdatedRows 获取值有变化的行 无
    getSelectedRows 获取当前选择行 无
    getAllParentRows 获取所有组任务 无
    getChildRows 获取指定行的所有子任务数据 任务ID
    getSelectedRowID 获取选择行任务ID 无
    getSelectedBucketID 获取选择bucketID（资源管理时用） 无
    getSelectedRowSeq 获取当前选择行行索引号 无
    getSelectedRowParent 获取选择行父任务ID 无
    getMileStoneLines 获取里程碑时间线数据 无

  4. 属性设置

    方法
    说明
    参数
    setBulkMoveType 同步移动方式设置 D（关联任务）
    P（按责任人）
    N（所有后续任务）
    setStartEndDate 设置项目起止日 参数1：开始日
    参数2：结束日。字符串类型

  5. 数据编辑类

    方法
    说明
    参数
    addRow 新增行 参数：新增位置（add:当前行后；insert：当前行前；append：末尾；addChild：添加子任务)
    deleteRows 删除选择行 无
    cloneRows 克隆行 无
    updRows 保存行 （行内编辑时，编辑后的数据可以获取得到，无需使用该接口命令。当使用外部任务编辑弹框时，可以使用该接口）
    参数1：新增位置（add:当前行后；insert：当前行前；append：末尾；addChild：添加子任务；edit：编辑)
    参数2：任务模型数据

  6. 过滤器

    方法
    说明
    addFilter 设置条件对数据进行过滤。示例：
    MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")
    removefilter 移除过滤器，恢复数据显示。示例：
    MZGantt.removefilter()

  7. 导出图片

    方法
    说明
    参数
    exportGanttImg 存为图片 无

  8. 事件监听

    事件名称
    说明
    cellRender 单元格渲染事件。支持监听该事件，设置用户自己的回调处理。对单元格进行渲染。示例：
    MZGantt.on("cellRender", function(row, cellObj) {...})
    barRender 进度条渲染事件。可动态监听用户数据，实时渲染进度条样式。示例：
    MZGantt.on("barRender", function(row, barObj) {...})
    clickBar 进度条点击事件。可通过该事件获取鼠标点击任务行，点击日期，并设置用户处理逻辑。示例：
    MZGantt.on("clickBar", function(row, eventXY, dom) {...})
    rightClick 甘特图区右键点击事件。可通过该事件获取鼠标右键点击位置，点击任务行数据，点击日期，并设置用户用户自己的处理逻辑。示例：
    MZGantt.on("rightClick", function(row, eventXY, dom) {...})
    loaded 加载完成事件。甘特图加载完成后自动执行，可根据需要设置用户自己的处理逻辑。示例：
    MZGantt.on("loaded", function(e, data) {...})

七. 常见错误码

错误码
说明
0x00010 createGantt命令执行之前，甘特图容器div必须要加载完成，否则提示此错误。
0x00020 配置甘特图出错。
0x00030 渲染甘特图（drawGantt命令）出错。
0x00040 渲染里程碑标记线时出错。
0x00050 绑定数据发生异常。请参考<四. 甘特图数据行数据模型>作成甘特图行数据。
0x00060 批量加载任务数据异常。
0x00080 点击单元格时发生错误。
0x00090 点击进度条时发生错误。
0x00100 插件初始化异常。

八. 下载

  1. 普通js版 进入下载： MZGantt甘特图插件（普通js版）

  2. npm版（支持vue等）：直接使用npm命令安装即可。

    npm install mzgantt

九. 版本

MZGantt提供3个版本，以满足不同用户的需求。。

  1. 免费试用版 无须任何授权，下载后可免费使用（功能部分受限），不影响您的开发。

  2. 个人版 下载后需获取个人版授权key，无功能限制，可自由地使用插件中的各种功能。

  3. 商业版 下载后需获取商业版授权key，无功能限制和商业使用限制，可自由使用插件中的各种功能。

十. 联系方式

  1. 手机：1369 5047 200 (王先生)
  2. 微信：

Readme

Keywords

Package Sidebar

Install

npm i mzgantt

Weekly Downloads

121

Version

2025.5.19

License

ISC

Unpacked Size

2.4 MB

Total Files

26

Last publish

Collaborators

  • hubosoft
Try on RunKit
Report malware