敏卓甘特图（MZGantt）插件

MZGantt是一款纯js开发的甘特图插件，可以使用在您的web项目中。
在这里插入图片描述

一. 插件特征

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

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

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

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

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

  • 使用简单：js直接引用或者通过npm安装使用

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

二. 演示

演示地址：https://mzgantt.tecjt.com
在这里插入图片描述

三. 如何使用?

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

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

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

    • 普通js引用:
    <!-- 引入甘特图插件 -->
<link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
<script language="javascript" src="./gantt/mzgantt.js"></script>
    • npm引用:
    <!-- 引入甘特图插件 -->
<link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
<script language="javascript" src="./gantt/mzgantt.js"></script>

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

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

  4. 引用甘特图插件

    • 普通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
MZGantt.LicenseKey = "您的授权key";

  5. 实例化甘特图//甘特图参数配置
    此步骤可选。在需要个性化显示甘特图时，可以通过设置甘特图参数来实现。部分可设置参数如下：

    var ganttConfig = {
	useFor: "Task", // 设置甘特图用途，资源利用（比如会议室管理）：'Resource', 任务管理（比如计划和进度管理）：'Task'。默认:Task
	showTrack: 0, // 0:计划甘特图；1:实绩甘特图 。默认：计划甘特图。
	showCheckbox: 1,// 是否显示 复选框 列 (0/1)  默认0：不显示
	showIcon: 1,// 是否显示 图标 列 (0/1)  默认0：不显示
	showResouce: 0,	// 是否显示 资源/负责人 列 (0/1) ,默认1：显示
	showDuration: 1,// 是否显示 工期 列(0/1),默认1：显示
	showPctComp: 1,	// 是否显示 完成百分比 % 列(0/1),默认1：显示
	showStartDate: 1,// 是否显示 计划开始日期 列(0/1),默认1：显示
	showEndDate: 1,	// 是否显示 计划完成日期 列(0/1),默认1：显示
	showRsltStartDate: 0,// 是否显示 实际开始日期 列(0/1),默认1：显示
	showRsltEndDate: 0,	// 是否显示 实际完成日期 列(0/1),默认1：显示
	showDuplicate: 0,// 是否显示 资源重叠分配标志
	includeHoliday: 'N',// 工日计算是否包含假期和周末：Y: 包含；N:不包含
	includeToTime: "Y",	// 甘特图完成时间是否包含最后一个时间点（开始和完成时间为日期类型时设置为包含，小时的话设置为不包含），默认Y
	lazyLoad:0,	// 是否懒加载（0:正常加载；1:懒加载；其他：超过该数值自动懒加载；大量任务加载时，可以打开此开关）
	//callbackAfterLoad: callbackTest,//加载后回调函数
	bulkCustColIdx:[1,2],// 允许批量设置的自定义列索引号

	tagColumnList: [
		{"title":"下拉框列1","width":80,"align":"left","data":taskTypeList},
		{"title":"下拉框列2","width":80,"align":"left","disabled":true,"data":tag2List},
		{"title":"下拉框列3","width":80,"align":"left","disabled":true,"data":tag2List}], //添加自定义tag列，指定每列[列名称，列宽度，对齐方式等]

	//添加自定义列，指定每列[列名称，列宽度，对齐方式]，
	// showSeq用于控制自定义列在画面中的显示顺序，dataSeq标识自定义列的值与显示顺序的对应关系，两者都是使用从1开始的整数排序，不可跳数,为必须属性。
	// callbackTaskWin: 任务编辑弹框中自定义列点击回调函数
	// callbackGrid: 甘特图grid中自定义列点击回调函数
	custColumnList: [
		{
			"showSeq": 3,
			"dataSeq": 1,
			"title": "列名1",
			"width": 50,
			"align": "left",
			"multiline": "true",
			"disabled": "true",
			"callbackTaskWin": setCustColVal,
			"callback1Name": "编辑备注",
			"callbackGrid": callbackTest
		}, {
			"showSeq": 1,
			"dataSeq": 2,
			"title": "列名2",
			"width": 100,
			"align": "left"
		}, {
			"showSeq": 2,
			"dataSeq": 3,
			"title": "列名3",
			"width": 150,
			"align": "left"
		}
	],
	showDependencies: 1,// 是否显示 连接线(0/1),默认：0不显示。设置为0，则调用ganttObj.drawDependArrow()函数画依赖线也是无用的；反之，需要画出依赖线时，需要先设置该参数为1。

	captionType: 'Caption',	// 设置甘特图标题(None,Caption,Resource,Duration,Complete,Reserver)  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

	//startEndDate: ['2014-6-18','2019-9-26'], 	// 指定项目起止日期。状态ganttStatus为p时，不指定则自动以当日进行设置。
	holidayList: ['2023-07-18','2023-07-19','2023-07-20'],// 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
	workdayList: ['2023-07-02'], // 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
	resourceList: [
		{"value":"1","name":"郭富城"},
		{"value":"2","name":"黎明"},
		{"value":"3","name":"刘德华"},
		{"value":"4","name":"张学友"}],
	iconList: [
		{value:'red.png',text:''},
		{value:'blue.png',text:''},
		{value:'yellow.png',text:''},
		{value:'green.png',text:''},
		{value:'purple.png',text:''}],

	workingHourRange: ['1','23'],// 设置hour格式下的每天的工作时段。(以小时为单位)。默认: 1,23。
	showChgDur: "0",// 是否显示拖拽变更工日选项。0：不显示，1：显示。默认：1：显示。
	dragChgDur: "1",// 设置拖拽变更工日,如果showChgDur设置为不显示，则该选项的设置无效。
	autoCalDur: 1,// 设置自动计算工日（默认不自动计算）

	fixColsCnt:3,// 设置锁定列数, 默认:0(不锁定列)
	durPrecision:2,	// 设置工期和工日精度（默认小数后一位）
	leftSideWidthFix:86,// 设置锁定区域宽度（用来调整拖动杆微调距离，该值越大，光标越向右超过拖动杆）
	showDayDate: "date",// 设置day格式时，显示星期或者日期（day:星期；date:日期）。默认:day显示星期。
	showWeekIndex: "",	// 设置day格式时，右侧首行显示第几周或者显示周第一个日期。Y：显示周数，其他，显示日期。默认显示日期。
	hourFormat: 0,// 设置hour格式（0:小时后不加:00；1:小时后加:00）。默认:0显示星期.
	// planBackground: vPlanBackground, // 设置甘特图计划条背景
	// resultBackground: vResultBackground,// 设置甘特图实绩条背景
	compBackground: '#0000FF',// 设置完成度背景
	// groupBackground: '#00FF00',// 设置父任务行背景
	weekendHolidayBackColor: '#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
	leftSideWidth: 300,	// 设置左侧框宽度, 默认:300px
	contentHeight: 500,	// 设置甘特图高度（不含表头）, 默认:300px.
	rowHeight: 35,	// 设置行高度, 默认:35px

	ganttStatus: 'e',// 设置甘特图状态:
					//   p: Plan（初次排计划，该状态时需要指定项目起止日期，但不需要绑定数据），
					//   e:编辑计划（不能指定项目起止日期，可以拖动编辑或者添加删除任务）,
					//   a：输入实绩（只能输入实绩），
					//   r：只读
	iconColWidth: 30,// 设置图标列宽度，默认:60px
	nameTitle: '任务名称',// 设置任务/资源列标题, 默认:任务名称
	nameColWidth: 150,// 设置任务/资源列宽度，默认:150px
	dateColWidth: 100,// 设置日期列宽度，默认:80px
	hourColWidth: 20,
	dayColWidth: 20,
	monthColWidth: 200,
	quarterColWidth: 100,
	accessKey: '???'// 使用key（需购买）
};

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

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

  6. 绑定数据/显示甘特图

    /*
  甘特图数据对象项目说明：
	id					// 节点编号（必须）
	iconColsVal			// 图标列(可以是用逗号隔开的多个图标）
	tagColsVal			// 自定义Tag列的值，需要与列配置函数setTagColumnList()指定列一一对应。
	name				// 任务名称（必须）
	plan				// 计划
	rsltStart			// 实际开始
	rsltEnd				// 实际完成
	rsltDur				// 实际工日
	custColsVal			// 自定义列的值，需要与自定义列配置一一对应。
	planBarColor		// 甘特图计划背景
	isMS				// 是否里程碑
	resId				// 资源/负责人
	pctComp				// 完成度（0 ~ 100 百分比)
	isGroup				// 是否设置为父（组）1：组/0：子节点
	parentId			// 父节点编号
	isExpand			// 是否展开显示 1:展开/0:收缩
	preNodes			// 前置节点，多个前置节点时，使用逗号分开
	caption				// 标题
	seq					// 排序号
*/

