powergantt实现甘蔗图项目进度任务效果代码-html代码-BFW代码库

powergantt实现甘蔗图项目进度任务效果代码

代码语言：html

所属分类：图表

代码描述：powergantt实现甘蔗图项目进度任务效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/powergantt.css">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment-with-locales.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/powergantt.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.mockjax.js"></script>
    <style>

    </style>

</head>

<body>
    <div id="gantt1" class="gantt">
    </div>

    <script>
        var powerGantt = new powerGantt(document.getElementById("gantt1"));
        let columns = [{
            field: "projectName",
            text: "项目名",
            width: "180px"
        },
            {
                field: "duration",
                text: "总工时"
            }]
        powerGantt.setColumn(columns);
        $.mockjax({
            url: '/getuser', //接口地址
            // 返回的HTTP状态码
            status: 200,
            // 响应时间
            responseTime: 750,
            // 响应的HTTP内容类型
            contentType: 'application/json',
            // 返回的内容
            responseText: 
                [{
                    "id": "1",
                    "projectName": "北洋传媒2014上半年报",
                    "duration": "80",
                    "tasks": [{
                        "id": "1",
                        "start_date": "2014-05-01",
                        "end_date": "2014-05-06",
                        "name": "任务一",
                        "resources": []
                    },
                        {
                            "id": "2",
                            "start_date": "2014-05-06",
                            "end_date": "2014-05-15",
                            "name": "任务二",
                            "resources": []
                        },
                        {
          .........完整代码请登录后点击上方下载按钮下载查看