如何用DHTMLX组件为Web应用创建甘特图？（一）
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。甘特图仍然是项目管理应用程序中最需要的工具之一，DHTMLX Gantt组件提供了能提升研发甘特图功能所需的重要工具。
在这篇文章中，您将学习如何添加一个基本的JavaScript甘特图到一个Web应用中，并使用纯JS/HTML/CSS和配置一些常见的功能来管理项目。
下载和安装DHTMLX Gantt
前提条件：首先有必要创建一个简单的HTML页面，您的甘特图项目将被放置在其中。
在本教程中，我们将解释如何通过脚本标记将Gantt组件添加到Web页面中，这样就不需要任何构建工具或配置来运行示例。请注意，Gantt也可以作为ES6模块导入，稍后我们将讨论它。
开始使用Gantt最简单的方法是在服务器上启用一个开源版本：
<link rel="stylesheet" type="text/css" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>您也可以下载DHTMLX Gantt并在本地使用它。
DHTMLX Gantt正式版下载
在下载了首选的Gantt版本后，通过将下载的包解压缩到项目的一个文件夹中来安装Gantt，并在HTML文档中添加JS和CSS文件的链接：
<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>Gantt初始化
在执行这一重要步骤之前，您必须在页面上创建div容器，初始化Gantt时需要这个容器。
<body>
<div id="gantt_here" style='width:100vw; height:100vh;'></div>
</body>现在您应该使用init方法来初始化div容器中的Gantt，该方法以容器的ID作为参数。
<script>
window.addEventListener("DOMContentLoaded", function () {
gantt.init("gantt_here");
});
</script>此时您已经可以开始使用JavaScript甘特图了，但是为了更清晰，让我们添加一些项目数据。
添加甘特图数据
初始化完成后，可以直接在HTML文档或JS文件中添加甘特图数据，这些数据将用作构建甘特图的基础。在我们的示例中，为每个项目添加两个项目和两个嵌入式任务：
- 规划社会研究：1)选择研究问题2)制定研究设计
- 进行社会研究：1)数据收集2)结果分析
在这里，您还可以指定项目和相关任务的开始/结束日期、执行顺序和进度。
gantt.parse ({
"data": [
{ "id": "10", "text": "Social Research Planning", "start_date": "01-04-2023", "duration": 5, "order": 10, "progress": 0.4, "open": true },
{ "id": "1", "text": "Choosing Research Problems", "start_date": "01-04-2023", "duration": 2, "order": 10, "progress": 0.6, "parent": "10", "priority": "high" },
{ "id": "2", "text": "Formulating Research Design", "start_date": "03-04-2023", "duration": 3, "order": 20, "progress": 0.6, "parent": "10", "priority": "high" },
{ "id": "20", "text": "Conducting Research", "start_date": "06-04-2023", "duration": 5, "order": 10, "progress": 0.4, "type": "project", "open": true },
{ "id": "3", "text": "Data Collection", "start_date": "06-04-2023", "duration": 2, "order": 10, "progress": 0.6, "parent": "20", "priority": "low" },
{ "id": "4", "text": "Results Analysis", "start_date": "08-04-2023", "duration": 3, "order": 20, "progress": 0.6, "parent": "20", "priority": "medium" }
],
"links": [
{ "id": 1, "source": 1, "target": 2, "type": "0" },
{ "id": 2, "source": 2, "target": 3, "type": "0" },
{ "id": 3, "source": 3, "target": 4, "type": "0" },
{ "id": 4, "source": 2, "target": 5, "type": "0" }
]
})
这就是如何将基本的JavaScript甘特图添加到项目中。
当谈到DHTMLX Gantt与流行的JavaScript框架的使用时，应该注意到甘特图是作为JS模块导入的，而不是通过脚本标签添加的。
相关文章：
如何用DHTMLX组件为Web应用创建甘特图？（一）
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。甘特图仍然是项目管理应用程序中最需要的工具之一，DHTMLX Gantt组件提供了能提升研发甘特图功能所需的重要工具。 在这篇…...
网站SEO优化：提升搜索排名与流量引爆
导言： 在互联网时代，网站SEO（搜索引擎优化）是提高网站搜索排名、吸引流量、增加曝光的重要策略。通过优化网站结构、内容和链接等方面，让搜索引擎更好地理解和收录网站内容，从而为网站带来更多有价值的有机…...
Java lamda对List＜JSONObject＞里多个动态属性字段进行动态的降序或者升序
最近做到一个需求，需要把业务侧返回的数据（格式为List<JSONObject>）,然后根据前端传来的排序字段、以及升降序属性来排序并返回给前端。要对List<JSONObject>中的多个属性字段进行动态的升序或降序排序，我们可以根据需…...
Lua脚本解决多条命令原子性问题
Redis是一个流行的键值存储数据库，它提供了丰富的功能和命令。在Redis中，我们可以使用Lua脚本来编写多条命令，以确保这些命令的原子性执行。Lua是一种简单易学的编程语言，下面将介绍如何使用Redis提供的调用函数来操作Redis并保证…...
NAT详解（网络地址转换）
一句话说清楚它是干什么的： 网络地址转换：是指通过专用网络地址转换为公用地址，从而对外隐藏内部管理的IP地址，它使得整个专用网只需要一个全球IP就可以访问互联网，由于专用网IP地址是可以重用的，所以NAT大…...
【第一阶段】ktolin的函数
在Java中我们称之为方法，方法必须写在类里面，依赖于类。 在kotlin中函数写在类里面和外面都是可以的。称之为函数 class test{fun view(){} }fun main() {println("Hello, world!!!") }执行结果 Hello, world!!!main函数的返回值类型为Unit等…...
pytorch模型的保存与加载
1 pytorch保存和加载模型的三种方法 PyTorch提供了三种种方式来保存和加载模型，在这三种方式中，加载模型的代码和保存模型的代码必须相匹配，才能保证模型的加载成功。通常情况下，使用第一种方式（保存和加载模型状态字…...
IDE /完整分析C4819编译错误的本质原因
文章目录 概述基本概念代码页标识符字符集和字符编码方案源字符集和执行字符集 编译器使用的字符集VS字符集配置 有何作用编译器 - 源字符集编译器 -执行字符集 Qt Creator下配置MSVC编译器参数动态库DLL字符集配置不同于可执行程序EXE总结 概述 本文将从根本原因上来分析和解…...
前端学习路线（2023）
这个前端学习路线看起来很详细和全面，涵盖了从基础知识到高级框架，从单机开发到全栈项目，从混合应用到原生应用，从性能优化到架构设计的各个方面。如果你能够按照这个路线学习和实践，我相信你一定能够成为一名优秀的前…...
景区如何对旅行社进行分销管理？
旅行社的买票能力强，一般景区会跟多家旅行社合作门票分销。其中卖票下单、价格设定、财务对账结算都出现了很多问题，导致对账困难，查询困难，甚至可能有偷票漏票的情况出现，给景区收入造成损失。那要怎么处理呢…...
四步从菜鸟到高手，Python编程真的很简单（送书第一期：文末送书2本）
🍁博主简介 🏅云计算领域优质创作者 🏅华为云开发者社区专家博主 🏅阿里云开发者社区专家博主 💊交流社区：运维交流社区 欢迎大家的加入！ 🐋 希望大家多多支持，我…...
Thread类的常用结构（java)）
1 构造器 public Thread() :分配一个新的线程对象。public Thread(String name) :分配一个指定名字的新的线程对象。public Thread(Runnable target) :指定创建线程的目标对象，它实现了Runnable接口中的run方法public Thread(Runnable target,String name) :分配一…...
CSS :nth-child
CSS :nth-child :nth-child 伪类根据元素在同级元素中的位置来匹配元素. CSS :nth-child 语法 值是关键词 odd/evenAnB最新的 [of S] 语法权重 浏览器兼容性 很简单的例子, 来直觉上理解这个伪类的意思 <ul><li class"me">Apple</li><li>B…...
国内好用的企业级在线文档有哪些？
在当今数字化时代，企业级在线文档已经成为了现代办公环境中不可或缺的一部分。它不仅能够提高工作效率，还能够实现多人协同编辑，满足团队协作的需求。那么，在国内市场上，哪些企业级在线文档产品备受企业青睐呢…...
P1217 [USACO1.5] 回文质数 Prime Palindromes
题目描述 因为 151 151 151 既是一个质数又是一个回文数（从左到右和从右到左是看一样的），所以 151 151 151 是回文质数。 写一个程序来找出范围 [ a , b ] ( 5 ≤ a < b ≤ 100 , 000 , 000 ) [a,b] (5 \le a < b \le 100,000,000…...
【STM32MP1系列】DDR内存测试用例
DDRDDR内存测试 一、uboot下测试DDR内存二、Linux内核下测试DDR内存1、使用memtester测试DDR内存2、使用stressapptest测试DDR内存三、Buildroot中构建memtester软件包四、搭建stressapptest软件包五、注意事项一、uboot下测试DDR内存 输入bdinfo查看DDR起始地址以及大小： b…...
【CAS6.6源码解析】调试Rest API接口
CAS的web层默认是基于webflow实现的，ui和后端是耦合在一起的，做前后端分离调用和调试的时候不太方便。但是好在CAS已经添加了支持Rest API的support模块，添加相应模块即可。 文章目录 添加依赖并重新build效果 添加依赖并重新build 具体添加…...
C++设计模式之模板方法、策略模式、观察者模式
面向对象设计模式是”好的面向对象设计“，所谓”好的面向对象设计“指的是可以满足”应对变化，提高复用“的设计。 现代软件设计的特征是”需求的频繁变化“。设计模式的要点是”寻求变化点，然后在变化点处应用设计模式，从而更好地…...
【计算机网络 02】物理层基本概念 传输媒体 传输方式 编码与调制 信道极限容量 章节小结
第二章 -- 物理层 2.1 物理层基本概念2.2 物理层下的传输媒体2.3 传输方式2.4 编码与调制2.5 信道极限容量2.6 章节小结 2.1 物理层基本概念 2.2 物理层下的传输媒体 传输媒体也称为传输介质或传输媒介，他就是数据传输系统中在发送器和接收器之间的物理通路 传输媒…...
无涯教程-jQuery - serialize( )方法函数
serialize()方法将一组输入元素序列化为数据字符串。 serialize( ) - 语法 $.serialize( ) serialize( ) - 示例 假设无涯教程在serialize.php文件中具有以下PHP内容- <?php if( $_REQUEST["name"] ) {$name$_REQUEST[name];echo "Welcome ". $na…...
一套不错的基于uniapp实现的投票类小程序/H5
最近作者心血来潮，想做一个热点话题投票，话题相关的资讯跟踪类的小程序，方便自己发布一些大家比较关心的话题。 基于以上需求，说干就干，首先需要定义一个需求： 1、支持热门话题投票、排行榜（日…...
Mac代码编辑器sublime text 4中文注册版下载
Sublime Text 4 for Mac简单实用功能强大，是程序员敲代码必备的代码编辑器，sublime text 4中文注册版支持多种编程语言，包括C、Java、Python、Ruby等，可以帮助程序员快速编写代码。Sublime Text的界面简洁、美观，支持多…...
django------模糊查询
1.常用模糊查询的方法 queryset中支持链式操作 bookBook.objects.all().order_by(-nid).first() 只要返回的是queryset对象就可以调用其他的方法,直到返回的是对象本身 大于、大于等于、小于、小于等于： # __gt 大于> # __gte 大于等于> # __lt 小于< …...
AVFoundation - 音视频组合编辑
文章目录 一、简要说明二、使用1、音频和视频合成2、视频的拼接一、简要说明 相关类 AVMutableCompositionAVMutableCompositionTrack二、使用 1、音频和视频合成 - (void)testCom1{AVMutableComposition *mutableComposition = [AVMutableComposition composition];AVMu...
jpa生成实体类，jpa根据数据库表生成实体类
jpa生成实体类，jpa根据数据库表生成实体类jpa根据数据库表结构生成实体idea下SpringbootJPA从数据库自动生成实体类JPA用数据库表直接生成实体类Spring boot整合jpa(一),根据表生成实体IDEA下SpringData-JPA根据数据库表生成实体类idea怎么根据数据库表自动生成JPA实…...
嵌入式Linux系统组成
嵌入式Linux系统的组成 文章目录 嵌入式Linux系统的组成一、发行版Linux系统VS嵌入式Linux系统二、嵌入式Linux系统架构一、发行版Linux系统VS嵌入式Linux系统 1.产品 发行版Linux系统产品：服务器、消费平板、消费手提电脑 嵌入式Linux系统产品：扫地机器人，小米机顶盒特定场…...
【iOS】—— RunLoop和多线程相关问题总结
RunLoop 1. 讲讲RunLoop，项目中有用到过吗？ RunLoop 的基本作用：保持程序的持续运行，节省 CPU 的资源，提高程序的性能 （ 没有事情，就请休眠，不要功耗。有事情，就处理&a…...
在CSDN学Golang云原生（gitlab）
一，基于Docker安装gitlab runner 在Golang中，基于Docker安装GitLab Runner需要以下步骤： 首先，您需要安装Docker和Docker Compose。这可以通过访问官方网站来完成。接下来，您需要创建一个名为docker-compose.yml的文…...
cv2抛出异常 “install libgtk2.0-dev and pkg-config, then re-run cmake or configure”
背景： linux中使用cv2显示图片的时候，运行提示异常： 处理方式： 网友的推荐操作： 切换至root模式安装 apt-get install libgtk2.0-dev进入OpenCV下载目录，重新编译 cd /home/XXX/opencv mkdir release …...
C#..上位机软件的未来是什么?
C#是一种流行的编程语言，广泛应用于桌面应用程序和上位机软件开发。未来，C#上位机软件将继续不断发展和创新，以满足用户日益增长的需求。以下是我认为C#上位机软件未来可能会涉及的一些方向： 更加智能化：随着人工智能…...