如何用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…...
OpenClaw备份与迁移：GLM-4.7-Flash项目完整转移指南
OpenClaw备份与迁移：GLM-4.7-Flash项目完整转移指南 1. 为什么需要完整的迁移方案 上周我的主力开发机突然硬盘故障，导致所有数据丢失。虽然OpenClaw本身是开源工具可以重装，但那些精心调试的配置文件、自定义技能和对接好的GLM-4.7-Flash模…...
OpenClaw定时任务：GLM-4.7-Flash自动生成日报与周报
OpenClaw定时任务：GLM-4.7-Flash自动生成日报与周报 1. 为什么需要自动化日报周报 每周五下午，我的心情总是特别复杂——既期待周末的到来，又头疼要花1-2小时整理本周工作内容。更不用说每天下班前，还要花15分钟写日报。这种重复…...
GLM-4V-9B Streamlit交互设计解析：侧边栏上传+实时渲染+历史回溯实现
GLM-4V-9B Streamlit交互设计解析：侧边栏上传实时渲染历史回溯实现 1. 引言 你有没有遇到过这样的情况：拿到一个功能强大的AI模型，官方给的示例代码却在自己的电脑上跑不起来，要么是显存不够，要么是各种奇怪的报错&a…...
3步解决AtlasOS中Xbox控制器驱动问题：从连接失败到畅玩游戏
3步解决AtlasOS中Xbox控制器驱动问题：从连接失败到畅玩游戏 【免费下载链接】Atlas 🚀 An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/…...
高速下载革命：直链解析技术如何重构网盘使用体验
高速下载革命：直链解析技术如何重构网盘使用体验 【免费下载链接】Online-disk-direct-link-download-assistant 可以获取网盘文件真实下载地址。基于【网盘直链下载助手】修改（改自6.1.4版本） ，自用，去推广࿰…...
JASP统计分析软件：开源数据分析的技术实践指南
JASP统计分析软件：开源数据分析的技术实践指南 【免费下载链接】jasp-desktop JASP aims to be a complete statistical package for both Bayesian and Frequentist statistical methods, that is easy to use and familiar to users of SPSS 项目地址: https://…...
颠覆式消息留存方案：RevokeMsgPatcher全方位防撤回技术解析
颠覆式消息留存方案：RevokeMsgPatcher全方位防撤回技术解析 【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁（我已经看到了，撤回也没用了） 项目地址: https://gitco…...
springboot-vue基于web框架的服装销售商城平台
目录技术栈选择系统模块划分开发流程关键代码示例（Spring Boot Vue）注意事项项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作技术栈选择 后端采用Spring Boot框架，提供RESTful API接口&…...
Youtu-Parsing开源模型实战：ONNX导出+TensorRT加速部署全流程
Youtu-Parsing开源模型实战：ONNX导出TensorRT加速部署全流程 1. 引言 如果你处理过大量的扫描文档、PDF文件或者图片资料，一定遇到过这样的烦恼：想把图片里的文字、表格、公式提取出来，手动操作不仅费时费力，还容易出…...
UiBot调用Python插件报错？可能是运行环境惹的祸（附解决方案）
UiBot调用Python插件报错？深度解析环境冲突与5种高阶解决方案 当你在UiBot中调用精心编写的Python插件时，突然弹出的红色报错信息往往让人措手不及。特别是当代码在本地PyCharm中运行完美，却在UiBot中频频报错时，问题很可能出在环…...