dhtmlx-gantt 甘特图

作者：System 时间：2024年08月17日分类：所有,html 字数：1376

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 方法加载任务数据。

这个简单的例子创建了一个基本的甘特图，显示了一个项目及其两个子任务。你可以根据需要添加更多的配置和任务数据。

dhtmlx-gantt 甘特图

评论已关闭

推荐阅读