项目管理工具dhtmlxGantt入门教程（二）：如何初始化dhtmlxGantt（上）

最新推荐文章于 2023-04-18 14:20:53 发布

原创

最新推荐文章于 2023-04-18 14:20:53 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#甘特图 #DHTMLXGantt #Gantt #项目管理工具

本文是dhtmlxGantt入门教程的第二部分，主要介绍如何在项目中初始化并显示甘特图。首先，需要在页面上包含dhtmlxGantt的js和css文件，然后创建一个DIV容器，最后通过init方法在指定容器中初始化Gantt。此外，还提到了通过不同方式将代码文件添加到项目中的方法，包括使用<script>标签、ES6/7/TypeScript导入和RequireJS。

当您使用 dhtmlxGantt 开发应用程序时，您需要做的第一件事就是初始化，或者简单地说，就是在页面上显示甘特图。

点击获取DhtmlxGantt官方正式版

要在页面上显示基本甘特图，请执行 3 个步骤：

在页面上包含dhtmlxGantt 代码文件。
在页面上创建一个 DIV 容器。
使用init方法在新创建的容器中初始化 dhtmlxGantt 。作为参数，该方法采用将在其中显示甘特图的 HTML 容器（或其 id）。

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body> <div id="gantt_here" style='width:1000px; height:400px;'></div>
    <script type="text/javascript">
        gantt.init("gantt_here");
    </script>
</body>
</html>

如何将甘特图源文件添加到项目中

您可以通过多种方式将甘特代码文件添加到您的项目中，具体取决于您创建