使用步骤

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

下载

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

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

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

   npm i mzgantt

引用MZGantt插件

在html页面头部中引入如下js包：

• 普通js引用

<!-- 引入甘特图插件 -->
<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（复制授权key文本内容到下方，不要换行，不要格式化，然后去掉注释符号使授权码生效）
// var _0x1d51=['constructor','1174609hyFUnm','return\x20/\x22\x20+\x20this\x20+\x]

定义甘特图容器(div)

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

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

定义甘特图参数

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

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

    // 表格列配置（甘特图左侧表格部分显示列配置，非甘特图数据格式）
    // 注意：如果需要拖动变更计划日期，则planStart，planEnd，planDur必须要在这里定义，
    //      如果不想要显示这几个列，可以配置不显示（visiable: false)，否则可能出现拖动进度条后，进度条又返回的问题。
    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：显示周数，其他，显示日期。默认显示日期。
    autoSelect: 1,                          // 设置加载后是否自动选择首行。默认：1选择，0不选择
    showMobileTools: 1,                     // 移动端是否显示操作工具栏。默认：1显示，0不显示
    showInfoBox: 0,                         // 是否显示 信息框标志。默认：1显示，0不显示
    showContextMenu: 0,                     // 是否显示 右键菜单标志。默认：1显示，0不显示

    // 数据定义类===============================================================================
    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-02-25',            // 支持设置日期区间：使用半角符号"~"隔开。
        '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"},
        {date:'now',name:'now', title:'当前', color:'#FF0000', thickness: "2px"}
    ],

    workingHourSetting: [                   // 设置hour格式下的每天的工作时段。(以小时为单位)。默认: 1,23。
        ['7', '19']
    ],
    onlyShowWorkhours: "Y",                 // 是否只显示工作时间(Y:只显示工作时间；N:显示所有时间。默认:N)
    pastTimeStyle: "background:#cccccc;font-weight: bold;", // 设置过去时间背景，默认灰色。可自定义
    contentMenus: [                         // 自定义右键菜单
        {
            name: 'mymenu1',
            text: '自定义菜单1',
            func: (row) => {
                console.log("点击 自定义菜单1");
            }
        },
        {
            name: 'mymenu2',
            text: '自定义菜单2',
            icoFile: 'images/clone.png',
            func: (row) => {
                console.log("点击 自定义菜单2");
            }
        }
    ],

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

    // 显示日期格式和输入日期格式应该统一
    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）
    parentCompWay: "Dur",                   // 父任务完成度计算方式（Average:平均值；Dur:工期（默认））

    // 样式控制类===============================================================================
    // 背景色设置类
    // 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                    // 季度刻度时
};

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

/*
    甘特图数据对象项目说明：
    一：内置固定数据项，不可自定义其他名称。
    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                //（可选）Decimal       排序号
*/

// 甘特图数据
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": "",
    },
    ......
];

创建甘特图对象

// 实例化甘特图对象
const myGantt = MZGantt.init();

// 启动功能模块
//启动甘特图编辑
MZGanttEditor.start(myGantt);
// 启动导出功能
MZGanttExport.start(myGantt);

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

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

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

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

监听事件

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("rowRender", function(row, rowStyleObj) {
    if (row.isGroup == 1) {
        rowStyleObj.rowStyle = 'background:yellow;';
    }

    return rowStyleObj;
});

// 进度条渲染
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["compBarStyle"] = '';
        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);
});

多种加载方式

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

普通加载

一次性加载并渲染所有任务。

// 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);
// 绑定数据
myGantt.bindGanttData(data);

// ※ 以上三个步骤可以简化为:
myGantt.createGantt("GanttChartDIV", "day", ganttConfig, data);

数据监听渲染加载

// 配置参数
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方式

分页渲染

一次性加载所有数据，分页渲染。

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

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

// 绑定数据(数据按页逐页展示出来)
myGantt.bindGanttData(data);

分页加载渲染

每次加载并渲染一定行数，逐页加载并渲染。

// 分页加载处理
//   参数pageNo为插件要请求页面的数据，从1开始
function loadPageData(pageNode) {
    // 返回参数指定页的甘特图数据
    ...
}

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

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

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

行数据模型

数据项说明

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

模型使用示例

// ****************** 弹框示例参考如下 ******************
// 第一步：使用弹框，弹框确认时构造如下数据
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, task);               // saveType: add/append/insert/edit/addChild
if (ret.code == 0) {
    // 关闭任务输入框

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

高级功能

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

国际化和语言包设置

// 设置语言包
//   注意：设置语言类型，需要在甘特图显示方法（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");

进度条消息框自定义

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

// 在甘特图配置中设置参数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: '函数',
            expression: "new Date('2019-12-09') > new Date('planEnd')? '2024-12-09':'planEnd'",
            titleStyle: function (row) {
                return "font-weight: bold;font-size: 16px;";
            },
            valStyle: function (row) {
                return "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. 使用字符替换（{...}）
4. 使用函数

任务关系

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

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

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

加载动画设置

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提供丰富接口，操作或控制甘特图数据和特征。

初始化实例

显示控制

获取数据

属性设置

数据编辑

过滤器

导出图片

事件监听

常见错误码