DHTMLX Gantt 项目教程

最新推荐文章于 2024-09-13 22:55:29 发布

翟培任Lame

最新推荐文章于 2024-09-13 22:55:29 发布

阅读量502

点赞数 22

本文链接：https://blog.csdn.net/gitblog_00922/article/details/141010783

版权

DHTMLX Gantt 项目教程

ganttGPL version of Javascript Gantt Chart项目地址:https://gitcode.com/gh_mirrors/gan/gantt

项目介绍

DHTMLX Gantt 是一个用于创建和管理甘特图的开源 JavaScript 库。它提供了丰富的功能，包括任务和链接的管理、时间轴的定制、以及与各种数据源的集成。DHTMLX Gantt 适用于项目管理、计划调度和其他需要可视化时间线的场景。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/DHTMLX/gantt.git

然后，进入项目目录并安装依赖：

cd gantt
npm install

运行示例

在安装完成后，可以运行示例项目来查看甘特图的效果：

npm start

基本代码示例

以下是一个简单的 HTML 文件，展示了如何使用 DHTMLX Gantt 创建一个基本的甘特图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DHTMLX Gantt Chart</title>
    <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
    <script src="codebase/dhtmlxgantt.js"></script>
</head>
<body>
    <div id="gantt_here" style="width: 100%; height: 500px;"></div>
    <script>
        gantt.init("gantt_here");
        gantt.parse({
            data: [
                {id: 1, text: "Task #1", start_date: "01-04-2023", duration: 3, progress: 0.6},
                {id: 2, text: "Task #2", start_date: "02-04-2023", duration: 2, progress: 0.5}
            ],
            links: [
                {id: 1, source: 1, target: 2, type: "0"}
            ]
        });
    </script>
</body>
</html>