代码(每个月都显示整月)：
@{
ViewBag.Title = "横道图";
Layout = "~/Views/Shared/_Layout.cshtml";
}<styletype="text/CSS">div{font-family:微软雅黑;}#chart{float:left;height:300px;padding-left:1px;border-bottom:solid 1px #aaa;background:url(/Content/Styles/imgs/ganttbar.png) center left repeat-y;overflow:hidden;}.div-day-box{float:left;width:28px;height:28px;border:solid 1px #aaa;margin-left:-1px;margin-top:-1px;line-height:30px;text-align:center;}.div-month:first-child{padding-left:1px;}.div-month{float:left;margin-left:-1px;height:89px;overflow:hidden;}.div-month-title{float:left;height:30px;width:100%;margin-left:-1px;text-align:center;line-height:28px;}.div-month-title div{border-left:solid 1px #aaa;border-right:solid 1px #aaa;border-top:solid 1px #aaa;font-size:16px;}.div-bar-box{float:left;width:30px;height:30px;margin-left:-1px;margin-top:-1px;line-height:30px;text-align:center;background:url(/Content/Styles/imgs/ganttbar.png) center right no-repeat;}.div-bar-box-inner{margin-top:8px;width:30px;height:12px;}.table-main td{border:solid 1px #aaa;}.table-title{margin-top:63px;}.table-title td{height:28px;border:solid 1px #aaa;text-align:center;}.table-title tr td:last-child{border-right:none;}</style><scripttype="text/javascript">$(function() {
$("#div-container").find("div:first").width($("#div-container").width());
createChart();
});//重新生成functioncreateChart() {
$("#chart").html("");
setTimeout(function() {varsumWidth=createMonthsChart('2015-06','2016-02');
createBar(sumWidth,'2015-06','2015-06-20','2015-06-29','2016-02');
createBar(sumWidth,'2015-06','2015-06-22','2015-07-04','2016-02');
createBar(sumWidth,'2015-06','2015-06-30','2015-07-08','2016-02');
createBar(sumWidth,'2015-06','2015-06-29','2015-07-06','2016-02');
createBar(sumWidth,'2015-06','2015-06-27','2015-07-15','2016-02');
createBar(sumWidth,'2015-06','2015-06-26','2015-07-18','2016-02');
createBar(sumWidth,'2015-06','2015-07-11','2015-07-28','2016-02');
createBar(sumWidth,'2015-06','2015-07-13','2015-07-26','2016-02');
$("#chart").height(87+29*8);
},100);
}//生成时间条varcolorIndex=1;functioncreateBar(sumWidth, globalStart, start, end, globalEnd) {varglobalStartArr=globalStart.split('-');varglobalEndArr=globalEnd.split('-');varstartArr=start.split('-');varendArr=end.split('-');varglobalStartDate=newDate(parseInt(globalStartArr[0]), parseInt(globalStartArr[1])-1,1);varglobalEndDate=newDate(parseInt(globalEndArr[0]), parseInt(globalEndArr[1])-1, getDaysOfMonth(parseInt(globalEndArr[0]), parseInt(globalEndArr[1])));varstartDate=newDate(parseInt(startArr[0]), parseInt(startArr[1])-1, parseInt(startArr[2]));varendDate=newDate(parseInt(endArr[0]), parseInt(endArr[1])-1, parseInt(endArr[2]));vardays1=(startDate-globalStartDate)/(1000*60*60*24);vardays2=(endDate-startDate)/(1000*60*60*24);vardays3=(globalEndDate-endDate)/(1000*60*60*24);varhtml='';for(vari=1; i<=days1; i++) {
html+='<div class="div-bar-box"></div>';
}for(vari=1; i<=days2+1; i++) {
html+='<div class="div-bar-box"><div class="div-bar-box-inner" style="background-color:'+getColor(colorIndex)+';"></div></div>';
}
colorIndex+=1;if(colorIndex>2) colorIndex=1;for(vari=1; i<=days3; i++) {
html+='<div class="div-bar-box"></div>';
}
$("#chart").append(html);
}//生成连续月份图表functioncreateMonthsChart(start, end) {varsumWidth=0;varstartArr=start.split('-');varendArr=end.split('-');if(startArr[0]==endArr[0]) {//同一年for(vari=parseInt(startArr[1]); i<=parseInt(endArr[1]); i++) {
sumWidth+=createMonthChart(parseInt(startArr[0]), i)-1;//-1表示div-month的一个margin-left像素}
}else{//跨年for(varj=parseInt(startArr[1]); j<=12; j++) {
sumWidth+=createMonthChart(parseInt(startArr[0]), j)-1;//-1表示div-month的一个margin-left像素}for(vari=parseInt(startArr[0])+1; i<parseInt(endArr[0]); i++) {for(varj=1; j<=12; j++) {
sumWidth+=createMonthChart(i, j)-1;//-1表示div-month的一个margin-left像素}
}for(varj=1; j<=parseInt(endArr[1]); j++) {
sumWidth+=createMonthChart(parseInt(endArr[0]), j)-1;//-1表示div-month的一个margin-left像素}
}
sumWidth+=1;//+1表示第一个div-month的一个padding-left像素$("#chart").width(sumWidth);returnsumWidth;
}//生成当月图表functioncreateMonthChart(year, month) {varweek=getWeek(year, month,1);vardayCount=getDaysOfMonth(year, month);varhtml='';//月份容器和标题html+='<div class="div-month" ><div class="div-month-title" ><div>'+year+'年'+month+'月</div></div>';//星期for(vari=0; i<dayCount; i++) {varweekShow=getWeekShow(week);
week++;if(week>6) week=0;
html+='<div class="div-day-box">'+weekShow+'</div>';
}//日期for(vari=0; i<dayCount; i++) {
html+='<div class="div-day-box">'+(i+1)+'</div>';
}
html+='</div>';
$("#chart").append(html);varboxWidth=29;//box算上两边的边框一共30varboxsWidth=boxWidth*dayCount+1;
$("#chart").find(".div-month:last").width(boxsWidth);returnboxsWidth;
}//获取当月天数functiongetDaysOfMonth(year, month) {vard=newDate(year, month,0);returnd.getDate();
}//获取当天星期数functiongetWeek(year, month, day) {vard=newDate(year, month-1, day);returnd.getDay();
}//星期转换functiongetWeekShow(i) {switch(i) {case0:return"日";case1:return"一";case2:return"二";case3:return"三";case4:return"四";case5:return"五";case6:return"六";
}return"error";
}//颜色functiongetColor(i) {switch(i) {case1:return"#00aa00";case2:return"#cc0000";
}return"#000";
}</script><tableclass="table-main"cellpadding="0"cellspacing="0"style="width: 100%; border-collapse: collapse;"><tr><tdstyle="width: 240px; vertical-align: top;"><tableclass="table-title"cellpadding="0"cellspacing="0"style="width: 100%; border-collapse: collapse;"><tr><td>部门</td><td>控制节点</td><td></td></tr><tr><tdrowspan="2">项目部</td><tdrowspan="2">下发设计任务单</td><td>计划</td></tr><tr><td>实际</td></tr><tr><tdrowspan="2">项目部</td><tdrowspan="2">组织召开项目定义会</td><td>计划</td></tr><tr><td>实际</td></tr><tr><tdrowspan="2">设计部</td><tdrowspan="2">加工图设计一阶段</td><td>计划</td></tr><tr><td>实际</td></tr><tr><tdrowspan="2">项目部</td><tdrowspan="2">加工图一阶段深化设计</td><td>计划</td></tr><tr><td>实际</td></tr></table></td><tdid="div-container"><divstyle="width: 1000px; height: 400px; padding: 5px; overflow: scroll;"><divid="chart"></div></div></td></tr></table>
View Code
改进版(每个月显示的可能不是整月)：
@{
ViewBag.Title = "横道图";
Layout = "~/Views/Shared/_Layout.cshtml";
}<styletype="text/css">div{font-family:微软雅黑;}#chart{float:left;height:300px;padding-left:1px;border-bottom:solid 1px #aaa;background:url(/Content/Styles/imgs/ganttbar.png) center left repeat-y;overflow:hidden;}.div-day-box{float:left;width:28px;height:28px;border:solid 1px #aaa;margin-left:-1px;margin-top:-1px;line-height:30px;text-align:center;}.div-month:first-child{padding-left:1px;}.div-month{float:left;margin-left:-1px;height:89px;overflow:hidden;}.div-month-title{float:left;height:30px;width:100%;margin-left:-1px;text-align:center;line-height:28px;overflow:hidden;}.div-month-title div{border-left:solid 1px #aaa;border-right:solid 1px #aaa;border-top:solid 1px #aaa;font-size:16px;}.div-bar-box{float:left;width:30px;height:30px;margin-left:-1px;margin-top:-1px;line-height:30px;text-align:center;background:url(/Content/Styles/imgs/ganttbar.png) center right no-repeat;}.div-bar-box-inner{margin-top:8px;width:30px;height:12px;}.table-main td{border:solid 1px #aaa;}.table-title{margin-top:63px;}.table-title td{height:28px;border:solid 1px #aaa;text-align:center;}.table-title tr td:last-child{border-right:none;}</style><scripttype="text/Javascript">$(function() {
$("#div-container").find("div:first").width($("#div-container").width());
createChart();
});//重新生成functioncreateChart() {
$("#chart").html("");
setTimeout(function() {varglobalStart='2014-11-18';varglobalEnd='2015-02-05';varsumWidth=createMonthsChart(globalStart, globalEnd);
createBar(sumWidth, globalStart,'2014-11-19','2014-11-29', globalEnd);
createBar(sumWidth, globalStart,'2014-11-20','2014-12-01', globalEnd);
createBar(sumWidth, globalStart,'2014-11-30','2014-12-15', globalEnd);
createBar(sumWidth, globalStart,'2014-12-03','2014-12-13', globalEnd);
createBar(sumWidth, globalStart,'2014-12-17','2015-01-16', globalEnd);
createBar(sumWidth, globalStart,'2014-12-18','2015-01-20', globalEnd);
createBar(sumWidth, globalStart,'2015-01-16','2015-02-03', globalEnd);
createBar(sumWidth, globalStart,'2015-01-18','2015-02-04', globalEnd);
$("#chart").height(87+29*8);
},100);
}//生成时间条varcolorIndex=1;functioncreateBar(sumWidth, globalStart, start, end, globalEnd) {varglobalStartArr=globalStart.split('-');varglobalEndArr=globalEnd.split('-');varstartArr=start.split('-');varendArr=end.split('-');varglobalStartDate=newDate(parseInt(globalStartArr[0]), parseInt(globalStartArr[1])-1, parseInt(globalStartArr[2]));varglobalEndDate=newDate(parseInt(globalEndArr[0]), parseInt(globalEndArr[1])-1, parseInt(globalEndArr[2]));varstartDate=newDate(parseInt(startArr[0]), parseInt(startArr[1])-1, parseInt(startArr[2]));varendDate=newDate(parseInt(endArr[0]), parseInt(endArr[1])-1, parseInt(endArr[2]));vardays1=(startDate-globalStartDate)/(1000*60*60*24);vardays2=(endDate-startDate)/(1000*60*60*24);vardays3=(globalEndDate-endDate)/(1000*60*60*24);varhtml='';for(vari=1; i<=days1; i++) {
html+='<div class="div-bar-box"></div>';
}for(vari=1; i<=days2+1; i++) {
html+='<div class="div-bar-box"><div class="div-bar-box-inner" style="background-color:'+getColor(colorIndex)+';"></div></div>';
}
colorIndex+=1;if(colorIndex>2) colorIndex=1;for(vari=1; i<=days3; i++) {
html+='<div class="div-bar-box"></div>';
}
$("#chart").append(html);
}//生成连续月份图表functioncreateMonthsChart(start, end) {varsumWidth=0;varstartArr=start.split('-');varendArr=end.split('-');if(startArr[0]==endArr[0]) {//同一年for(vari=parseInt(startArr[1]); i<=parseInt(endArr[1]); i++) {vardayStart;vardayEnd;if(parseInt(startArr[1])==parseInt(endArr[1])) {//同月dayStart=parseInt(startArr[2]);
dayEnd=parseInt(endArr[2]);
}else{//跨月if(i==parseInt(startArr[1])) {
dayStart=parseInt(startArr[2]);
dayEnd=getDaysOfMonth(parseInt(startArr[0]), i);
}elseif(i==parseInt(endArr[1])) {
dayStart=1;
dayEnd=parseInt(endArr[2]);
}else{
dayStart=1;
dayEnd=getDaysOfMonth(parseInt(startArr[0]), i);
}
}
sumWidth+=createMonthChart(parseInt(startArr[0]), i, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}
}else{//跨年for(varj=parseInt(startArr[1]); j<=12; j++) {vardayStart;vardayEnd;if(j==parseInt(startArr[1])) {
dayStart=parseInt(startArr[2]);
dayEnd=getDaysOfMonth(parseInt(startArr[0]), j);
}else{
dayStart=1;
dayEnd=getDaysOfMonth(parseInt(startArr[0]), j);
}
sumWidth+=createMonthChart(parseInt(startArr[0]), j, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}for(vari=parseInt(startArr[0])+1; i<parseInt(endArr[0]); i++) {for(varj=1; j<=12; j++) {vardayStart;vardayEnd;
dayStart=1;
dayEnd=getDaysOfMonth(i, j);
sumWidth+=createMonthChart(i, j, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}
}for(varj=1; j<=parseInt(endArr[1]); j++) {vardayStart;vardayEnd;if(j==parseInt(endArr[1])) {
dayStart=1;
dayEnd=parseInt(endArr[2]);
}else{
dayStart=1;
dayEnd=getDaysOfMonth(parseInt(endArr[0]), j);
}
sumWidth+=createMonthChart(parseInt(endArr[0]), j, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}
}
sumWidth+=1;//+1表示第一个div-month的一个padding-left像素$("#chart").width(sumWidth);returnsumWidth;
}//生成当月图表functioncreateMonthChart(year, month, dayStart, dayEnd) {varweek=getWeek(year, month, dayStart);vardayCount=dayEnd-dayStart+1;varhtml='';//月份容器和标题html+='<div class="div-month" ><div class="div-month-title" ><div>'+year+'年'+month+'月</div></div>';//星期for(vari=dayStart; i<=dayEnd; i++) {varweekShow=getWeekShow(week);
week++;if(week>6) week=0;
html+='<div class="div-day-box">'+weekShow+'</div>';
}//日期for(vari=dayStart; i<=dayEnd; i++) {
html+='<div class="div-day-box">'+i+'</div>';
}
html+='</div>';
$("#chart").append(html);varboxWidth=29;//box算上两边的边框一共30varboxsWidth=boxWidth*dayCount+1;
$("#chart").find(".div-month:last").width(boxsWidth);returnboxsWidth;
}//获取当月天数functiongetDaysOfMonth(year, month) {vard=newDate(year, month,0);returnd.getDate();
}//获取当天星期数functiongetWeek(year, month, day) {vard=newDate(year, month-1, day);returnd.getDay();
}//星期转换functiongetWeekShow(i) {switch(i) {case0:return"日";case1:return"一";case2:return"二";case3:return"三";case4:return"四";case5:return"五";case6:return"六";
}return"error";
}//颜色functiongetColor(i) {switch(i) {case1:return"#00aa00";case2:return"#cc0000";
}return"#000";
}</script><tableclass="table-main"cellpadding="0"cellspacing="0"style="width: 100%; border-collapse: collapse;"><tr><tdstyle="width: 240px; vertical-align: top;"><tableclass="table-title"cellpadding="0"cellspacing="0"style="width: 100%; border-collapse: collapse;"><tr><td>部门</td><td>控制节点</td><td></td></tr><tr><tdrowspan="2">项目部</td><tdrowspan="2">下发设计任务单</td><td>计划</td></tr><tr><td>实际</td></tr><tr><tdrowspan="2">项目部</td><tdrowspan="2">组织召开项目定义会</td><td>计划</td></tr><tr><td>实际</td></tr><tr><tdrowspan="2">设计部</td><tdrowspan="2">加工图设计一阶段</td><td>计划</td></tr><tr><td>实际</td></tr><tr><tdrowspan="2">项目部</td><tdrowspan="2">加工图一阶段深化设计</td><td>计划</td></tr><tr><td>实际</td></tr></table></td><tdid="div-container"><divstyle="width: 1000px; height: 400px; padding: 5px; overflow: scroll;"><divid="chart"></div></div></td></tr></table>
View Code
效果图：
应用版(支持谷歌、火狐、IE10、IE9、IE8、IE7)：
@{
ViewBag.Title = "横道图";
// Layout = "~/Views/Shared/_Layout.cshtml";
}<styletype="text/css">div{font-family:微软雅黑;}#chart{float:left;height:300px;padding-left:1px;border-bottom:solid 1px #aaa;background:url(/Content/Styles/imgs/ganttbar.png) center left repeat-y;overflow:hidden;}.div-day-box{float:left;width:28px;height:28px;border:solid 1px #aaa;margin-left:-1px;margin-top:-1px;line-height:30px;text-align:center;}.div-month:first-child{padding-left:1px;}.div-month{float:left;margin-left:-1px;height:88px;overflow:hidden;}.div-month-title{float:left;height:30px;width:100%;margin-left:-1px;text-align:center;line-height:28px;overflow:hidden;}.div-month-title div{border-left:solid 1px #aaa;border-right:solid 1px #aaa;border-top:solid 1px #aaa;font-size:16px;}.div-bar-box{float:left;width:30px;height:29px;border-bottom:solid 1px #aaa;margin-left:-1px;margin-top:-1px;line-height:29px;text-align:center;background:url(/Content/Styles/imgs/ganttbar.png) center right no-repeat;}.div-bar-box-inner{margin-top:8px;width:30px;height:12px;}.div-title-h{float:left;height:86px;line-height:87px;width:49px;border:solid 1px #aaa;margin-left:-1px;text-align:center;font-size:16px;}.div-subtitle-h{float:left;height:86px;line-height:87px;width:148px;border:solid 1px #aaa;margin-left:-1px;text-align:center;font-size:16px;}.div-title{float:left;height:57px;width:49px;line-height:57px;border:solid 1px #aaa;margin-top:-1px;margin-left:-1px;text-align:center;}.div-subtitle{float:left;height:57px;width:148px;line-height:57px;border:solid 1px #aaa;margin-top:-1px;margin-left:-1px;text-align:center;}</style><scripttype="text/javascript">$(function() {
});//重新生成functioncreateChart(globalStart, globalEnd, rows) {varerrorMsg="";for(vari=0; i<rows.length; i++) {if(!checkDate(globalStart, rows[i].planStart, rows[i].planEnd, globalEnd)||!checkDate(globalStart, rows[i].ActualStartDate, rows[i].finalDate, globalEnd)) {if($.trim(rows[i].planStart)!=""||$.trim(rows[i].planEnd)!=""||$.trim(rows[i].ActualStartDate)!=""||$.trim(rows[i].finalDate)!="") {
errorMsg+="第"+(i+1)+"行【"+rows[i].DepName+"】【"+rows[i].controlNode+"】输入的时间范围有错误，请检查\r\n";
}
}
}if(errorMsg!="") {
alert(errorMsg);returnfalse;
}
$("#chart").html("");
$("#chart2").html("");vardataRowCount=0;varsumWidth=createMonthsChart(globalStart, globalEnd);for(vari=0; i<rows.length; i++) {if(checkDate(globalStart, rows[i].planStart, rows[i].planEnd, globalEnd)&&checkDate(globalStart, rows[i].ActualStartDate, rows[i].finalDate, globalEnd)) {
createBar(sumWidth, globalStart, dateformatter(rows[i].planStart), dateformatter(rows[i].planEnd), globalEnd);
createBar(sumWidth, globalStart, dateformatter(rows[i].ActualStartDate), dateformatter(rows[i].finalDate), globalEnd);
dataRowCount++;
}else{if($.trim(rows[i].planStart)!=""||$.trim(rows[i].planEnd)!=""||$.trim(rows[i].ActualStartDate)!=""||$.trim(rows[i].finalDate)!="") {
errorMsg+="第"+(i+1)+"行【"+rows[i].DepName+"】【"+rows[i].controlNode+"】输入的时间范围有错误，请检查\r\n";
}
}
}
$("#title-container").html("");
$("#title-container").append('<div class="div-title-h">部门</div><div class="div-subtitle-h">控制节点</div>')for(vari=0; i<rows.length; i++) {if(checkDate(globalStart, rows[i].planStart, rows[i].planEnd, globalEnd)&&checkDate(globalStart, rows[i].ActualStartDate, rows[i].finalDate, globalEnd)) {
$("#title-container").append('<div class="div-title">'+rows[i].DepName+'</div><div class="div-subtitle">'+rows[i].controlNode+'</div>')
}
}
$("#title-container").height(87+58*dataRowCount*2);
$("#chart").height(87+29*dataRowCount*2);//div滚动setTimeout(function() {
top.$("#chartdiv").scroll(function() {
top.$("#title-container").css("margin-top","-"+top.$("#chartdiv").scrollTop()+"px");
top.$("#chart2").css("margin-left","-"+top.$("#chartdiv").scrollLeft()+"px");
});varchartMain=top.$("#chart-main");
chartMain.height(chartMain.parent().height()-30);
top.$("#chartdiv").width(chartMain.parent().width()-200);
top.$("#chartdiv2").width(chartMain.parent().width()-218);
},200);returntrue;
}//生成时间条varcolorIndex=1;functioncreateBar(sumWidth, globalStart, start, end, globalEnd) {varglobalStartArr=globalStart.split('-');varglobalEndArr=globalEnd.split('-');varstartArr=start.split('-');varendArr=end.split('-');varglobalStartDate=newDate(toInt(globalStartArr[0]), toInt(globalStartArr[1])-1, toInt(globalStartArr[2]));varglobalEndDate=newDate(toInt(globalEndArr[0]), toInt(globalEndArr[1])-1, toInt(globalEndArr[2]));varstartDate=newDate(toInt(startArr[0]), toInt(startArr[1])-1, toInt(startArr[2]));varendDate=newDate(toInt(endArr[0]), toInt(endArr[1])-1, toInt(endArr[2]));vardays1=(startDate-globalStartDate)/(1000*60*60*24);vardays2=(endDate-startDate)/(1000*60*60*24);vardays3=(globalEndDate-endDate)/(1000*60*60*24);varhtml='';for(vari=1; i<=days1; i++) {
html+='<div class="div-bar-box"></div>';
}for(vari=1; i<=days2+1; i++) {
html+='<div class="div-bar-box"><div class="div-bar-box-inner" style="background-color:'+getColor(colorIndex)+';"></div></div>';
}
colorIndex+=1;if(colorIndex>2) colorIndex=1;for(vari=1; i<=days3; i++) {
html+='<div class="div-bar-box"></div>';
}
$("#chart").append(html);
}//生成连续月份图表functioncreateMonthsChart(start, end) {varsumWidth=0;varstartArr=start.split('-');varendArr=end.split('-');if(startArr[0]==endArr[0]) {//同一年for(vari=toInt(startArr[1]); i<=toInt(endArr[1]); i++) {vardayStart;vardayEnd;if(toInt(startArr[1])==toInt(endArr[1])) {//同月dayStart=toInt(startArr[2]);
dayEnd=toInt(endArr[2]);
}else{//跨月if(i==toInt(startArr[1])) {
dayStart=toInt(startArr[2]);
dayEnd=getDaysOfMonth(toInt(startArr[0]), i);
}elseif(i==toInt(endArr[1])) {
dayStart=1;
dayEnd=toInt(endArr[2]);
}else{
dayStart=1;
dayEnd=getDaysOfMonth(toInt(startArr[0]), i);
}
}
sumWidth+=createMonthChart(toInt(startArr[0]), i, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}
}else{//跨年for(varj=toInt(startArr[1]); j<=12; j++) {vardayStart;vardayEnd;if(j==toInt(startArr[1])) {
dayStart=toInt(startArr[2]);
dayEnd=getDaysOfMonth(toInt(startArr[0]), j);
}else{
dayStart=1;
dayEnd=getDaysOfMonth(toInt(startArr[0]), j);
}
sumWidth+=createMonthChart(toInt(startArr[0]), j, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}for(vari=toInt(startArr[0])+1; i<toInt(endArr[0]); i++) {for(varj=1; j<=12; j++) {vardayStart;vardayEnd;
dayStart=1;
dayEnd=getDaysOfMonth(i, j);
sumWidth+=createMonthChart(i, j, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}
}for(varj=1; j<=toInt(endArr[1]); j++) {vardayStart;vardayEnd;if(j==toInt(endArr[1])) {
dayStart=1;
dayEnd=toInt(endArr[2]);
}else{
dayStart=1;
dayEnd=getDaysOfMonth(toInt(endArr[0]), j);
}
sumWidth+=createMonthChart(toInt(endArr[0]), j, dayStart, dayEnd)-1;//-1表示div-month的一个margin-left像素}
}
sumWidth+=1;//+1表示第一个div-month的一个padding-left像素$("#chart").width(sumWidth);
$("#chart2").width(sumWidth);returnsumWidth;
}//生成当月图表functioncreateMonthChart(year, month, dayStart, dayEnd) {varweek=getWeek(year, month, dayStart);vardayCount=dayEnd-dayStart+1;varhtml='';//月份容器和标题html+='<div class="div-month" ><div class="div-month-title" ><div>'+year+'年'+month+'月</div></div>';//星期for(vari=dayStart; i<=dayEnd; i++) {varweekShow=getWeekShow(week);
week++;if(week>6) week=0;
html+='<div class="div-day-box">'+weekShow+'</div>';
}//日期for(vari=dayStart; i<=dayEnd; i++) {
html+='<div class="div-day-box">'+i+'</div>';
}
html+='</div>';
$("#chart").append(html);
$("#chart2").append(html);varboxWidth=29;//box算上两边的边框一共30varboxsWidth=boxWidth*dayCount+1;
$("#chart").find(".div-month:last").width(boxsWidth);
$("#chart2").find(".div-month:last").width(boxsWidth);returnboxsWidth;
}//获取当月天数functiongetDaysOfMonth(year, month) {vard=newDate(year, month,0);returnd.getDate();
}//获取当天星期数functiongetWeek(year, month, day) {vard=newDate(year, month-1, day);returnd.getDay();
}//星期转换functiongetWeekShow(i) {switch(i) {case0:return"日";case1:return"一";case2:return"二";case3:return"三";case4:return"四";case5:return"五";case6:return"六";
}return"error";
}//颜色functiongetColor(i) {switch(i) {case1:return"#00aa00";case2:return"#cc0000";
}return"#000";
}//日期格式functiondateformatter(value) {if(!value)return"";if(valueinstanceofDate) {returnvalue.format("yyyy-MM-dd");
}elseif(value.indexOf("Date")!=-1) {vardate=newDate();
date.setTime(value.replace(/\/Date\((-?\d+)\)\//,'$1'));returndate.format("yyyy-MM-dd");
}elseif($.trim(value)!="") {vardate=newDate(value.replace(/-/g,'/'));returndate.format("yyyy-MM-dd");
}
}//日期格式functiondateparser(value) {if(!value)returnnewDate();if(value.indexOf("Date")!=-1) {vardate=newDate();
date.setTime(value.replace(/\/Date\((-?\d+)\)\//,'$1'));returndate;
}else{vararr1=value.split('-');vary=toInt(arr1[0],10);varM=toInt(arr1[1],10);vard=toInt(arr1[2],10);if(!isNaN(y)&&!isNaN(M)&&!isNaN(d)) {returnnewDate(y, M-1, d);
}else{returnnewDate();
}
}
}//日期检查functioncheckDate(globalStart, start, end, globalEnd) {if($.trim(globalStart)==""||$.trim(start)==""||$.trim(end)==""||$.trim(globalEnd)=="") {returnfalse;
}varglobalStartArr=dateformatter(globalStart).split('-');varglobalEndArr=dateformatter(globalEnd).split('-');varstartArr=dateformatter(start).split('-');varendArr=dateformatter(end).split('-');varglobalStartDate=newDate(toInt(globalStartArr[0]), toInt(globalStartArr[1])-1, toInt(globalStartArr[2]));varglobalEndDate=newDate(toInt(globalEndArr[0]), toInt(globalEndArr[1])-1, toInt(globalEndArr[2]));varstartDate=newDate(toInt(startArr[0]), toInt(startArr[1])-1, toInt(startArr[2]));varendDate=newDate(toInt(endArr[0]), toInt(endArr[1])-1, toInt(endArr[2]));if(globalStartDate<=startDate&&startDate<=endDate&&endDate<=globalEndDate) {returntrue;
}returnfalse;
}//转换functiontoInt(val) {returnparseInt(val,10);
}</script><divid="chart-main"style="overflow: hidden; width: 100%; height: 500px;"><divid="title-container"style="float: left; width: 199px; padding-left: 1px; height: 500px;
overflow: hidden;"><divclass="div-title-h">部门</div><divclass="div-subtitle-h">控制节点</div></div><divid="chartdiv"style="float: left; margin-left: -1px; width: 1000px; height: 100%;
overflow: scroll;"><divid="chart"></div></div><divid="title-container2"style="position: absolute; left: 0; top: 30px; width: 199px;
padding-left: 1px; height: 88px; background-color: #fff; overflow: hidden;"><divclass="div-title-h">部门</div><divclass="div-subtitle-h">控制节点</div></div><divid="chartdiv2"style="position: absolute; right: 18px; top: 30px; width: 100px;
height: 88px; background-color: #fff; overflow: hidden;"><divid="chart2"></div></div></div>
View Code
效果图：