0
0

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

在这里插入图片描述

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

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

文章目录

FullCalendar

官网

下载链接

Github开源

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

主要特点

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

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

在这里插入图片描述

<!DOCTYPEhtml><htmllang="zh-CN"><html><metacharset='utf-8'/><head><scriptsrc='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script><styletype="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 =newFullCalendar.Calendar(calendarEl,{
     timeZone:'UTC',initialView:'dayGridMonth',events:'https://fullcalendar.io/api/demo-feeds/events.json',editable:true,selectable:true});
            calendar.render();});</script></head><body><divid='calendar'></div></body></html>

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

在这里插入图片描述

<!DOCTYPEhtml><htmllang="zh-CN"><html><metacharset='utf-8'/><head><scriptsrc='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script><styletype="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// -----------------------------------------------------------------newDraggable(containerEl,{
     itemSelector:'.fc-event',eventData:function(eventEl){
     return{
     title: eventEl.innerText
                    };}});// initialize the calendar// -----------------------------------------------------------------var calendar =newCalendar(calendarEl,{
     headerToolbar:{
     left:'prev,next today',center:'title',right:'dayGridMonth,timeGridWeek,timeGridDay'},editable:true,droppable:true,// this allows things to be dropped onto the calendardrop: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><divid='external-events'><p><strong>Draggable Events</strong></p><divclass='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'><divclass='fc-event-main'>My Event 1</div></div><divclass='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'><divclass='fc-event-main'>My Event 2</div></div><divclass='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'><divclass='fc-event-main'>My Event 3</div></div><divclass='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'><divclass='fc-event-main'>My Event 4</div></div><divclass='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'><divclass='fc-event-main'>My Event 5</div></div><p><inputid='drop-remove'type='checkbox'/><labelfor='drop-remove'>remove after drop</label></p></div><divid='calendar-container'><divid='calendar'></div></div></body></html>

示例3：资源日历视图

在这里插入图片描述

<!DOCTYPEhtml><htmllang="zh-CN"><html><metacharset='utf-8'/><head><scriptsrc='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script><styletype="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 =newFullCalendar.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><divid='calendar'></div></body></html>

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

图图图图图图图图图图图图图
点击查看代码 

<!DOCTYPEhtml><htmllang="zh-CN"><html><metacharset='utf-8'/><head><scriptsrc='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script><styletype="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 =newFullCalendar.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 - ThursdaystartTime:'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><divid='calendar'></div></body></html>

Highcharts Gantt

官网

下载链接

Github开源

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

主要特点

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

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

在这里插入图片描述

<!DOCTYPEhtml><htmllang="zh-CN"><metacharset='utf-8'/><head></head><body><scriptsrc="https://code.highcharts.com/gantt/highcharts-gantt.js"></script><scriptsrc="https://code.highcharts.com/gantt/modules/accessibility.js"></script><styletype="text/css">@importurl("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><figureclass="highcharts-figure"><divid="container"></div></figure><script>const today =newDate(),
        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：资源甘特图

在这里插入图片描述

<!DOCTYPEhtml><htmllang="zh-CN"><metacharset='utf-8'/><head></head><body><scriptsrc="https://code.highcharts.com/gantt/highcharts-gantt.js"></script><scriptsrc="https://code.highcharts.com/gantt/modules/exporting.js"></script><scriptsrc="https://code.highcharts.com/gantt/modules/accessibility.js"></script><styletype="text/css">#container{
     max-width: 1800px;min-width: 1200px;height: 400px;margin: 1em auto;}.scrolling-container{
     overflow-x: auto
标签： 甘特图 车间调度
本文转载自: https://blog.csdn.net/hba646333407/article/details/141262369
版权归原作者 松间沙路hba 所有， 如有侵权，请联系我们删除。
登录后发布评论

“推荐几款好用的开源甘特图，附示例代码”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航