获取更多资讯,赶快关注上面的公众号吧!
甘特图在车间调度中发挥重要的作用。通过甘特图可以清晰地展示出每个任务的开始时间、结束时间、持续时间和进度情况等信息,同时也可以直观地反映出车间的繁忙程度和资源利用情况。本文将介绍几款功能强大、基于JavaScript的甘特图插件。
文章目录
FullCalendar
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
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: auto