dhtmlx-gantt甘特图
dhtmlxGantt 是一个用于项目管理的甘特图工具。以下是一个简单的例子,展示如何使用 dhtmlxGantt 创建一个基本的甘特图。
首先,你需要在你的 HTML 文件中引入 dhtmlxGantt 库:
<!DOCTYPE html>
<html>
<head>
<title>DhtmlxGantt Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="path_to_dhtmlxgantt/dhtmlxgantt.css">
<script src="path_to_dhtmlxgantt/dhtmlxgantt.js"></script>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
// 初始化甘特图
gantt.init("gantt_here");
// 定义任务数据
var tasks = [
{id: 1, text: "任务 1", start_date: "2023-04-01", duration: 5},
{id: 2, text: "任务 2", start_date: "2023-04-02", duration: 7}
];
// 将任务数据加载到甘特图中
gantt.parse(tasks);
</script>
</body>
</html>
确保将 path_to_dhtmlxgantt/dhtmlxgantt.js
和 path_to_dhtmlxgantt/dhtmlxgantt.css
替换为 dhtmlxGantt 库实际的路径。
这段代码创建了一个基本的甘特图,并在页面上显示了两个任务。你可以根据需要添加更多的功能,比如时间轴的配置、任务的依赖关系设置、资源分配等。
评论已关闭