Mzgantt_full NPM

敏卓甘特图（MZGantt）插件

MZGantt是一款纯js开发的甘特图插件。

一. 插件特征

拖拽编辑：支持拖拽编辑
行内编辑：支持行内编辑功能
弹框支持：提供任务model，与外部弹框配合，完成任务编辑。
列自定义：支持自定义任务属性列
多段展示：支持任务行内多段展示
支持日历：支持自定义日历
图片导出：支持甘特图完整图片导出
大数据处理：支持懒加载方式加载任务
过滤器支持：支持设定条件，快速筛选
里程碑标记：支持配置显示里程碑标记线条
四种任务关系：支持拖拽建立和编辑四种任务关系(FS,FF,SF,SS)
消息框自定义：支持消息框内容和样式自定义
样式可调：支持显示样式自定义
使用简单：js直接引用或者通过npm安装使用（支持vue，ts）
参数配置：提供丰富配置参数和接口满足项目需求

二. 演示

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

三. 如何使用?

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

下载使用之前，需要下载js插件或使用npm进行安装（点击联系我们获取）。注意： npm安装时，需要安装jquery： npm install --save jquery

引用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>

npm引用:

// 导入MZGantt包
import {MZGantt} from './mzgantt_full';
// 获取并设置授权key
MZGantt.LicenseKey = "???????????";

定义甘特图容器(div) 在html页面内定义一个div，作为展示甘特图的容器：
```
<div id="GanttChartDIV" style="width:100%;"></div>
```

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

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},
        {name: 'planEnd',     field: "planEnd",    title: "计划完成", width: 120},
        {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
        {name:"testCol1", field: "custColsVal", title:"列名1", type: "TextBox", default: 10, width:50,align:"left", disabled:"true"},
        {name:"testCol2", field: "custColsVal", title:"列名2", type: "DropDownList", options:dropDownListData, readonly: true, width:100, align:"left"},
        {name:"testCol3", field: "custColsVal", title:"列名3","width":150,"align":"left"}
    ],

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

    // 数据定义类===============================================================================
    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：随子任务拖动而变动）

    // 样式控制类===============================================================================
    // 背景色设置类
    // 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
    borderColor: '#9E9E9E',                 // 设置甘特图边框颜色, 默认: #9E9E9E

    // 甘特图条
    barBorderRadius: 6,                     // 设置甘特图条圆角半径, 默认: 3px
    barBorderWeight: 1,                     // 设置甘特图条边框粗细, 默认: 1px
    barBorderColor: '#9E0000',              // 设置甘特图条边框颜色, 默认: #9E9E9E
    resultBarStyle: 'mark',                 // 实绩条样式（normal:不标记计划外日期，mark: 标记计划外日期）

    // 宽高设置
    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);

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

/*
  甘特图数据对象项目说明：
  一：内置固定数据项，不可自定义其他名称。
    1. id                  //（必须）节点编号
    2. plan                //（可选）计划数据。
    3. isExpand            //（可选）是否展开显示 1:展开/0:收缩
    4. isGroup             //（可选）是否设置为父（组）1：组/0：子节点
    5. preNodes            //（可选）前置节点，多个前置节点时，使用逗号分开
    6. parentId            //（可选）父节点编号(最顶层节点，该值须设置为空"")
    7. isMS                //（可选）是否里程碑

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

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

创建甘特图对象

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

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

// 注意：此处如果为设置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("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);
});

四. 任务添加和编辑弹框

MZGantt插件提供任务数据模型(task Model)，您可在项目中以弹框或者其他输入方式，收集用户输入信息，作成模型数据，然后调用插件接口进行任务的添加和编辑操作。

数据项	说明
id	编号
name	名称
isGroup	是否组任务（父任务）
iconColsVal	图像对象(src, title)数组
resId	资源编号
resName	资源名称
plan	计划对象，包含start,end,dur属性
rsltStart	实际开始时间
rsltEnd	实际完成时间
pctComp	完成度
rsltDur	实际投入
planBarColor	甘特图条颜色（计划）
preNodes	前置节点
parentId	父任务编号
caption	标题
isMS	是否里程碑
自定义列1	自定义列
自定义列2	自定义列

// ****************** 弹框示例参考如下 ******************
// 第一步：使用弹框，弹框确认时构造如下数据
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支持更多高级功能，如多语言包设置，拖动建立并编辑任务关系等。

语言包设置

// 设置语言包
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");

任务关系

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

六. 插件方法及事件

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

显示控制 |方法|说明| 参数 |----| ----|----| changeFormat|变更显示刻度|显示刻度：day/week/month/quarter switchTrack| 切换显示实绩|开关值：true/false showMileStone|切换显示里程碑时间标记线|开关值：true/false
获取数据 |方法|说明|参数 |----| ----|----| getAllRows | 获取所有行数据|无 getUpdatedRows |获取值有变化的行|无 getSelectedRows |获取当前选择行|无 getAllParentRows | 获取所有组任务|无 getSelectedRowID |获取选择行任务ID|无 getSelectedBucketID|获取选择bucketID（资源管理时用）|无 getSelectedRowSeq|获取当前选择行行索引号|无 getSelectedRowParent|获取选择行父任务ID|无
属性设置 |方法|说明| 参数 |----| ----|----| setBulkMoveType|同步移动方式设置|D（关联任务）P（按责任人）N（所有后续任务） setStartEndDate|设置项目起止日|参数1：开始日参数2：结束日。字符串类型
数据编辑类 |方法|说明|参数 |----| ----|----| addRow|新增行|参数：新增位置（add:当前行后insert：当前行前append：末尾addChild：添加子任务) deleteRows|删除选择行|无 cloneRows |克隆行|无 updRows|保存行|（行内编辑时，编辑后的数据可以获取得到，无需使用该接口命令。当使用外部任务编辑弹框时，可以使用该接口）参数1：新增位置参数2：任务模型
过滤器 |方法| 说明 |----| ----| addFilter|设置条件对数据进行过滤。示例：MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow") removefilter|移除过滤器，恢复数据显示。示例：MZGantt.removefilter()
导出图片 |方法| 说明| 参数 |----| ----|----| exportGanttImg |存为图片| 无
事件监听 |事件名称| 说明 |----| ----| 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) {...})