jquery甘特图插件

之前有个项目管理的项目 甲方要求必须做成跟他设计图一个样，已有插件不符合他要求，改起来太费劲，无奈自己写了一个，发出来共享一下。

先看效果图：

附使用方法：

参数设置

 		stime: '2017-01-01',
	        etime: '2017-02-01',
	        oldstime: '2017-01-01',
            	oldetime:'2017-02-01',
	        cellheight: 27,//每行的高度
	        //line: 8,//行数
	        left_box: "gantt_left",//左边容器 样式名
	        right_box: "gantt_right",//右边容器样式名
	        color_end: "#5b8d3b",//已完成
	        color_out: "#bb3b09",//超期
	        color_ing: "#f58c50",//进行中
	        color_unstart: "#acabaa",//未开始
	        showold: 0,//是否显示对比 0 否  1是
           	show_jd:0,//是否显示审核节点

头部引用：

<script src="js/jquery-1.11.3.js"></script>
<script src="js/jQuery.DemonGantt.v1.0.js"></script><!---自定义甘特图插件------------->

html代码：

<!---甘特图-------->
    <div class="w100" >
        <div class="gantt_box mar_t40  border_01">
            <h1>里程碑甘特图<div class="fr confirm_box"><input type="button" value="" class="confirm" />甘特图对比</div></h1>
            <div class="gantt_box bg_color_01" id="gantt">
                
                <div class="col-xs-1">
                    <ul class="gantt_left" id="gantt_left">
                        
                    </ul>
                </div>
                <div class="col-xs-11">
                    <div class="gantt_r_bg"></div>
                    <ul class="gantt_right" id="gantt_right">
                        
                    </ul>
                </div>
                
                <div class="clearfix"></div>
                <div class="gantt_explain">
                    <span><i class="color_end"></i>已完成</span>
                    <span><i class="color_out"></i>超期</span>
                    <span><i class="color_ing"></i>进行中</span>
                    <span><i class="color_unstart"></i>未开始</span>
                </div>
            </div>
        </div>

       <div class="clearfix" style=height:200px;></div>
     
    </div>

css 代码

/*******甘特图*/

