xcbzsy
xcbzsy

JS，统计图表大全－－十一、甘特图

十一、甘特图

简单甘特图

JS，统计图表大全－－十一、甘特图_第1张图片

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: '简易甘特图'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            week: '%Y/%m/%d'
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['制作产品原型', '开发', '测试'],
        reversed: true
    },
    tooltip: {
        dateTimeLabelFormats: {
            day: '%Y/%m/%d'
        }
    },
    series: [{
        name: '项目1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]
});

JS，统计图表大全－－十一、甘特图_第2张图片

代码：

<!DOCTYPE html>
<html>
<head>
<title>ganttu.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="content-type" content="text/html; charset=UTF-8">

<meta name="reason" content="甘特图的实际进度与计划进度可能不符,为了展示实际进度与计划进度的差异和方便统计,自己写了个甘特图框架">

<meta name="mast" content="使用代码之前请留言,禁止转载...">

<meta name="description" content="liuyuhang    的甘特图,当前版本1.0,2019-02-19">
<meta name="description" content="时间日期格式:yyyy-mm-dd">
<meta name="description" content="①计划进度与实际进度双重进度体系">
<meta name="description" content="②有前置任务连接线">
<meta name="description" content="③可修改图颜色">
<meta name="description" content="④可隐藏与展示列">
<meta name="description" content="⑤可隐藏域展示子项目">
<meta name="description" content="⑥可跳转时间到当前时间">
<meta name="description" content="⑦可从当前项目开始时间查看">
<meta name="description" content="⑦可隐藏某时间之前的内容">

<meta name="warning" content="⑧未做图拖拽,并不打算做...">

<meta name="author" content="liuyuhang 13501043063">
<!-- 只引用了这些,其余的并没有引用 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
#ganttu-head {
    height: 70px;
    background-color: #dddddd;
    padding: 10px 20px;
}

#ganttu-body {
    min-height: 780px;
    background-color: #eeeeee;
    padding: 10px 20px;
    font-size: 20px;
}

#ganttu-index-projectName {
    display: inline;
    padding: 5px 15px;
    background-image: linear-gradient(to left, #222222 0%, #222222 75%, #000000 100%);
    color: white;
    border-radius: 18px;
}

#ganttu-index-projectDesc {
    display: inline;
    padding: 5px 15px;
    background-image: linear-gradient(to left, #777777 0%, #777777 75%, #333333 100%);
    color: white;
    border-radius: 18px;
}

td {
    white-space: nowrap
}
</style>
</head>
<body>
    <div id='ganttu-head' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='height'>
        <div style='display: inline;font-size: 30px;font-weight: 430;padding: 5px 15px;'>甘特图面板</div>
        <div id='ganttu-index-projectName'>此项目 名称...</div>
        <div id='ganttu-index-projectDesc'>此项目描述...</div>
    </div>
    <div id='ganttu-body' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style=';overflow-x:scroll;font-size:14px;'>
        <!-- 甘特图放到了这个div中 -->
        <div id="lyh-ganttu" class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='position:relative;padding:0px;height:700px;'></div>
    </div>
