来唠唠学了一个星期的甘特图吧
官网地址：Gantt : Samples
人已麻，废话不多说直接说怎么用吧：
效果图：
首先 安装dhtml gannt插件
npm install dhtmlx-gantt
引入CSS 和 JS
//注意路径
//路径页面给个盒子，放甘特图用
//注意id名字可以自己取，官网是"gantt_here"在新创建的容器中初始化dhtmlxGantt 初始化 方法。作为参数，该方法采用将在其中显示甘特的HTML容器（或其ID）
gantt.init("gantt_here");甘特图里面的数据结构
var data = [
{ id: "10cz1t", text: "P220901-044", type: "project", progress: 0.88, open: true, parent: 0 },
{ id: "11cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
{ id: "12cz1t", text: "备膜", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "121cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 05:00", parent: "12cz1t", progress: 0, open: true },
{ id: "13cz1t", text: "挤压加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "131cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 02:00", parent: "13cz1t", progress: 0, open: true },
{ id: "132cz1t", text: "Stage #2", start_date: "2022-11-03 04:00", end_date: "2022-11-03 05:00", parent: "13cz1t", progress: 0, open: true },
{ id: "133cz1t", text: "Stage #3", start_date: "2022-11-03 07:00", end_date: "2022-11-03 08:00", parent: "13cz1t", progress: 0, open: true },
{ id: "134cz1t", text: "Stage #4", start_date: "2022-11-03 10:00", end_date: "2022-11-03 11:00", parent: "13cz1t", progress: 0, open: true },
{ id: "135cz1t", text: "Stage #5", start_date: "2022-11-03 13:00", end_date: "2022-11-03 14:00", parent: "13cz1t", progress: 0, open: true },
{ id: "136cz1t", text: "Stage #6", start_date: "2022-11-03 16:00", end_date: "2022-11-03 17:00", parent: "13cz1t", progress: 0, open: true },
{ id: "137cz1t", text: "Stage #7", start_date: "2022-11-03 19:00", end_date: "2022-11-03 20:00", parent: "13cz1t", progress: 0, open: true },
{ id: "24cz1t", text: "时效加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "241cz1t", text: "Stage #1", start_date: "2022-11-03 05:00", end_date: "2022-11-03 06:00", parent: "24cz1t", progress: 0, open: true },
{ id: "242cz1t", text: "Stage #2", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "24cz1t", progress: 0, open: true },
{ id: "243cz1t", text: "Stage #3", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "24cz1t", progress: 0, open: true },
{ id: "244cz1t", text: "Stage #4", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "24cz1t", progress: 0, open: true },
{ id: "25cz1t", text: "氧化包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "251cz1t", text: "Stage #1", start_date: "2022-11-03 06:00", end_date: "2022-11-03 07:00", parent: "25cz1t", progress: 0, open: true },
{ id: "252cz1t", text: "Stage #2", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "25cz1t", progress: 0, open: true },
{ id: "253cz1t", text: "Stage #3", start_date: "2022-11-03 12:00", end_date: "2022-11-03 13:00", parent: "25cz1t", progress: 0, open: true },
{ id: "254cz1t", text: "Stage #4", start_date: "2022-11-03 14:00", end_date: "2022-11-03 15:00", parent: "25cz1t", progress: 0, open: true },
{ id: "255cz1t", text: "Stage #5", start_date: "2022-11-03 18:00", end_date: "2022-11-03 19:00", parent: "25cz1t", progress: 0, open: true },
{ id: "256cz1t", text: "Stage #6", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "25cz1t", progress: 0, open: true },
{ id: "257cz1t", text: "Stage #7", start_date: "2022-11-03 22:00", end_date: "2022-11-03 23:30", parent: "25cz1t", progress: 0, open: true },
{ id: "29cz1t", text: "测试包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "291cz1t", text: "Stage #5", start_date: "2022-11-03 15:00", end_date: "2022-11-03 16:00", parent: "29cz1t", progress: 0, open: true },
{ id: "292cz1t", text: "Stage #6", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "29cz1t", progress: 0, open: true },
{ id: "28cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
// ,start_date: "2022-11-03 01:00",end_date: "2022-11-03 03:00"
{ id: "281cz1t", text: "备膜", start_date: "2022-11-03 01:00", end_date: "2022-11-03 03:00", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t1", text: "备膜1", start_date: "2022-11-03 02:30", end_date: "2022-11-03 05:30", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t2", text: "备膜2", start_date: "2022-11-03 06:50", end_date: "2022-11-03 07:50", parent: "28cz1t", progress: 0, open: true },
{ id: "282cz1t", text: "挤压加工", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "28cz1t", progress: 0.5, open: true },
{ id: "283cz1t", text: "时效加工", start_date: "2022-11-03 010:00", end_date: "2022-11-03 11:00", parent: "28cz1t", progress: 0, open: true },
{ id: "284cz1t", text: "氧化包装", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "28cz1t", progress: 0, open: true },
];
var datalist = new Array();
$.each(data, function (i, item) {
var model = new Object();
model.id = item.id;
model.text = item.text;
if (item.type != null) {
model.type = item.type;
}
model.progress = item.progress;
model.open = item.open;
model.start_date = new Date(item.start_date);
model.end_date = new Date(item.end_date);
model.parent = item.parent;
if (item.render != null) {
model.render = item.render;
}
datalist.push(model);
});
// 数据之间的关系
var links = [
// {id: "1", source: "10", target: "11", type: "1"},
// {id: "2", source: "11", target: "12", type: "1"},
// {id: "3", source: "10", target: "28", type: "1"},
//
// {id: "4", source: "12", target: "131", type: "1"},
// source:连接谁 ; target:和谁连 ; (里面写data里面的id)
{ id: "5c", source: "131cz1t", target: "241cz1t", type: "0" },
{ id: "6c", source: "132cz1t", target: "241cz1t", type: "0" },
{ id: "7c", source: "133cz1t", target: "242cz1t", type: "0" },
{ id: "8c", source: "134cz1t", target: "242cz1t", type: "0" },
{ id: "9c", source: "135cz1t", target: "243cz1t", type: "0" },
{ id: "10c", source: "136cz1t", target: "243cz1t", type: "0" },
{ id: "11c", source: "137cz1t", target: "244cz1t", type: "0" },
{ id: "14c", source: "241cz1t", target: "253cz1t", type: "0", color: "green" },
{ id: "13c", source: "241cz1t", target: "252cz1t", type: "0", color: "green" },
{ id: "12c", source: "241cz1t", target: "251cz1t", type: "0", color: "green" },
{ id: "16c", source: "242cz1t", target: "254cz1t", type: "0", color: "green" },
{ id: "15c", source: "242cz1t", target: "253cz1t", type: "0", color: "green" },
{ id: "19c", source: "243cz1t", target: "257cz1t", type: "0", color: "green" },
{ id: "18c", source: "243cz1t", target: "256cz1t", type: "0", color: "green" },
{ id: "17c", source: "243cz1t", target: "255cz1t", type: "0", color: "green" },
{ id: "21c", source: "254cz1t", target: "292cz1t", type: "0", color: "blue" },
{ id: "20c", source: "254cz1t", target: "291cz1t", type: "0", color: "blue" },
{ id: "22c", source: "28cz1t", target: "281cz1t", type: "0", color: "red" },
{ id: "23c", source: "281cz1t", target: "281cz1t1", type: "0", color: "red" },
{ id: "24c", source: "281cz1t", target: "281cz1t2", type: "0", color: "red" },
{ id: "25c", source: "281cz1t", target: "282cz1t", type: "0", color: "hotpink" },
{ id: "26c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
{ id: "27c", source: "281cz1t", target: "283cz1t", type: "0", color: "hotpink" },
{ id: "28c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
]左侧列
gantt.config.reorder_grid_columns = true;
gantt.config.columns = [{
name: "text",
label: "任务名",
width: 200,
align: "center",
tree: true,
resize: true
}, {
name: "start_date",
label: "开始日期",
width: 100,
align: "center",
resize: true
}, {
name: "duration",
label: "持续时间",
width: 100,
align: "center",
resize: true
}];解析
gantt.parse({
data: datalist,
links: links
});日期调整
gantt.config.date_format = "%Y-%m-%d";
gantt.config.scales = [
{ unit: "year", step: 1, format: "%Y" },
{ unit: "day", step: 1, date: "%m-%d" },
{ unit: "hour", step: 1, format: "%H:%i" }
];
提示工具的自定义文本
gantt.templates.tooltip_text = function (start, end, task) {
return "订单: " + task.text + "
开始时间: " + gantt.templates.tooltip_date_format(start) + "
结束时间: " + gantt.templates.tooltip_date_format(end);
};其实挺简单的，多看看官网能解决大部分的需求！
全部代码放在下一篇了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。