基于JS简单甘特图（IT枫斗者）

淩亂°似流年 2024-03-23 13:50 74阅读 0赞

## 基于JS简单甘特图 ##

### 基于JS简单甘特图 ###

*  先来看一下效果吧，这里的需求是从早上的5点为开始时间，到第二天到凌晨5点
 *  ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8Vr2UUt-1681777493839)(C:\\Users\\quyanliang\\AppData\\Roaming\\Typora\\typora-user-images\\1681777293302.png)\]][img-B8Vr2UUt-1681777493839_C_Users_quyanliang_AppData_Roaming_Typora_typora-user-images_1681777293302.png]

### 前期准备 ###

*  其实网上有很多甘特图的实现方式，但是他们都只能具象到天，不能具体到某个时间点，而且每一个具体的时间段中的描述是不能自定义的，所以准备自己写一下了。

### 实现逻辑 ###

*  我们可以先模拟一些demo数据，这里面最为主要的数据为每个时间点，我们要实现上面的效果，需要对每个时间点进行拆分。
 *      var demoData: [
            {   
                carNum: '川A09384',
                innerData: [
                    {
                        start: '2019/1/21 6:23',
                        end: '2019/1/21 7:45',
                        value: 'A站点',
                        bg: 'green'
                    },
                    {
                        start: '2019/1/21 12:23',
                        end: '2019/1/21 16:45',
                        value: 'B站点',
                        bg: 'yellow'
                    },
                    {
                        start: '2019/1/21 20:00',
                        end: '2019/1/21 23:25',
                        value: 'C站点',
                        bg: 'blue'
                    }
                ]
            },
            {   carNum: '川A04384',
                innerData: [
                    {
                        start: '2019/1/21 5:23',
                        end: '2019/1/21 6:05',
                        value: 'A站点',
                        bg: 'blue'
                    },
                    {
                        start: '2019/1/21 10:23',
                        end: '2019/1/21 13:45',
                        value: 'B站点',
                        bg: 'green'
                    },
                    {
                        start: '2019/1/21 21:00',
                        end: '2019/1/22 3:35',
                        value: 'C站点',
                        bg: 'yellow'
                    },
                ]
            }]

#### 首先创建时间 ####

*      // 创建时间
        createHours: function(){
            var startHour = 5;
            var endHour = 11;
            var html = '';
            for (let i = startHour; i< 24; i++) {
                html += `<div>${i < 10 ? `0${i}` : i}:00</div>`
            }
            for (let i = 0; i< endHour; i++) {
                html += `<div>${i < 10 ? `0${i}` : i}:00</div>`
            }
            document.getElementById('hour').innerHTML = html;
        },

#### 根据数据绘制甘特图 ####

*  我们将 1H = 60px；这样去定宽，即 1px = 1M；
 *  绘制第一个时间段 start:‘2019/1/21 6:23’; end: ‘2019/1/21 7:45’;
 *      var start = new Date('2019/1/21 6:23'),
            end = new Date('2019/1/21 7:45'),
            start_h = start.getHours(), // 开始时间
            start_m = start.getMinutes(), // 开始分钟 
            end_h = end.getHours(), // 结束时间
            end_m = end.getMinutes(), // 结束分钟
            left_offset = 0;
            _left_offset = 0;
            width = '';
            // 获取时间段甘特图的开始位置（我们从5点开始,所以-5）；
            left_offset = (start_h - 5) * 60 + start_m;
            // 获取每一段甘特图的宽度，
            // 先计算出结束时间的位置，然后在减去开始时间的左边距；
            width = ((end_h - 5) * 60 + end_m) - left_offset;
            // 使用现有的左边距减去前一个时间的左边距
            _left_offset = left_offset - allLeft;
            // 因为存在多个时间段，所以在绘制下一个时间断时，left_offset
            // 使用allLeft存储上一个时间断距离左边的距离。
            allLeft = left_offset + width;
            // 将其添加到DOM中
           html += `<span style="width:${width}px;margin-left:${_left_offset}px;">${innerData[i].value}</span>`;
 *  首先需要找到时间段中开始时间的开始位置，
 *  计算出时间的width，遵循1px = 1M的规则。
 *  在设置margin-left时，记得减去上一个时间段甘特图的margin-left（重点）。
 *  没绘制一条后，存储其margin-left，方便下一个时间段使用。

