项目管理工具dhtmlxGantt入门教程（二）：如何初始化dhtmlxGantt（上）-控件新闻-慧都网

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

翻译|使用教程|编辑：秦林|2022-09-22 16:58:50.590|阅读 214 次

概述：本篇文章给大家讲解如何初始化dhtmlxGantt。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接：

当您使用 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>

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

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

通过 <script> 标签包含文件
将文件导入 ES6/7 和 TypeScript 应用程序
将文件包含到基于 RequireJS 的应用程序中

通过 <script> 标签包含文件

dhtmlxGantt 需要在页面上包含 2 个代码文件：

dhtmlxgantt.js
dhtmlxgantt.css

<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">

让我们快速浏览一下 dhtmlxGantt 包的结构，找出在哪里查找文件。

构成 dhtmlxGantt 包的主要文件夹和文件有：

sources - 库的源代码文件。这些文件未缩小且易于阅读。该软件包主要用于组件的调试。
示例- 代码示例。
docs - 组件的完整文档。
codebase - 库的打包代码文件。这些文件的大小要小得多，旨在用于生产。在您的应用程序中，您需要使用此文件夹中的文件。

将文件导入 ES6/7 和 TypeScript 应用程序

使用以下命令导入文件：

import { gantt } from 'dhtmlx-gantt';

对于 Commercial、Enterprise 或 Ultimate 版本，命令如下所示：

import { gantt, Gantt } from 'dhtmlx-gantt';

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及报价。

甘特图控件交流群：764148812 欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

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

在线采购

中文文档库

试用/Demo下载

开发社群