写一个简单的甘特图代码
时间: 2023-12-01 07:55:24 浏览: 19
以下是一个简单的甘特图代码示例,使用HTML、CSS和JavaScript实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>甘特图</title>
<style>
/* 样式 */
#gantt-chart {
width: 800px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
.task {
position: absolute;
height: 30px;
background-color: #007bff;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 30px;
border-radius: 10px;
}
.task.completed {
background-color: #28a745;
}
.task.overdue {
background-color: #dc3545;
}
.task:hover {
cursor: pointer;
}
.task-label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
padding-left: 10px;
font-size: 12px;
}
.task-label span {
font-weight: normal;
}
.task-bar {
position: absolute;
bottom: 0;
height: 5px;
background-color: #007bff;
border-radius: 5px;
}
.task-bar.completed {
background-color: #28a745;
}
.task-bar.overdue {
background-color: #dc3545;
}
.task-bar:hover {
cursor: pointer;
}
.task-bar-label {
position: absolute;
bottom: -20px;
left: 0;
font-size: 12px;
}
.task-bar-label span {
font-weight: bold;
}
</style>
</head>
<body>
<div id="gantt-chart"></div>
<script>
// 数据
var tasks = [
{
id: 1,
name: '任务1',
start: new Date(2021, 7, 1),
end: new Date(2021, 7, 7),
completed: false
},
{
id: 2,
name: '任务2',
start: new Date(2021, 7, 8),
end: new Date(2021, 7, 14),
completed: true
},
{
id: 3,
name: '任务3',
start: new Date(2021, 7, 15),
end: new Date(2021, 7, 21),
completed: false
}
];
// 创建甘特图
var ganttChart = document.getElementById('gantt-chart');
// 计算时间范围
var minDate = tasks.reduce(function(prev, curr) {
return prev.start < curr.start ? prev : curr;
}).start;
var maxDate = tasks.reduce(function(prev, curr) {
return prev.end > curr.end ? prev : curr;
}).end;
// 计算甘特图宽度
var chartWidth = ganttChart.clientWidth;
var chartHeight = ganttChart.clientHeight;
// 计算每天的宽度
var dayWidth = chartWidth / ((maxDate - minDate) / (24 * 60 * 60 * 1000));
// 创建任务元素
tasks.forEach(function(task) {
var taskElement = document.createElement('div');
taskElement.className = 'task' + (task.completed ? ' completed' : '') + (task.end < new Date() ? ' overdue' : '');
taskElement.style.left = ((task.start - minDate) / (24 * 60 * 60 * 1000)) * dayWidth + 'px';
taskElement.style.width = ((task.end - task.start) / (24 * 60 * 60 * 1000)) * dayWidth + 'px';
taskElement.addEventListener('click', function() {
alert('点击了任务' + task.id);
});
var taskLabelElement = document.createElement('div');
taskLabelElement.className = 'task-label';
taskLabelElement.innerHTML = task.name;
var taskBarElement = document.createElement('div');
taskBarElement.className = 'task-bar' + (task.completed ? ' completed' : '') + (task.end < new Date() ? ' overdue' : '');
taskBarElement.style.width = ((task.end - task.start) / (24 * 60 * 60 * 1000)) * dayWidth + 'px';
var taskBarLabelElement = document.createElement('div');
taskBarLabelElement.className = 'task-bar-label';
taskBarLabelElement.innerHTML = '<span>' + task.name + '</span><br>' + task.start.toLocaleDateString() + ' - ' + task.end.toLocaleDateString();
taskBarElement.appendChild(taskBarLabelElement);
taskElement.appendChild(taskLabelElement);
taskElement.appendChild(taskBarElement);
ganttChart.appendChild(taskElement);
});
</script>
</body>
</html>
```
该代码使用了HTML和CSS创建了一个甘特图容器,使用JavaScript动态生成了甘特图的任务和任务条,并计算了它们的位置和宽度。任务和任务条的样式通过CSS设置,包括颜色、字体、大小等。任务和任务条元素的事件处理程序使用JavaScript添加,例如点击事件将弹出警示框。