// 甘特图数据
let ganttData= [
	{
		"id": 1,
		"seq": 1000,
		"iconColsVal": [],
		"tagColsVal": [],
		"name": "单位A施工期间",
		"plan": [{}],
		"rsltStart": "",
		"rsltEnd": "",
		"rsltDur": 1,
		"custColsVal": ["", "2", "3"],
		"planBarColor": "",
		"isMS": 0,
		"resId": "1",
		"pctComp": 0,
		"isGroup": 1,
		"parentId": "",
		"isExpand": 1,
		"preNodes": "",
		"caption": "重点关注"
	}, {
		"id": 11,
		"seq": 2000,
		"iconColsVal": [{
				"src": "./images/stop.png",
				"title": "停止"
			}
		],
		"tagColsVal": [],
		"name": "任务名称1",
		"plan": [{
				"start": "",
				"end": "",
				"dur": "2"
			}
		],
		"rsltStart": "2023-07-02",
		"rsltEnd": "2023-07-06",
		"rsltDur": 1,
		"custColsVal": ["aa"],
		"planBarColor": "#2EFE9A",
		"isMS": 0,
		"resId": "2",
		"pctComp": 50,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	}, {
		"id": 12,
		"seq": 3000,
		"iconColsVal": [],
		"tagColsVal": ["00", "00"],
		"name": "任务名称2",
		"plan": [{
				"start": "2023-07-06",
				"end": "2023-07-10"
			}
		],
		"rsltStart": "2023-07-07",
		"rsltEnd": "2023-07-10",
		"rsltDur": 1,
		"custColsVal": ["aa", "bb"],
		"planBarColor": "#2EFE9A",
		"isMS": 0,
		"resId": "2",
		"pctComp": 10,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": "",
		"caption": "备注1"
	}, {
		"id": 13,
		"seq": 4000,
		"iconColsVal": [{
				"src": "./images/star.png",
				"title": "星级"
			}
		],
		"tagColsVal": [],
		"name": "任务名称3",
		"plan": [{
				"start": "2023-07-11",
				"end": "2023-07-15"
			}
		],
		"rsltStart": "2023-07-11",
		"rsltEnd": "2023-07-14",
		"rsltDur": 1,
		"custColsVal": ["aa", "bb"],
		"planBarColor": "#2EFE9A",
		"isMS": 0,
		"resId": "2",
		"pctComp": 20,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": 12,
		"caption": ""
	}, {
		"id": 14,
		"seq": 5000,
		"iconColsVal": [],
		"tagColsVal": [],
		"name": "任务名称4",
		"plan": [{
				"start": "",
				"end": "2023-07-17"
			}
		],
		"rsltStart": "2023-07-16",
		"rsltEnd": "2023-07-17",
		"rsltDur": 1,
		"custColsVal": ["aa", "<img src='./images/cross.png'><img src='./images/cross.png'>"],
		"planBarColor": vPlanBackground,
		"isMS": 0,
		"resId": "2",
		"pctComp": 0,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	},
	{
		"id": 2,
		"seq": 6000,
		"iconColsVal": [],
		"tagColsVal": [],
		"name": "单位B施工期间",
		"plan": [{}
		],
		"rsltStart": "",
		"rsltEnd": "",
		"rsltDur": 1,
		"custColsVal": ["", ""],
		"planBarColor": "",
		"isMS": 0,
		"resId": "1",
		"pctComp": 0,
		"isGroup": 1,
		"parentId": "",
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	}, {
		"id": 21,
		"seq": 7000,
		"iconColsVal": [{
				"src": "./images/stop.png",
				"title": "停止"
			}
		],
		"tagColsVal": [],
		"name": "任务名称1",
		"plan": [{
				"start": "2023-07-19",
				"end": "2023-07-29"
			}
		],
		"rsltStart": "2023-07-26",
		"rsltEnd": "2023-07-29",
		"rsltDur": 1,
		"custColsVal": ["aa", "bb"],
		"planBarColor": vPlanBackground,
		"isMS": 0,
		"resId": "2",
		"pctComp": 40,
		"isGroup": 0,
		"parentId": 2,
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	},
	......
];

// 绑定数据
myGantt.bindGanttData(ganttData);

// 显示甘特图
myGantt.drawGantt();

四. 任务添加和编辑弹框

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

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

五. 高级功能

MZGantt支持更多高级功能，如多语言包支持，日历支持等。

# javascript # 甘特图 # 开发语言
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

破局“数据荒”与“质量墙”：从传统标注到大模型时代的智能数据治理实践

avatar 2048 AI社区
cover

Cline怎么接OpenAI兼容API？Base URL、模型ID与工具调用配置

avatar 2048 AI社区

User-Agent 检测原理

User-Agent 检测是客户端识别技术的基石，它实现简单、部署成本低，在设备适配、基础防护等场景中有着不可替代的作用。但随着反爬对抗和黑灰产技术的升级，单一的 UA 检测已经不足以应对复杂场景。行业的发展趋势是从 “单一 UA 识别” 走向 “多维度指纹 + 行为分析” 的综合识别体系 ——UA 仍然是重要的身份标识，但不再是唯一的判断依据。理解 UA 检测的原理与边界，才能更好地搭建可靠的客

avatar 2048 AI社区