简单横道图Demo

2015-09-24 11:35:03来源:cnblogs.com作者:秋荷雨翔人点击

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

@{    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>

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

@{    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;        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><script type="text/javascript">    $(function () {        $("#div-container").find("div:first").width($("#div-container").width());        createChart();    });    //重新生成    function createChart() {        $("#chart").html("");        setTimeout(function () {            var globalStart = '2014-11-18';            var globalEnd = '2015-02-05';            var sumWidth = 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);    }    //生成时间条    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, parseInt(globalStartArr[2]));        var globalEndDate = new Date(parseInt(globalEndArr[0]), parseInt(globalEndArr[1]) - 1, parseInt(globalEndArr[2]));        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++) {                var dayStart;                var dayEnd;                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);                    }                    else if (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 (var j = parseInt(startArr[1]); j <= 12; j++) {                var dayStart;                var dayEnd;                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 (var i = parseInt(startArr[0]) + 1; i < parseInt(endArr[0]); i++) {                for (var j = 1; j <= 12; j++) {                    var dayStart;                    var dayEnd;                    dayStart = 1;                    dayEnd = getDaysOfMonth(i, j);                    sumWidth += createMonthChart(i, j, dayStart, dayEnd) - 1; //-1表示div-month的一个margin-left像素                }            }            for (var j = 1; j <= parseInt(endArr[1]); j++) {                var dayStart;                var dayEnd;                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);        return sumWidth;    }    //生成当月图表    function createMonthChart(year, month, dayStart, dayEnd) {        var week = getWeek(year, month, dayStart);        var dayCount = dayEnd - dayStart + 1;        var html = '';        //月份容器和标题        html += '<div class="div-month" ><div class="div-month-title" ><div>' + year + '' + month + '月</div></div>';        //星期        for (var i = dayStart; i <= dayEnd; i++) {            var weekShow = getWeekShow(week);            week++;            if (week > 6) week = 0;            html += '<div class="div-day-box">' + weekShow + '</div>';        }        //日期        for (var i = dayStart; i <= dayEnd; i++) {            html += '<div class="div-day-box">' + i + '</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>

效果图:

 

 

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

@{    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: 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><script type="text/javascript">    $(function () {    });    //重新生成    function createChart(globalStart, globalEnd, rows) {        var errorMsg = "";        for (var i = 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);            return false;        }        $("#chart").html("");        $("#chart2").html("");        var dataRowCount = 0;        var sumWidth = createMonthsChart(globalStart, globalEnd);        for (var i = 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 (var i = 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");            });            var chartMain = top.$("#chart-main");            chartMain.height(chartMain.parent().height() - 30);            top.$("#chartdiv").width(chartMain.parent().width() - 200);            top.$("#chartdiv2").width(chartMain.parent().width() - 218);        }, 200);        return true;    }    //生成时间条    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(toInt(globalStartArr[0]), toInt(globalStartArr[1]) - 1, toInt(globalStartArr[2]));        var globalEndDate = new Date(toInt(globalEndArr[0]), toInt(globalEndArr[1]) - 1, toInt(globalEndArr[2]));        var startDate = new Date(toInt(startArr[0]), toInt(startArr[1]) - 1, toInt(startArr[2]));        var endDate = new Date(toInt(endArr[0]), toInt(endArr[1]) - 1, toInt(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 = toInt(startArr[1]); i <= toInt(endArr[1]); i++) {                var dayStart;                var dayEnd;                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);                    }                    else if (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 (var j = toInt(startArr[1]); j <= 12; j++) {                var dayStart;                var dayEnd;                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 (var i = toInt(startArr[0]) + 1; i < toInt(endArr[0]); i++) {                for (var j = 1; j <= 12; j++) {                    var dayStart;                    var dayEnd;                    dayStart = 1;                    dayEnd = getDaysOfMonth(i, j);                    sumWidth += createMonthChart(i, j, dayStart, dayEnd) - 1; //-1表示div-month的一个margin-left像素                }            }            for (var j = 1; j <= toInt(endArr[1]); j++) {                var dayStart;                var dayEnd;                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);        return sumWidth;    }    //生成当月图表    function createMonthChart(year, month, dayStart, dayEnd) {        var week = getWeek(year, month, dayStart);        var dayCount = dayEnd - dayStart + 1;        var html = '';        //月份容器和标题        html += '<div class="div-month" ><div class="div-month-title" ><div>' + year + '' + month + '月</div></div>';        //星期        for (var i = dayStart; i <= dayEnd; i++) {            var weekShow = getWeekShow(week);            week++;            if (week > 6) week = 0;            html += '<div class="div-day-box">' + weekShow + '</div>';        }        //日期        for (var i = dayStart; i <= dayEnd; i++) {            html += '<div class="div-day-box">' + i + '</div>';        }        html += '</div>';        $("#chart").append(html);        $("#chart2").append(html);        var boxWidth = 29; //box算上两边的边框一共30        var boxsWidth = boxWidth * dayCount + 1;        $("#chart").find(".div-month:last").width(boxsWidth);        $("#chart2").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";    }    //日期格式    function dateformatter(value) {        if (!value) return "";        if (value instanceof Date) {            return value.format("yyyy-MM-dd");        }        else if (value.indexOf("Date") != -1) {            var date = new Date();            date.setTime(value.replace(///Date/((-?/d+)/)///, '$1'));            return date.format("yyyy-MM-dd");        }        else if ($.trim(value) != "") {            var date = new Date(value.replace(/-/g, '/'));            return date.format("yyyy-MM-dd");        }    }    //日期格式    function dateparser(value) {        if (!value) return new Date();        if (value.indexOf("Date") != -1) {            var date = new Date();            date.setTime(value.replace(///Date/((-?/d+)/)///, '$1'));            return date;        }        else {            var arr1 = value.split('-');            var y = toInt(arr1[0], 10);            var M = toInt(arr1[1], 10);            var d = toInt(arr1[2], 10);            if (!isNaN(y) && !isNaN(M) && !isNaN(d)) {                return new Date(y, M - 1, d);            } else {                return new Date();            }        }    }    //日期检查    function checkDate(globalStart, start, end, globalEnd) {        if ($.trim(globalStart) == "" || $.trim(start) == "" || $.trim(end) == "" || $.trim(globalEnd) == "") {            return false;        }        var globalStartArr = dateformatter(globalStart).split('-');        var globalEndArr = dateformatter(globalEnd).split('-');        var startArr = dateformatter(start).split('-');        var endArr = dateformatter(end).split('-');        var globalStartDate = new Date(toInt(globalStartArr[0]), toInt(globalStartArr[1]) - 1, toInt(globalStartArr[2]));        var globalEndDate = new Date(toInt(globalEndArr[0]), toInt(globalEndArr[1]) - 1, toInt(globalEndArr[2]));        var startDate = new Date(toInt(startArr[0]), toInt(startArr[1]) - 1, toInt(startArr[2]));        var endDate = new Date(toInt(endArr[0]), toInt(endArr[1]) - 1, toInt(endArr[2]));        if (globalStartDate <= startDate            && startDate <= endDate            && endDate <= globalEndDate) {            return true;        }        return false;    }    //转换    function toInt(val) {        return parseInt(val, 10);    }</script><div id="chart-main" style="overflow: hidden; width: 100%; height: 500px;">    <div id="title-container" style="float: left; width: 199px; padding-left: 1px; height: 500px;        overflow: hidden;">        <div class="div-title-h">            部门        </div>        <div class="div-subtitle-h">            控制节点        </div>    </div>    <div id="chartdiv" style="float: left; margin-left: -1px; width: 1000px; height: 100%;        overflow: scroll;">        <div id="chart">        </div>    </div>    <div id="title-container2" style="position: absolute; left: 0; top: 30px; width: 199px;        padding-left: 1px; height: 88px; background-color: #fff; overflow: hidden;">        <div class="div-title-h">            部门        </div>        <div class="div-subtitle-h">            控制节点        </div>    </div>    <div id="chartdiv2" style="position: absolute; right: 18px; top: 30px; width: 100px;        height: 88px; background-color: #fff; overflow: hidden;">        <div id="chart2">        </div>    </div></div>

效果图:

 

相关文章

    无相关信息

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台