如何用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…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
` 方法)
深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
浅谈不同二分算法的查找情况
二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。 需要说明的是，以下二分算法都是基于有序序列为升序有序的情况…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...