推荐几款好用的开源甘特图，附示例代码

最新推荐文章于 2025-03-09 12:42:56 发布

松间沙路hba

最新推荐文章于 2025-03-09 12:42:56 发布

阅读量2.2k

点赞数 8

分类专栏：车间调度甘特图文章标签：甘特图车间调度

本文链接：https://blog.csdn.net/hba646333407/article/details/141262369

版权

在这里插入图片描述

获取更多资讯，赶快关注上面的公众号吧！

甘特图在车间调度中发挥重要的作用。通过甘特图可以清晰地展示出每个任务的开始时间、结束时间、持续时间和进度情况等信息，同时也可以直观地反映出车间的繁忙程度和资源利用情况。本文将介绍几款功能强大、基于JavaScript的甘特图插件。
在这里插入图片描述

FullCalendar

官网

下载链接

Github开源

FullCalendar 是一个功能强大的 JavaScript 库，用于创建和管理交互式的日历界面。它广泛应用于各种 Web 应用程序中，支持多种视图和事件管理功能。以下是 FullCalendar 的一些主要特点和功能：

主要特点

多种视图：支持月视图、周视图和日视图，可以自定义视图。
事件管理：允许用户添加、编辑、删除和拖放事件。
时间轴：提供详细的时间轴视图，适用于日程安排。
响应式设计：自适应不同设备的屏幕尺寸。
可扩展性：支持自定义样式和功能，易于集成其他库（如 jQuery）。
国际化：支持多种语言，适应全球用户需求。
日历导航：内置前后导航按钮，方便用户浏览不同日期。
插件支持：提供丰富的插件接口，扩展功能更加方便。

示例1：基本的月视图日历

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }
        #calendar {
     
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
     
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
     
                timeZone: 'UTC',
                initialView: 'dayGridMonth',
                events: 'https://fullcalendar.io/api/demo-feeds/events.json',
                editable: true,
                selectable: true
            });
            calendar.render();
        });
    </script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

示例2：添加拖放功能的日历

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #external-events {
     
            position: fixed;
            z-index: 2;
            top: 20px;
            left: 20px;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
        }

        #external-events .fc-event {
     
            cursor: move;
            margin: 3px 0;
        }

        #calendar-container {
     
            position: relative;
            z-index: 1;
            margin-left: 200px;
        }

        #calendar {
     
            max-width: 1100px;
            margin: 20px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
     
            var Calendar = FullCalendar.Calendar;
            var Draggable = FullCalendar.Draggable;

            var containerEl = document.getElementById('external-events');
            var calendarEl = document.getElementById('calendar');
            var checkbox = document.getElementById('drop-remove');

            // initialize the external events
            // -----------------------------------------------------------------

            new Draggable(containerEl, {
     
                itemSelector: '.fc-event',
                eventData: function (eventEl) {
     
                    return {
     
                        title: eventEl.innerText
                    };
                }
            });

            // initialize the calendar
            // -----------------------------------------------------------------

            var calendar = new Calendar(calendarEl, {
     
                headerToolbar: {
     
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar
                drop: function (info) {
     
                    // is the "remove after drop" checkbox checked?
                    if (checkbox.checked) {
     
                        // if so, remove the element from the "Draggable Events" list
                        info.draggedEl.parentNode.removeChild(info.draggedEl);
                    }
                }
            });

            calendar.render();
        });
    </script>

</head>
<body>
<div id='external-events'>
    <p>
        <strong>Draggable Events</strong>
    </p>

    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 1</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 2</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 3</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 4</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 5</div>
    </div>

    <p>
        <input id='drop-remove' type='checkbox'/>
        <label for='drop-remove'>remove after drop</label>
    </p>
</div>

<div id='calendar-container'>
    <div id='calendar'></div>
</div>
</body>
</html>

示例3：资源日历视图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
     
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
     
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
     
                timeZone: 'UTC',
                schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                headerToolbar: {
     
                    left: 'today prev,next',
                    center: 'title',
                    right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
                },
                initialView: 'resourceTimelineDay',
                scrollTime: '08:00',
                aspectRatio: 1.5,
                views: {
     
                    resourceTimelineDay: {
     
                        buttonText: ':15 slots',
                        slotDuration: '00:15'
                    },
                    resourceTimelineTenDay: {
     
                        type: 'resourceTimeline',
                        duration: {
      days: 10 },
                        buttonText: '10 days'
                    }
                },
                editable: true,
                resourceAreaHeaderContent: 'Rooms',
                resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
                events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
            });

            calendar.render();
        });
    </script>

</head>
<body>
<div id='calendar'></div>
</body>
</html>

示例4：带休息时间的资源日历视图

