dhtmlx-gantt 甘特图
dhtmlxGantt 是一个用于显示项目进度的甘特图控件。以下是一个简单的例子，展示如何创建一个基本的 dhtmlxGantt 甘特图：
- 首先，在HTML文件中引入dhtmlxGantt库：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DhtmlxGantt Example</title>
<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 src="path_to_dhtmlxgantt/codebase/dhtmlxgantt.js"></script>
<script>
// 初始化甘特图
gantt.init("gantt_here");
// 配置数据
gantt.config.columns = [
{name:"text", label:"Task name", tree:true, width:"*"}
];
// 定义任务数据
var tasks = [
{id:1, text:"Project", start_date:"01-04-2020", duration:10, progress:0.6},
{id:2, text:"Task 1", start_date:"02-04-2020", duration:3, progress:0.8, parent:1},
{id:3, text:"Task 2", start_date:"03-04-2020", duration:7, progress:0.2, parent:1}
];
// 加载数据
gantt.parse(tasks);
</script>
</body>
</html>- 确保替换
path_to_dhtmlxgantt为 dhtmlxGantt 实际文件的路径。 - 在
<body>标签中添加一个<div>元素，该元素的id与gantt.init方法中的一致，以便dhtmlxGantt知道在哪里渲染甘特图。 - 在
<script>标签中配置甘特图的列和数据，然后使用gantt.parse方法加载任务数据。
这个简单的例子创建了一个基本的甘特图，显示了一个项目及其两个子任务。你可以根据需要添加更多的配置和任务数据。
评论已关闭