当您使用 dhtmlxGantt 开发应用程序时，您需要做的第一件事就是初始化，或者简单地说，就是在页面上显示甘特图。
DHTMLX Gantt官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网
要在页面上显示基本甘特图，请执行 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相关内容，请锁定本套系列教程。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。