.de_t_bg{ height:49px; line-height:49px;background:#3c70a7; margin-top:20px; padding:0;}
.de_title{ background:url(../images/de_t_01.jpg) left no-repeat;padding-left:80px;font-size:16px ;color:#ecffff ; font-weight:bold;}

.de_mbx_bg{ height:40px; border-bottom:1px solid #e2e3e8; }

.de_con{ background:#f9f9f9;border: 1px solid #ddd; padding:10px 0;}
.de_con h1{height:27px;line-height:27px;font-size:16px; }

.btn_b_box{ position:absolute; bottom:0px; right:0px;}
.btn_b_box button{ margin-right:10px;}


/***甘特图*****/
.gantt_box{ width:100%;}
.gantt_box h1{ padding-left:40px; height:40px;line-height:40px; font-size:16px;font-weight:bold;}
.confirm_box{ margin-right:15px; line-height:20px;}
.confirm{ width:60px; height:27px; background:url(../images/btn_confirm.png) left bottom no-repeat; border:0;margin-top:7px; }
.confirmed{background-position:top left;}
.bg_color_01{ background:#f1f4fb;}
.gantt_box .col-xs-1{ padding-right:0;}.gantt_box .col-xs-11{ padding-left:0; overflow:hidden;}
 效果单独拿出来之后 开始使用
.col-xs-1 { width: 8.333333333333332%;}
.col-xs-11 {width: 91.66666666666666%;}
.gantt_tb{width:98%;  margin:0 auto;padding:0;}
.gantt_tb tr{ border-bottom:#bbd4ec;}
.gantt_left{ width:90%; margin-left:10%;}
.gantt_left li,.gantt_right li{ width:100%; height:27px; line-height:27px; border-bottom:1px solid #dfe2e7;}



.gantt_right{ width:100%; position:relative; overflow:hidden;}
.gantt_r_bg{ position:absolute; top:0px; left:0px; height:100%; border-right:1px solid #ec9a7e ;
    background: -moz-linear-gradient(left, #f1f4fb 0%, #bcdcfc 100%);
    background: -webkit-gradient(linear, left right, left right, color-stop(0%,#f1f4fb), color-stop(100%,#bcdcfc));
    background: -webkit-linear-gradient(left, #f1f4fb 0%,#bcdcfc 100%);
    background: -o-linear-gradient(left, #f1f4fb 0%,#bcdcfc 100%);
    background: -ms-linear-gradient(left, #f1f4fb 0%,#bcdcfc 100%);
    background: linear-gradient(to right, #f1f4fb 0%,#bcdcfc 100%);
}
.gantt_right .cell{display: inline-block;   height: 100%; /*border-right: 1px solid #ebebeb;*/}
.gantt_right .cellborder{border-left: 1px solid #ebebeb;}
.gantt_right .cell_01{display: inline-block;width:100%;   height:15px;margin:5px 0;background:#50b465;}
.gantt_right .cell_01_left{border-radius:15px 0 0 15px;}
.gantt_right .cell_01_right{border-radius:0 15px  15px 0;}
.gantt_explain{ width:300px; float:right;height:30px; line-height:30px;}
.gantt_explain span{ margin:15px 0;padding-left:15px;}
.gantt_explain span i{ width:10px; height:10px;border-radius: 50%;display:inline-block; margin-right:5px;}

/*审核节点*/
.shjd{ background:url(../images/jd.png) center no-repeat;}


/**甘特图结束*/

jquery 代码：

<script>
        $(function () {
            //甘特图 效果插件
            var stime = "2017-06-01";
            var etime = "2018-08-21";
            var data = [
                    { "id": 1, type: 0, "text": "里程碑", "start_date": "2017-06-01", "end_date": "2017-06-06", "state": 1, "old_start_date": "2017-06-01", "old_end_date": "2017-06-05" },
                    { "id": 2, type: 0, "text": "项目确定", "start_date": "2017-06-06", "end_date": "2017-06-11", "state": 2, "old_start_date": "2017-06-06", "old_end_date": "2017-06-11" },
                    { "id": 3, type: 0, "text": "概念设计", "start_date": "2017-06-11", "end_date": "2017-06-16", "state": 1, "old_start_date": "2017-06-11", "old_end_date": "2017-06-16" },
                    { "id": 4, type: 0, "text": "方案设计", "start_date": "2017-06-16", "end_date": "2017-06-19", "state": 3, "old_start_date": "2017-06-16", "old_end_date": "2017-06-19" },
                    { "id": 4.1, type: 1, "text": "审核节点1", "end_date": "2017-06-19"},
                    { "id": 5, type: 0, "text": "详细设计", "start_date": "2017-06-19", "end_date": "2017-07-01", "state": 4, "old_start_date": "2017-06-19", "old_end_date": "2017-07-01" },
                    { "id": 6, type: 0, "text": "S图签发", "start_date": "2017-07-01", "end_date": "2017-07-14", "state": 4, "old_start_date": "2017-07-01", "old_end_date": "2017-07-14" },
                    { "id": 7, type: 0, "text": "试制验证", "start_date": "2017-07-14", "end_date": "2017-07-28", "state": 4, "old_start_date": "2017-07-14", "old_end_date": "2017-07-28" },
                    { "id": 7.1, type: 1, "text": "审核节点2", "end_date": "2017-07-29" },
                    { "id": 8, type: 0, "text": "A图签发", "start_date": "2017-07-28", "end_date": "2017-08-28", "state": 4, "old_start_date": "2017-07-28", "old_end_date": "2017-08-28" },
                    { "id": 9, type: 0, "text": "顺线签发", "start_date": "2017-08-28", "end_date": "2017-09-15", "state": 4, "old_start_date": "2017-08-28", "old_end_date": "2017-09-15" },
                    { "id": 10, type: 0, "text": "小批签发", "start_date": "2017-09-15", "end_date": "2017-11-28", "state": 4, "old_start_date": "2017-09-15", "old_end_date": "2017-11-28" },
                    { "id": 11, type: 0, "text": "试销", "start_date": "2017-11-28", "end_date": "2018-3-28", "state": 4, "old_start_date": "2017-11-28", "old_end_date": "2018-3-28" },
                    { "id": 12, type: 0, "text": "项目总签发", "start_date": "2018-03-28", "end_date": "2018-08-01", "state": 4, "old_start_date": "2018-03-28", "old_end_date": "2018-08-01" },
                ]
            
            $("#gantt").DemonGantt({
                stime: stime,
                etime: etime,
                show_jd:1,
                data: data
            });

            $(".confirm").click(function () {
                if ($(this).hasClass("confirmed")) {
                    $(this).removeClass("confirmed");
                    $("#gantt").DemonGantt({
                        stime: stime,
                        etime: etime,
                        showold: 0,
                        show_jd: 1,
                        data: data
                    });
                }
                else {
                    $(this).addClass("confirmed");
                    $("#gantt").DemonGantt({
                        stime: stime,
                        etime: etime,
                        showold: 1,
                        show_jd: 1,
                        data: data
                    });
                }
                
            });
            //提示层 
            //$(".cell_01").hover(function () {
            //    var id = $(this).parent().attr("id");
            //    layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', "#"+id, {
            //        tips: [1, '#3595CC'],
            //        time: 4000
            //    });
            //});



           
        });
    </script>

下载链接：点击打开链接