用highcharts做甘特图展示

一、首先，需要引插件：

二、body中的html代码

<div id="container_center"></div>

三、js代码

<script type="text/javascript">
var xArray;
var yArray;
var seriesArray;
$(function() {

$.ajax({
type: "POST",
dataType: "JSON",
url: "<%=basePath%>admin/project/getprojectdatas.php?id=${id}",
success : function(result){
xArray = result.xArray;
yArray = result.yArray;
seriesArray = result.seriesArray;
$('#container_center').highcharts({
chart: {
type: 'columnrange',
inverted: true //反转
},

title: {
text: ''
},

subtitle: {
text: ''
},
xAxis: {
categories: xArray
},
yAxis: {
categories: yArray,
title: {
text: '日期'
},
labels: {
rotation: -30,
formatter: function() {
var vDate = new Date(this.value);
if(vDate.getFullYear() === 1970) {
return "";
} else {
return vDate.getFullYear() + "-" + (vDate.getMonth() + 1) + "-" + vDate.getDate();
}

}
}
},
tooltip: {
formatter: function() {
var beginDate = new Date(yArray[this.y]);   //开始时间  时间戳
var dateIndex;
for(var i = 0; i < xArray.length; i++){
if(this.x === xArray[i]){
dateIndex = i;
}
}
var endDateIndex = seriesArray[dateIndex][1];
var endDate = new Date(yArray[endDateIndex]);   //结束时间 时间戳

var beginYear = beginDate.getFullYear();    //开始年份
var beginMonth = beginDate.getMonth() + 1;  //开始月份
var beginDay = beginDate.getDate();         //开始号数

var endYear = endDate.getFullYear();        //结束年份
var endMonth = endDate.getMonth() + 1;      //结束月份
var endDay = endDate.getDate();             //结束号数

var days = (endDate - beginDate) / (1000*60*60*24) +1   //总天数

return this.x+" : "+beginYear+"/"+beginMonth+"/"+beginDay+" - "+endYear+"/"
+endMonth+"/"+endDay + " , 共"+days+"天";
}
},

plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function() {
return;
}
}
}
},

legend: {
enabled: false
},
series: [{
data: seriesArray
}]
});
}
});

});
</
8df1
script>

难点