</body>
<script type="text/javascript">
    $(function() {
        lyhGanttuInit('lyh-ganttu'); //甘特图初始化
    })

    /**
     * 甘特图数据,变量名固定
     */
    var lyhGanttuData = {
        data : [
            {
                'id' : 1,
                'pid' : 0,
                'projectName' : '任务1',
                'projectCode' : 'task01',
                'planStartAt' : '2019/02/01',
                'planEndAt' : '2019/02/11',
                'startAt' : '2019/1/31',
                'endAt' : '2019/02/12',
                'persent' : '100%',
                'resps' : [ '刘宇航' ],
                'actors' : [ '刘宇航a' ],
                'insiders' : [ '刘宇航i' ],
                'dur' : 3, //计划时间跨度
                'before' : [], //前置任务id
            },
            {
                'id' : 2,
                'pid' : 1,
                'projectName' : '任务2',
                'projectCode' : 'task02',
                'planStartAt' : '2019/02/01',
                'planEndAt' : '2019/02/03',
                'startAt' : '2019/1/31',
                'endAt' : '2019/02/04',
                'persent' : '100%',
                'resps' : [ '刘宇航2' ],
                'actors' : [ '刘宇航b' ],
                'insiders' : [ '刘宇航j' ],
                'dur' : 4,
                'before' : [],
            },
            {
                'id' : 3,
                'pid' : 1,
                'projectName' : '任务3',
                'projectCode' : 'task03',
                'planStartAt' : '2019/02/04',
                'planEndAt' : '2019/02/07',
                'startAt' : '2019/02/05',
                'endAt' : '2019/02/07',
                'persent' : '100%',
                'resps' : [ '张三', '李四', '王五' ],
                'actors' : [ '张三a', '李四b', '王五c' ],
                'insiders' : [ '刘宇航k', '刘宇航f' ],
                'dur' : 4,
                'before' : [ 2 ],
            },
            {
                'id' : 4,
                'pid' : 1,
                'projectName' : '任务4',
                'projectCode' : 'task04',
                'planStartAt' : '2019/02/08',
                'planEndAt' : '2019/02/11',
                'startAt' : '2019/02/08',
                'endAt' : '2019/02/12',
                'persent' : '100%',
                'resps' : [ '李四', '王五' ],
                'actors' : [ '李四b', '王五c' ],
                'insiders' : [ '刘宇航k', '刘宇航f' ],
                'dur' : 4,
                'before' : [ 2, 3 ],
            },
        ]
    }

    /**
     * 甘特图设置,变量名固定
     */
    var lyhGanttuConfig = {
        start : '1900/01/01', //初始化开始时间配置    - 别在意
        end : '1900/01/10', //初始化结束时间配置    - 别在意
        planBorder : '#1a8cff', //计划进度的border颜色
        planBackground : '#80bfff', //计划进度的back颜色
        border : '#ffaa00', //实际进度的border染颜色
        background : '#ffcc66', //实际进度的back颜色
        lineColor : 'green', //前置任务线颜色
        //表格中的thead的题头设置,可按照格式任意添加或减少
        labels : {
            'projectName' : {
                'name' : '         任务名         ',
                'show' : true,
            }, //任务名
            'projectCode' : {
                'name' : '编号',
                'show' : true,
            }, //编号
            'planStartAt' : {
                'name' : '计划开始',
                'show' : true,
            }, //计划开始时间
            'planEndAt' : {
                'name' : '计划结束',
                'show' : false,
            }, //计划结束时间
            'startAt' : {
                'name' : '实际开始',
                'show' : false,
            }, //实际开始时间
            'endAt' : {
                'name' : '实际结束',
                'show' : false,
            }, //实际结束时间
            'persent' : {
                'name' : '完成比例',
                'show' : true,
            }, //完工百分比
            'dur' : {
                'name' : '时长',
                'show' : true,
            }, //持续时间
            'resps' : {
                'name' : '负责人',
                'show' : true,
            }, //负责人
            'actors' : {
                'name' : '参与人',
                'show' : true,
            }, //参与人
            'insiders' : {
                'name' : '知情人',
                'show' : false,
            }, //知情人
            'before' : {
                'name' : '前置任务',
                'show' : false,
            }, //前置任务
            'operate' : {
                'name' : "",
                'show' : true,
            }, //修改按钮
        }
    }

    /**
     * 添加修改功能
     */
    function lyhGanttuDataModifyByOperate() {
        var data = lyhGanttuData.data
        for (var i = 0; i < data.length; i++) {
            data[i]['operate'] = "";
        }
    }

    //================
    //以下为甘特图本身的绘图代码,调用lyhGanttuInit,参数为要加载甘特图的id
    //请使用谷歌浏览器,缩放倍数为100%

    /**
     * 甘特图初始化函数
     */
    function lyhGanttuInit(target) {
        //重置日期设置缓存
        lyhGanttuConfig.start = '1900/01/01';
        lyhGanttuConfig.end = '1900/01/10';
        lyhGanttuConfigModifyByDate(); //过滤所有时间,获取时间长度
        lyhGanttuDataModifyByOperate(); //添加点修改或新增数据按钮
        var table = lyhGanttuTable(target);
        $('#' + target).html(table);
        drawLink(target); //线条初始化
        //提示工具初始化
        $('#' + target).find('[title]').attr('data-toggle', 'tooltip').attr('data-placement', 'right');
        $("[data-toggle='tooltip']").tooltip();
        //标记today    
        var today = lyhGanttuDate(new Date()); //今天的日期字符串
        var todayIn = $('#' + target + ' .table thead tr #date').find('[data-original-title=\'' + today + '\']');
        if (todayIn.length > 0) {
            todayIn.addClass('todayDiv').css('background-color', 'orange').append($('
').css({
                'height' : parseInt($('#' + target + ' .table').css('height').split('px')[0]) - 45 + 'px',
                'position' : 'absolute',
                'z-index' : 202,
                'margin-top' : '-40px',
                'margin-left' : '-10px',
                'border-left' : '2px dashed red',
            }).append($('