图图图图图图图图图图图图图

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
     
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
     
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
     
                timeZone: 'UTC',
                schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                headerToolbar: {
     
                    left: 'today prev,next',
                    center: 'title',
                    right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
                },
                initialView: 'resourceTimelineDay',
                scrollTime: '08:00',
                aspectRatio: 1.5,
                views: {
     
                    resourceTimelineDay: {
     
                        buttonText: ':15 slots',
                        slotDuration: '00:15'
                    },
                    resourceTimelineTenDay: {
     
                        type: 'resourceTimeline',
                        duration: {
      days: 10 },
                        buttonText: '10 days'
                    }
                },
                editable: true,
                resourceAreaHeaderContent: 'Rooms',
                businessHours: {
     
                    // days of week. an array of zero-based day of week integers (0=Sunday)
                    daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday

                    startTime: '10:00', // a start time (10am in this example)
                    endTime: '18:00', // an end time (6pm in this example)
                },
                resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
                events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
            });

            calendar.render();
        });
    </script>

</head>
<body>
<div id='calendar'></div>
</body>
</html>

Highcharts Gantt

官网

下载链接

Github开源

Highcharts Gantt 是 Highcharts 家族的一部分，用于创建互动和高度自定义的甘特图。甘特图是项目管理中常用的工具，用于显示项目计划和进度。Highcharts Gantt 提供了强大的图表功能和灵活的配置选项，适合用来展示项目的任务、里程碑和依赖关系。

主要特点

互动性强：支持缩放、平移、拖放等交互操作。
高度自定义：可以通过多种选项来自定义任务、时间轴、样式等。
丰富的数据支持：支持从各种格式的数据源（如 JSON、CSV）加载数据。
依赖关系：可以显示任务之间的依赖关系。
多种视图：支持显示日、周、月等不同时间跨度的视图。
响应式设计：在不同设备和屏幕尺寸上都有良好的表现。
国际化：支持多种语言，适应不同地区的用户需求。
高级功能：如关键路径分析、资源分配等。

示例1：带有依赖关系的甘特图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<meta charset='utf-8'/>
<head>

</head>
<body>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
<style type="text/css">
    @import url("https://code.highcharts.com/css/highcharts.css");

    #container {
     
        max-width: 1800px;
        margin: 1em auto;
    }

    .highcharts-treegrid-node-level-1 {
     
        font-size: 13px;
        font-weight: bold;
    }

</style>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

<script>

    const today = new Date(),
        day = 1000 * 60 * 60 * 24;

    // Set to 00:00:00:000 today
    today.setUTCHours(0);
    today.setUTCMinutes(0);
    today.setUTCSeconds(0);
    today.setUTCMilliseconds(0);


    // THE CHART
    Highcharts.ganttChart('container', {
     
        chart: {
     
            styledMode: true
        },
        title: {
     
            text: 'Highcharts Gantt in Styled Mode'
        },
        subtitle: {
     
            text: 'Purely CSS-driven design'
        },
        xAxis: {
     
            min: today.getTime() - (2 * day),
            max: today.getTime() + (32 * day)
        },
        accessibility: {
     
            keyboardNavigation: {
     
                seriesNavigation: {
     
                    mode: 'serialize'
                }
            },
            point: {
     
                descriptionFormat: '{yCategory}. Start {x:%Y-%m-%d}, end ' +
                    '{x2:%Y-%m-%d}.'
            }
        },
        lang: {
     
            accessibility: {
     
                axis: {
     
                    xAxisDescriptionPlural: 'The chart has a two-part X axis ' +
                        'showing time in both week numbers and days.'
                }
            }
        },
        series: [{
     
            name: 'Project 1',
            data: [{
     
                name: 'Planning',
                id: 'planning',
                start: today.getTime(),
                end: today.getTime() + (20 * day)
            }, {
     
                name: 'Requirements',
                id: 'requirements',
                parent: 'planning',
                start: today.getTime(),
                end: today.getTime() + (5 * day)
            }, {
     
                name: 'Design',
                id: 'design',
                dependency: 'requirements',
                parent: 'planning',
                start: today.getTime() + (3 * day),
                end: today.getTime() + (20 * day)
            }, {
     
                name: 'Layout',
                id: 'layout',
                parent: 'design',
                start: today.getTime() + (3 * day),
                end: today.getTime() + (10 * day)
            }, {
     
                name: 'Graphics',
                parent: 'design',
                dependency: 'layout',
                start: today.getTime() + (10 * day),
                end: today.getTime() + (20 * day)
            }, {
     
                name: 'Develop',
                id: 'develop',
                start: today.getTime() + (5 * day),
                end: today.getTime() + (30 * day)
            }, {
     
                name: 'Create unit tests',
                id: 'unit_tests',
                dependency: 'requirements',
                parent: 'develop',
                start: today.getTime() + (5 * day),
                end: today.getTime() + (8 * day)
            }, {
     
                name: 'Implement',
                id: 'implement',
                dependency: 'unit_tests',
                parent: 'develop',
                start: today.getTime() + (8 * day),
                end: today.getTime() + (30 * day)
            }]
        }]
    });


</script>

</body>
</html>

示例2：资源甘特图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<meta charset='utf-8'/>
<head>

</head>
<body>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
<style type="text/css">
    #container {
     
        max-width: 1800px;
        min-width: 1200px;
        height: 400px;
        margin: 1em auto;
    }

    .scrolling-container {
     
        overflow-x: a