简单横道图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
    {
        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>
<script type="text/javascript">
    $(function () {
        $("#div-container").find("div:first").width($("#div-container").width());
        createChart();
    });

    //重新生成
    function createChart() {
        $("#chart").html("");
        setTimeout(function () {
            var sumWidth = 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);
    }

    //生成时间条
    var colorIndex = 1;
    function createBar(sumWidth, globalStart, start, end, globalEnd) {
        var globalStartArr = globalStart.split(‘-‘);
        var globalEndArr = globalEnd.split(‘-‘);
        var startArr = start.split(‘-‘);
        var endArr = end.split(‘-‘);
        var globalStartDate = new Date(parseInt(globalStartArr[0]), parseInt(globalStartArr[1]) - 1, 1);
        var globalEndDate = new Date(parseInt(globalEndArr[0]), parseInt(globalEndArr[1]) - 1, getDaysOfMonth(parseInt(globalEndArr[0]), parseInt(globalEndArr[1])));
        var startDate = new Date(parseInt(startArr[0]), parseInt(startArr[1]) - 1, parseInt(startArr[2]));
        var endDate = new Date(parseInt(endArr[0]), parseInt(endArr[1]) - 1, parseInt(endArr[2]));
        var days1 = (startDate - globalStartDate) / (1000 * 60 * 60 * 24);
        var days2 = (endDate - startDate) / (1000 * 60 * 60 * 24);
        var days3 = (globalEndDate - endDate) / (1000 * 60 * 60 * 24);
        var html = ‘‘;
        for (var i = 1; i <= days1; i++) {
            html += ‘<div class="div-bar-box"></div>‘;
        }
        for (var i = 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 (var i = 1; i <= days3; i++) {
            html += ‘<div class="div-bar-box"></div>‘;
        }
        $("#chart").append(html);
    }

    //生成连续月份图表
    function createMonthsChart(start, end) {
        var sumWidth = 0;
        var startArr = start.split(‘-‘);
        var endArr = end.split(‘-‘);
        if (startArr[0] == endArr[0]) { //同一年
            for (var i = parseInt(startArr[1]); i <= parseInt(endArr[1]); i++) {
                sumWidth += createMonthChart(parseInt(startArr[0]), i) - 1; //-1表示div-month的一个margin-left像素
            }
        }
        else { //跨年
            for (var j = parseInt(startArr[1]); j <= 12; j++) {
                sumWidth += createMonthChart(parseInt(startArr[0]), j) - 1; //-1表示div-month的一个margin-left像素
            }
            for (var i = parseInt(startArr[0]) + 1; i < parseInt(endArr[0]); i++) {
                for (var j = 1; j <= 12; j++) {
                    sumWidth += createMonthChart(i, j) - 1; //-1表示div-month的一个margin-left像素
                }
            }
            for (var j = 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);
        return sumWidth;
    }

    //生成当月图表
    function createMonthChart(year, month) {
        var week = getWeek(year, month, 1);
        var dayCount = getDaysOfMonth(year, month);
        var html = ‘‘;

        //月份容器和标题
        html += ‘<div class="div-month" ><div class="div-month-title" ><div>‘ + year + ‘年 ‘ + month + ‘月</div></div>‘;

        //星期
        for (var i = 0; i < dayCount; i++) {
            var weekShow = getWeekShow(week);
            week++;
            if (week > 6) week = 0;
            html += ‘<div class="div-day-box">‘ + weekShow + ‘</div>‘;
        }

        //日期
        for (var i = 0; i < dayCount; i++) {
            html += ‘<div class="div-day-box">‘ + (i + 1) + ‘</div>‘;
        }

        html += ‘</div>‘;
        $("#chart").append(html);

        var boxWidth = 29; //box算上两边的边框一共30
        var boxsWidth = boxWidth * dayCount + 1;
        $("#chart").find(".div-month:last").width(boxsWidth);
        return boxsWidth;
    }

    //获取当月天数
    function getDaysOfMonth(year, month) {
        var d = new Date(year, month, 0);
        return d.getDate();
    }

    //获取当天星期数
    function getWeek(year, month, day) {
        var d = new Date(year, month - 1, day);
        return d.getDay();
    }

    //星期转换
    function getWeekShow(i) {
        switch (i) {
            case 0:
                return "日";
            case 1:
                return "一";
            case 2:
                return "二";
            case 3:
                return "三";
            case 4:
                return "四";
            case 5:
                return "五";
            case 6:
                return "六";
        }
        return "error";
    }

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