写一个简单的甘特图代码
时间: 2023-12-01 19:56:23 浏览: 125
以下是一个简单的甘特图代码,用于展示项目进度和时间安排:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>甘特图示例</title>
<style>
/* 甘特图样式 */
.gantt-chart {
width: 100%;
height: 500px;
background-color: #f5f5f5;
font-size: 14px;
}
.gantt-row {
height: 50px;
border-bottom: 1px solid #ccc;
}
.gantt-task {
position: absolute;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #2196f3;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gantt-chart">
<!-- 项目进度条 -->
<div class="gantt-row">
<div class="gantt-task" style="left: 10%; width: 30%;">阶段一</div>
<div class="gantt-task" style="left: 40%; width: 20%;">阶段二</div>
<div class="gantt-task" style="left: 60%; width: 30%;">阶段三</div>
<div class="gantt-task" style="left: 90%; width: 10%;">阶段四</div>
</div>
<!-- 时间轴 -->
<div class="gantt-row">
<div class="gantt-task" style="left: 0%;">2022-01-01</div>
<div class="gantt-task" style="left: 25%;">2022-02-01</div>
<div class="gantt-task" style="left: 50%;">2022-03-01</div>
<div class="gantt-task" style="left: 75%;">2022-04-01</div>
<div class="gantt-task" style="left: 100%;">2022-05-01</div>
</div>
</div>
</body>
</html>
```
在这个代码中,我们使用了 HTML 和 CSS 来创建一个简单的甘特图。在 `.gantt-chart` 容器中,我们定义了两个 `.gantt-row`,一个用于展示项目进度条,一个用于展示时间轴。在项目进度条中,我们使用了 `.gantt-task` 来表示每个阶段的进度,在时间轴中,我们使用了 `.gantt-task` 来表示每个时间点。我们使用了 `left` 和 `width` 属性来控制每个进度条和时间点在甘特图中的位置和长度。
你可以根据自己的需要修改这个代码来展示更复杂的甘特图,例如添加任务名、完成百分比、依赖关系等。