简单横道图Demo

代码(每个月都显示整月)：

@{
    ViewBag.Title = "横道图";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="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
    
        width 28px
        border
        margin-left -1px
        margin-top
        line-height 30px
        text-align center
    
    .div-month:first-child
    
    
    .div-month
     89px
    
    .div-month-title
     100%
    
    .div-month-title div
    
        border-left
        border-right
        border-top
        font-size 16px
    
    .div-bar-Box
     url(/Content/Styles/imgs/ganttbar.png) center right no-repeat
    
    .div-bar-Box-inner
     8px 12px
    
    .table-main td
    
    
    .table-title
     63px
    
    .table-title td
    
    
    .table-title tr td:last-child
     none}
</style>
script ="text/javascript"
    $(function () {
        $("#div-container).find(div:first).width($().width());
        createChart();
    });

    //重新生成
     createChart() {
        $(#chart).html("");
        setTimeout( () {
            var sumWidth = createMonthsChart('2015-06,2016-02);
            createBar(sumWidth,1)">2015-06-202015-06-292015-06-222015-07-042015-06-302015-07-082015-07-062015-06-272015-07-152015-06-262015-07-182015-07-112015-07-282015-07-132015-07-26);
            $().height(87 + 29 * 8);
        },1)">100);
    }

    生成时间条
     colorIndex = 1;
     createBar(sumWidth,globalStart,start,end,globalEnd) {
         globalStartArr  globalStart.split(-);
         globalEndArr  globalEnd.split( startArr  start.split( endArr  end.split( globalStartDate new Date(parseInt(globalStartArr[0]),parseInt(globalStartArr[]) -  globalEndDate  Date(parseInt(globalEndArr[])));
         startDate  Date(parseInt(startArr[2]));
         endDate  Date(parseInt(endArr[ days1  (startDate  globalStartDate) / (1000 60 24 days2  (endDate  startDate)  days3  (globalEndDate  endDate)  html '';
        for i ; i <= days1; i++) {
            html += <div class="div-bar-Box"></div>;
        }
        ; i<div class="div-bar-Box"><div class="div-bar-Box-inner" style="background-color:' + getColor(colorIndex) ;"></div></div>;
        }
        colorIndex if (colorIndex > ) colorIndex  days3; i;
        }
        $().append(html);
    }

    生成连续月份图表
     createMonthsChart(start,end) {
         (startArr[] == endArr[]) { 同一年
             parseInt(startArr[]); i  parseInt(endArr[]); i) {
                sumWidth += createMonthChart(parseInt(startArr[; -1表示div-month的一个margin-left像素
            }
        }
        else { 跨年
             j ]); j <= 12; j            }
            <) {
                ; j ) {
                    sumWidth  createMonthChart(i,1)">                }
            }
            ]); j createMonthChart(parseInt(endArr[            }
        }
        sumWidth +1表示第一个div-month的一个padding-left像素
        $().width(sumWidth);
        return sumWidth;
    }

    生成当月图表
     createMonthChart(year,month) {
         week  getWeek(year,month,1)"> dayCount  getDaysOfMonth(year,month);
        ;

        月份容器和标题
        html <div class="div-month" ><div class="div-month-title" ><div> year 年  month 月</div></div>星期
         dayCount; i) {
             weekShow  getWeekShow(week);
            week;
             (week 6) week ;
            html <div class="div-day-Box"></div>;
        }

        日期
         (i ) ;
        }

        html ;
        $().append(html);

         BoxWidth 29Box算上两边的边框一共30
         BoxsWidth *.div-month:last).width(BoxsWidth);
         BoxsWidth;
    }

    获取当月天数
     d  Date(year,1)"> d.getDate();
    }

    获取当天星期数
     d.getDay();
    }

    星期转换
     getWeekShow(i) {
        switch (i) {
            case :
                return 日一二3三4四5五六error;
    }

    颜色
     getColor(i) {
        #00aa00#cc0000#000;
    }
scripttable class="table-main" cellpadding="0" cellspacing style="width: 100%; border-collapse: collapse;">
    tr>
        td ="width: 240px; vertical-align: top;">
            ="table-title">
                >
                    td>
                        部门
                    
                        控制节点
                    rowspan="2"
                        项目部
                    
                        下发设计任务单
                    
                        计划
                    
                        实际
                    
                        组织召开项目定义会
                    
                        设计部
                    
                        加工图设计一阶段
                    
                        加工图一阶段深化设计
                    tableid="div-container"div ="width: 1000px; height: 400px; padding: 5px; overflow: scroll;"="chart"div>

View Code

改进版(每个月显示的可能不是整月)：

 globalStart 2014-11-18 globalEnd 2015-02-05 createMonthsChart(globalStart,globalEnd);
            createBar(sumWidth,1)">2014-11-192014-11-292014-11-202014-12-012014-11-302014-12-152014-12-032014-12-132014-12-172015-01-162014-12-182015-01-202015-02-032015-01-182015-02-04 dayStart;
                 dayEnd;
                 (parseInt(startArr[])) { 同月
                    dayStart ]);
                    dayEnd ]);
                }
                跨月
                    ])) {
                        dayStart ]);
                        dayEnd  getDaysOfMonth(parseInt(startArr[else ;
                        dayEnd ]);
                    }
                     {
                        dayStart  (j ])) {
                    dayStart  {
                    dayStart ;
                    dayEnd ) {
                     dayStart;
                     dayEnd;
                    dayStart  getDaysOfMonth(i,j);
                    sumWidth  getDaysOfMonth(parseInt(endArr[ dayEnd  dayStart  dayStart; i  dayEnd; i>

View Code

效果图：

 

 

应用版(支持谷歌、火狐、IE10、IE9、IE8、IE7)：

@{
    ViewBag.Title = "横道图";
    // Layout = "~/Views/Shared/_Layout.cshtml";
}
 88px 29px
    
    .div-title-h
     86px 87px 49px
    
    .div-subtitle-h
     148px
    
    .div-title
     57px
    
    .div-subtitle
     () {

    });

     createChart(globalStart,globalEnd,rows) {
         errorMsg  rows.length; i!checkDate(globalStart,rows[i].planStart,rows[i].planEnd,globalEnd)
                ||  ($.trim(rows[i].planStart) != "" || $.trim(rows[i].planEnd)  $.trim(rows[i].ActualStartDate)  $.trim(rows[i].finalDate) ) {
                    errorMsg 第" 行【 rows[i].DepName 】【 rows[i].controlNode 】输入的时间范围有错误，请检查\r\n;
                }
            }
        }

         (errorMsg ) {
            alert(errorMsg);
            false;
        }

        $();
        $(#chart2 daTarowCount  (checkDate(globalStart,1)">&& checkDate(globalStart,globalEnd)) {
                createBar(sumWidth,dateformatter(rows[i].planStart),dateformatter(rows[i].planEnd),globalEnd);
                createBar(sumWidth,dateformatter(rows[i].ActualStartDate),dateformatter(rows[i].finalDate),globalEnd);
                daTarowCount;
            }
             {
                ;
                }
            }
        }
        $(#title-container).append(<div class="div-title-h">部门</div><div class="div-subtitle-h">控制节点</div>)
        <div class="div-title"></div><div class="div-subtitle">)
            }
        }
        $(58 );

        div滚动
        setTimeout( () {
            top.$(#chartdiv).scroll( () {
                top.$().css(margin-top top.$().scrollTop() px);
                top.$(margin-left).scrollLeft() );
            });
             chartMain #chart-main);
            chartMain.height(chartMain.parent().height() 30);
            top.$().width(chartMain.parent().width() 200#chartdiv2218true Date(toInt(globalStartArr[ Date(toInt(globalEndArr[ Date(toInt(startArr[ Date(toInt(endArr[ toInt(startArr[ toInt(endArr[ (toInt(startArr[ getDaysOfMonth(toInt(startArr[ createMonthChart(toInt(startArr[ getDaysOfMonth(toInt(endArr[ createMonthChart(toInt(endArr[).width(sumWidth);
        $().append(html);
        $().width(BoxsWidth);
        $(日期格式
     dateformatter(value) {
        value)  (value instanceof Date) {
             value.format(yyyy-MM-dd);
        }
         (value.indexOf(Date date  Date();
            date.setTime(value.replace(\/Date\((-?\d+)\)\/$1));
             date.format( ($.trim(value)  Date(value.replace(g,1)">);
        }
    }

     dateparser(value) {
         Date();
         date;
        }
         {
             arr1  value.split();
             y  toInt(arr1[],1)">10 M isNaN(y) && isNaN(M) isNaN(d)) {
                 Date(y,M  Date();
            }
        }
    }

    日期检查
     ($.trim(globalStart) ==  $.trim(start)  $.trim(end)  $.trim(globalEnd)  dateformatter(globalStart).split( dateformatter(globalEnd).split( dateformatter(start).split( dateformatter(end).split(]));

         (globalStartDate  startDate
             endDate
             globalEndDate) {
            转换
     toInt(val) {
         parseInt(val,1)">);
    }
="chart-main"="overflow: hidden; width: 100%; height: 500px;"="title-container"="float: left; width: 199px; padding-left: 1px; height: 500px;
        overflow: hidden;"="div-title-h"
            部门
        ="div-subtitle-h"
            控制节点
        ="chartdiv"="float: left; margin-left: -1px; width: 1000px; height: 100%;
        overflow: scroll;"="title-container2"="position: absolute; left: 0; top: 30px; width: 199px;
        padding-left: 1px; height: 88px; background-color: #fff; overflow: hidden;"="chartdiv2"="position: absolute; right: 18px; top: 30px; width: 100px;
        height: 88px; background-color: #fff; overflow: hidden;"="chart2">

View Code

效果图：