#### 关于跨天怎么计算 ####

*  当我们的时间段是属于跨天的怎么计算他的开始和结束位置，以及他的宽度呢？直接贴代码了哈
 *      createData: function() {
        var data = this.demoData;
        var today = new Date().getDate(); // 今天的日期
        for (let m = 0; m< data.length; m++) {
            var innerData = data[m].innerData;
            var html = '';
            var allLeft = 0;
            for (let i = 0; i< innerData.length; i++) {
                var start = new Date(innerData[i].start),
                    end = new Date(innerData[i].end),
                    start_d = start.getDate(),
                    end_d = end.getDate(),
                    start_h = start.getHours(),
                    start_m = start.getMinutes(),
                    end_h = end.getHours(),
                    end_m = end.getMinutes(),
                    left_offset = 0;
                    _left_offset = 0;
                    width = '';
                if (start_d === (today + 1)) {
                    left_offset = ((23 - 5) * 60) + ((start_h + 1) * 60) + start_m;
                    _left_offset = left_offset - allLeft;
                    width = (((23 + (end_h + 1)) - 5) * 60 + end_m) - left_offset;
                } else if (end_d === (today + 1)) {
                    left_offset = ((start_h - 5) * 60) + start_m;
                    _left_offset = left_offset - allLeft;
                    width = (((24 + end_h) - 5) * 60 + end_m) - left_offset;
                } else {
                    left_offset = (start_h - 5) * 60 + start_m;
                    _left_offset = left_offset - allLeft;
                    width = ((end_h - 5) * 60 + end_m) - left_offset;
                }
                allLeft = left_offset + width;
                html += `<span style="width:${width}px;margin-left:${_left_offset}px;background:${innerData[i].bg}">${innerData[i].value}</span>`;
            }
            document.getElementById('container').innerHTML += `<div class="gantt-item" >${html}</div>`;
        }
        }
 *  这个地方就不详细解说了，有什么不懂的地方欢迎大家留言。代码很简洁，主要用于实现一个比较简单的甘特图。不需要下载什么插件之类的。
 *  这里把代码贴出来哈，大家可以一起交流，或许你有更好的实现方式呢。
 *      <html>
            <head>
                <title>测试demo</title>
                <style type="text/css">
                    #container {
                        width: 100%;
                        overflow: scroll;
                        height: calc(100vh - 0px);
                        width: 1900px;
                    }
                    .carNum {
                        float:left;
                        width:100px;
                        text-align: center;
                    }
                    #hour {
                        width: 1800px;
                        overflow: scroll;
                    }
                    #hour div{
                        width: 60px;
                        float: left;
                        border-left: 1px solid #ddd;
                        background: #ccc;
                        text-align: center;
                        box-sizing: border-box;
                    }
                    .gantt-item {
                        width: 1800px;
                    }
                    .gantt-item:hover{
                        background:rgba(0,0,0,.1);
                    }
                    .gantt-item span {
                        height: 20px;;
                        display: inline-block;
                        margin: 5px 0px;
                        font-size: 12px;
                        text-align: center;
                        color:#fff;
                        background:green;
                    }
                    .nowTime {
                        border: 1px solid green;
                        display: inline-block;
                        height: 500px;
                        height: calc(100vh - 0px);
                        position: absolute;
                        top: 0px;
                    }
                </style>
            </head>
            <body>
                <div id="container">
                    <div class="carNum">
                        <div style="background:#ccc;">车牌号</div>
                        <div style="line-height:30px;">川A09384</div>
                        <div style="line-height:30px;">川A09384</div>
                        <div style="line-height:30px;">川A09384</div>
                    </div>
                    <div id="hour" style="float:righ">
                    </div>
                </div>
            </body>
            <script type="text/javascript">
                var gantt = {
                    demoData: [
                        {   
                            innerData: [
                                {
                                    start: '2019/1/21 6:23',
                                    end: '2019/1/21 7:45',
                                    value: 'A站点',
                                    bg: 'green'
                                },
                                {
                                    start: '2019/1/21 12:23',
                                    end: '2019/1/21 16:45',
                                    value: 'B站点',
                                    bg: 'yellow'
                                },
                                {
                                    start: '2019/1/21 20:00',
                                    end: '2019/1/21 23:25',
                                    value: 'C站点',
                                    bg: 'blue'
                                }
                            ]
                        },
                        {   
                            innerData: [
                                {
                                    start: '2019/1/21 5:23',
                                    end: '2019/1/21 6:05',
                                    value: 'A站点',
                                    bg: 'blue'
                                },
                                {
                                    start: '2019/1/21 10:23',
                                    end: '2019/1/21 13:45',
                                    value: 'B站点',
                                    bg: 'green'
                                },
                                {
                                    start: '2019/1/21 21:00',
                                    end: '2019/1/22 3:35',
                                    value: 'C站点',
                                    bg: 'yellow'
                                },
                            ]
                        },
                        {  
                            innerData: [
                                {
                                    start: '2019/1/21 8:23',
                                    end: '2019/1/21 10:05',
                                    value: 'A站点',
                                    bg: 'blue'
                                },
                                {
                                    start: '2019/1/21 13:23',
                                    end: '2019/1/21 14:45',
                                    value: 'B站点',
                                    bg: 'green'
                                },
                                {
                                    start: '2019/1/21 22:00',
                                    end: '2019/1/22 3:35',
                                    value: 'C站点',
                                    bg: 'red'
                                },
                                {
                                    start: '2019/1/22 4:00',
                                    end: '2019/1/22 7:35',
                                    value: 'D站点',
                                    bg: 'green'
                                },
                            ]
                        },
                    ],
                    // 初始化
                    init: function() {
                        this.showNowTime();
                        this.createHours();
                        this.createData();
                    },
                    // 创建时间
                    createHours: function(){
                        var startHour = 5;
                        var endHour = 11;
                        var html = '';
                        for (let i = startHour; i< 24; i++) {
                            html += `<div>${i < 10 ? `0${i}` : i}:00</div>`
                        }
                        for (let i = 0; i< endHour; i++) {
                            html += `<div>${i < 10 ? `0${i}` : i}:00</div>`
                        }
                        document.getElementById('hour').innerHTML = html;
                    },
                    // 当前时间线
                    showNowTime: function() {
                        var date = new Date();
                        var h = date.getHours(),
                            m = date.getMinutes();
                        var offset = (h - 5) * 60 + m;
                        var html = `<div class="nowTime" style="margin-left:${offset}px"></div>`;
                        document.getElementById('container').innerHTML += `<div class="gantt-item">${html}</div>`;
                    },
                    createData: function() {
                        var data = this.demoData;
                        var today = new Date().getDate(); // 今天的日期
                        for (let m = 0; m< data.length; m++) {
                            var innerData = data[m].innerData;
                            var html = '';
                            var allLeft = 0;
                            for (let i = 0; i< innerData.length; i++) {
                                var start = new Date(innerData[i].start),
                                    end = new Date(innerData[i].end),
                                    start_d = start.getDate(),
                                    end_d = end.getDate(),
                                    start_h = start.getHours(),
                                    start_m = start.getMinutes(),
                                    end_h = end.getHours(),
                                    end_m = end.getMinutes(),
                                    left_offset = 0;
                                    _left_offset = 0;
                                    width = '';
                                if (start_d === (today + 1)) {
                                    left_offset = ((23 - 5) * 60) + ((start_h + 1) * 60) + start_m;
                                    _left_offset = left_offset - allLeft;
                                    width = (((23 + (end_h + 1)) - 5) * 60 + end_m) - left_offset;
                                } else if (end_d === (today + 1)) {
                                    left_offset = ((start_h - 5) * 60) + start_m;
                                    _left_offset = left_offset - allLeft;
                                    width = (((24 + end_h) - 5) * 60 + end_m) - left_offset;
                                } else {
                                    left_offset = (start_h - 5) * 60 + start_m;
                                    _left_offset = left_offset - allLeft;
                                    width = ((end_h - 5) * 60 + end_m) - left_offset;
                                }
                                allLeft = left_offset + width;
                                html += `<span style="width:${width}px;margin-left:${_left_offset}px;">${innerData[i].value}</span>`;
                            }
                            document.getElementById('container').innerHTML += `<div class="gantt-item" >${html}</div>`;
                        }
                    }
                }
                gantt.init();
            </script>
        </html>

[img-B8Vr2UUt-1681777493839_C_Users_quyanliang_AppData_Roaming_Typora_typora-user-images_1681777293302.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/cb840c3632d4433893f2fac528790440.png