效果图：不符合要求，请飘过。网上找了好多例子，都各种粘贴复制的，根本没实现功能，所以自己只好又花了点时间，整理了个项目中需要的例子。
456868?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbDM5MjI3Njg3MjE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
1、添加js和css
<link rel="stylesheet" href="css/gantt.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>2、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/gantt.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
</head>
<body>
<div class="main">
<div class="work_bottom">
<div class="title">
<h3 style="font-size:16px;margin-bottom: 10px;margin-top: 10px;">工作计划甘特图</h3>
</div>
<div class="contain">
<div class="gantt">
</div>
</div>
</div>
</div>
</body>
<script>
var source = [{
name: "北仑厂2号机",
desc: "AVC",
values: [{ //一行显示
id: "t01",
/*from: "1514851200000",
to: "1515369600000",*/
from: daysBetween(new Date('2018-01-01')),
to: daysBetween(new Date('2018-01-06')),
desc:'2018-01-01到2018-01-06',
label: '2018-01-01到2018-01-06',
customClass: "ganttRed",
},
{
id: "t01",
/*from: "1514851200000",
to: "1515369600000",*/
from: daysBetween(new Date('2018-01-07')),
to: daysBetween(new Date('2018-01-19')),
desc:'2018-01-01到2018-01-06',
label: '2018-01-01到2018-01-06',
customClass: "ganttRed",
}]
},{
name: "北仑厂4号机",
desc: "AVC",
values: [{
from: daysBetween(new Date('2018-01-06')),
to: daysBetween(new Date('2018-02-06')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttBlue",
dep: "t02",
}]
},{
name: "北仑厂5号机",
desc: "AVC",
values: [{
from: daysBetween(new Date('2018-02-02')),
to: daysBetween(new Date('2018-04-06')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttGreen"
}]
},{
name: "北仑厂6号机",
desc: "AVC",
values: [{
from: daysBetween(new Date('2018-03-02')),
to: daysBetween(new Date('2018-04-21')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttBlue"
}]
},{
name: "北仑厂2号机",
desc: "AVC",
values: [{
id: "t01",
from: daysBetween(new Date('2018-06-02')),
to: daysBetween(new Date('2018-12-21')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttGreen",
dep: "t02"
}]
},{
name: "北仑厂8号机",
desc: "AVC",
values: [{
from: daysBetween(new Date('2018-07-02')),
to: daysBetween(new Date('2018-8-21')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttOrange"
}]
},{
name: "北仑厂9号机",
desc: "AVC",
values: [{
from: daysBetween(new Date('2018-09-02')),
to: daysBetween(new Date('2018-11-21')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttBlue"
}]
},{
name: "北仑厂9号机",
desc: "AVC",
values: [{
from: daysBetween(new Date('2018-09-02')),
to: daysBetween(new Date('2018-11-21')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttBlue"
}]
},{
name: "北仑厂9号机",
desc: "AVC",
values: [{
from: daysBetween(new Date('2018-09-02')),
to: daysBetween(new Date('2018-11-21')),
desc:'2018-01-01到2018-01-06' ,
label: '2018-01-01到2018-01-06',
customClass: "ganttBlue"
}]
}]
/**
* 初始化甘特图
*/
$(function() {
"use strict";
$(".gantt").gantt({
source:source ,
navigate: "scroll",
scale: "days",
/*startPos: new Date(),*/
maxScale: "months",
minScale: "days",
itemsPerPage: 7,
onItemClick: function(data) {
//alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
//alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
addTag();
}
}
});
});
/**
* 左侧加两个标签
*/
function addTag(){
var spacer = $(".spacer");
var html = "";
html += '<span>机组名称</span>'+
'<span>计划分类</span>';
spacer.html(html);
$(".nav-zoomIn").hide();//影藏放大
$(".nav-zoomOut").hide();//影藏缩写
/**
* 解决样式错乱
*/
$(".row .date:last-child").css("float","right");
$(".row .date:last-child").css("margin-top","-24px");
$(".row .day:last-child").css("float","right");
$(".row .day:last-child").css("margin-top","-24px");
/*$(".year:first").hide(); //默认影藏
$(".month:first").hide();
$(".row .date:nth-child(1)").hide();
$(".row .date:nth-child(2)").hide();
$(".row .day:nth-child(1)").hide();
$(".row .day:nth-child(2)").hide();*/
/*$(".year:first").remove();
$(".month:first").remove();
$(".row .date:nth-child(1)").remove();
$(".row .date:nth-child(2)").remove();
$(".row .day:nth-child(1)").remove();*/
}
/**
* 时间转换成数字
*/
var date = new Date('2018-02-11');
function daysBetween(sDate1){
var time1 = Date.parse(sDate1);
return time1;
};
</script>
</html>3、注意事项
a、网上的例子 一般会出现日期到40或者50的情况，设置
scale: "days",minScale: "days",b、样式错乱，边框问题
box-sizing: border-box;/*从边框开始计算*/
-webkit-box-sizing: border-box;/*兼容低版本浏览器(主流移动端浏览器兼容)*/c、日期最后一天样式换到下一行，目前只能在代码中控制样式，不影响使用
/**
* 解决样式错乱
*/
$(".row .date:last-child").css("float","right");
$(".row .date:last-child").css("margin-top","-24px");
$(".row .day:last-child").css("float","right");
$(".row .day:last-child").css("margin-top","-24px");d、同一左侧计划，可以在一行显示，数组中在添加成员
var source = [{
name: "北仑厂2号机",
desc: "AVC",
values: [{ //一行显示
id: "t01",
/*from: "1514851200000",
to: "1515369600000",*/
from: daysBetween(new Date('2018-01-01')),
to: daysBetween(new Date('2018-01-06')),
desc:'2018-01-01到2018-01-06',
label: '2018-01-01到2018-01-06',
customClass: "ganttRed",
},
{
id: "t01",
/*from: "1514851200000",
to: "1515369600000",*/
from: daysBetween(new Date('2018-01-07')),
to: daysBetween(new Date('2018-01-19')),
desc:'2018-01-01到2018-01-06',
label: '2018-01-01到2018-01-06',
customClass: "ganttRed",
}]
}