",
}, {
"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: "美丽",
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": "",
}, {
"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. 创建甘特图对象
```javascript
// 实例化甘特图对象（在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支持监听渲染或者点击等事件，可以使用这些事件实现一些特殊的控制效果。
```javascript
// 单元格渲染
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"] = '' + row.name + '';
// cell.style.color = "red";
}
if (row.plan[0].dur >= 2 && row.plan[0].dur <= 5) {
cellStyle["cellHTML"] = '' + row.name + '';
}
if (row.plan[0].dur < 2) {
cellStyle["cellHTML"] = '' + row.name + '';
}
}
// 样式设置：负责人
if (field == "resId") {
if (row.name == "任务名称1") {
cellStyle["ce11Style"] = 'color:green;font-weight:bold';
}
}
// // 样式设置：自定义列(使用自定义列名称)
// if (field == "testCol2") {
// cellStyle["cellHTML"] = '';
// }
return cellStyle;
});
// 进度条渲染
myGantt.on("barRender", function (row) {
// 定义渲染样式对象
var barStyle = {};
if (row.name === "任务名称2") {
barStyle["planBarStyle"] = 'background:red;';
// barStyle["planBarLeftHtml"] = '
';
// barStyle["planBarOverHtml"] = '';
barStyle["planBarRightHtml"] = '努力最酷啊
';
}
// 返回对象
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：普通加载（一次性加载并渲染所有任务）
```javascript
// 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);
// 绑定数据
myGantt.bindGanttData(data);
// ※ 以上三个步骤可以简化为:
myGantt.createGantt("GanttChartDIV", "day", ganttConfig, data);
```
###### 方式2：数据监听渲染加载
```javascript
// 配置参数
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：分页渲染（一次性加载所有数据，分页渲染）
```javascript
// 配置参数
var ganttConfig = {
loadType: "loadAllToPage",
pageSize: 20 // 分页加载页面大小
};
// 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);
// 绑定数据(数据按页逐页展示出来)
myGantt.bindGanttData(data);
```
###### 方式4：分页加载渲染（每次加载并渲染一定行数，逐页加载并渲染）
```javascript
// 分页加载处理
// 参数pageNo为插件要请求页面的数据，从1开始
function loadPageData(pageNode) {
// 返回参数指定页的甘特图数据
...
}
// 配置参数
var ganttConfig = {
loadType: "loadByPage",
pageSize: 20, // 分页加载页面大小
loadDataFunc: loadPageData // 分页加载处理
};
// 创建甘特图对象并配置
myGantt.createGantt("GanttChartDIV", "day");
myGantt.config(ganttConfig);
// 甘特图渲染
myGantt.drawGantt();
```
## 四. 甘特图数据行数据模型
下表格式为MZGantt甘特图数据行数据模型，在绑定数据到甘特图前，需要按照此格式作成数据。可以批量绑定，参考bindGanttDate方式；也可单行绑定，多用于与外部弹框结合。
|
## 五. 高级功能
MZGantt支持更多高级功能，如国际化和多语言包设置，拖动建立并编辑任务关系，加载动画配置等。
1. 国际化和语言包设置
```javascript
// 设置语言包
// 注意：设置语言类型，需要在甘特图显示方法（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. 进度条消息框自定义
鼠标放在进度条上，会自动显示提示框，显示任务信息。也可以根据需求，自定义提示框。
```javascript
// 在甘特图配置中设置参数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：拖动后置任务，自动修改。
4. 加载动画设置
MZGantt支持显示加载动画。分为插件初始化加载动画和插件手动开关动画两种，请参考下例。
```javascript
// 1. 插件初始化动画**************************************************
// 1.1 普通js版本时
...
// 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. 甘特图显示
|数据项
| 类型
| 说明
|
|----| ----| ----|
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)数组
```javascript
// ****************** 弹框示例参考如下 ******************
// 第一步：使用弹框，弹框确认时构造如下数据
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;
}
```
方法
| 方法
| 参数
|----| ----|----|
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) {...})` ## 七. 常见错误码
|
## 八. 下载
1. 普通js版
进入下载： MZGantt甘特图插件（普通js版）
2. npm版（支持vue等）：直接使用npm命令安装即可。
> npm install mzgantt
## 九. 版本
MZGantt提供3个版本，以满足不同用户的需求。。
1. 免费试用版
无须任何授权，下载后可免费使用（功能部分受限），不影响您的开发。
2. 个人版
下载后需获取个人版授权key，无功能限制，可自由地使用插件中的各种功能。
3. 商业版
下载后需获取商业版授权key，无功能限制和商业使用限制，可自由使用插件中的各种功能。
## 十. 联系方式
1. 手机：1369 5047 200 (王先生)
2. 微信：
错误码
| 说明
|
|----|----|
0x00010|createGantt命令执行之前，甘特图容器div必须要加载完成，否则提示此错误。
0x00020|配置甘特图出错。
0x00030|渲染甘特图（drawGantt命令）出错。
0x00040|渲染里程碑标记线时出错。
0x00050|绑定数据发生异常。请参考<四. 甘特图数据行数据模型>作成甘特图行数据。
0x00060|批量加载任务数据异常。
0x00080|点击单元格时发生错误。
0x00090|点击进度条时发生错误。
0x00100|插件初始化异常。
