项目管理工具dhtmlxGantt入门教程(二):初始dhtmlxGantt(上)(dhtmlxGantt开源版)

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

DHTMLX Gantt官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

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

  1. 在页面上包含dhtmlxGantt 代码文件。
  2. 在页面上创建一个 DIV 容器。
  3. 使用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相关内容,请锁定本套系列教程。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(1)
上一篇 2022年11月3日 上午8:18
下一篇 2022年11月4日 上午8:00

相关推荐

  • JNPF带你走进低代码开发平台(低代码开发平台介绍)

    “Hello,World” 作为每一个程序员上手打代码的第一串字符,相信“hello,world”已经成为程序员世界默认的一个梗,而用它作为开场白,感觉也使得这篇文章变得更加亲切了…

    科研百科 2024年5月16日
    60
  • 大学生实践科研项目名称

    大学生实践科研项目名称: 探索宇宙的奥秘 宇宙是一个巨大的空间,包含了无数的星球和星系。人类对宇宙的了解还非常有限,因此,大学生实践科研项目“探索宇宙的奥秘”是非常重要的一项任务。…

    科研百科 2024年4月9日
    90
  • 大创科研项目简历模板怎么写

    大创科研项目简历模板怎么写 在写大创科研项目简历模板时,需要遵循一些基本步骤和技巧,以确保简历模板的清晰和简洁。本文将介绍如何编写一份成功的大创科研项目简历模板。 1. 项目简介 …

    科研百科 2024年4月9日
    460
  • 科研项目结题要发的文章

    科研项目结题报告 随着科技的不断进步,科研项目也在不断地进行着。在过去的一段时间里,我们团队致力于研究一个复杂问题的解决方法。经过不懈的努力,我们最终取得了突破性的成果。现在,我们…

    科研百科 2025年5月26日
    1
  • 南通通州区科研项目有哪些南通通州区科研项目有哪些

    南通通州区科研项目有哪些 南通通州区位于江苏省南通市,是一个历史悠久、文化底蕴深厚的城市。随着城市的不断发展,通州区也在积极申报科研项目,为城市的发展注入新的活力。 目前,通州区正…

    科研百科 2024年9月8日
    32
  • 清华开了家员工都是GPT的公司,代码、文档一条龙服务(清华gix项目)

    机器之心报道 编辑:Panda W 我们都知道以 ChatGPT 为代表的大型语言模型(LLM)具备代码生成能力,毕竟代码本身也是一种语言。 近日,清华大学孙茂松团队不只是让 LL…

    科研百科 2023年8月28日
    175
  • 合同管理定义

    合同管理的定义和重要性 合同管理是指在组织或个人之间建立并维护合同的过程,包括合同的制定、执行、变更和终止等各个环节,以确保合同的有效性、合法性和合规性。在现代商业环境中,合同管理…

    科研百科 2024年8月25日
    40
  • erp管理系统软件价格(装一个erp系统多少钱)

      erp系统软件的价格还是不好说,不过说真的,给你免费的你敢用吗,你会用吗?其实erp的价格不光光是软件本身的价格要考虑进去,还有软件的实施费用 、服务费用、售后维护费用以及硬件…

    科研百科 2022年11月7日
    247
  • 农贸市场哪个软件好?(找农贸市场用什么软件)

    在智慧菜场改造后,传统的菜场都呈现出新的面貌,农贸市场的改造对于市场、商户以及消费者来说都是一件非常有价值的事情,智慧菜场改造的一个重要方面就是智慧菜场软件的选择是否合适,那么作为…

    2022年6月15日
    305
  • 项目管理之团队建设(项目管理之团队建设论文)

    团队建设不等同于团队管理——团队建设是制度规定不出来的——团队活动不应看作是一种员工福利——体验式训练营是增进团队信任感和凝聚力的有效形式——团队建设可以减少沟通的成本   一次绩…

    2022年9月10日
    255