当前位置： 首页 > news >正文

基于JS简单甘特图（IT枫斗者）

news 2025/11/9 12:20:03

基于JS简单甘特图

基于JS简单甘特图

  • 先来看一下效果吧，这里的需求是从早上的5点为开始时间，到第二天到凌晨5点
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8Vr2UUt-1681777493839)(C:\Users\quyanliang\AppData\Roaming\Typora\typora-user-images\1681777293302.png)]

前期准备

  • 其实网上有很多甘特图的实现方式，但是他们都只能具象到天，不能具体到某个时间点，而且每一个具体的时间段中的描述是不能自定义的，所以准备自己写一下了。

实现逻辑

  • 我们可以先模拟一些demo数据，这里面最为主要的数据为每个时间点，我们要实现上面的效果，需要对每个时间点进行拆分。

  • var demoData: [{   carNum: '川A09384',innerData: [{start: '2019/1/21 6:23',end: '2019/1/21 7:45',value: 'A站点',bg: 'green'},{start: '2019/1/21 12:23',end: '2019/1/21 16:45',value: 'B站点',bg: 'yellow'},{start: '2019/1/21 20:00',end: '2019/1/21 23:25',value: 'C站点',bg: 'blue'}]},{   carNum: '川A04384',innerData: [{start: '2019/1/21 5:23',end: '2019/1/21 6:05',value: 'A站点',bg: 'blue'},{start: '2019/1/21 10:23',end: '2019/1/21 13:45',value: 'B站点',bg: 'green'},{start: '2019/1/21 21:00',end: '2019/1/22 3:35',value: 'C站点',bg: 'yellow'},]}]

首先创建时间

  • // 创建时间
createHours: function(){var startHour = 5;var endHour = 11;var html = '';for (let i = startHour; i< 24; i++) {html += `<div>${i < 10 ? `0${i}` : i}:00</div>`}for (let i = 0; i< endHour; i++) {html += `<div>${i < 10 ? `0${i}` : i}:00</div>`}document.getElementById('hour').innerHTML = html;
},

根据数据绘制甘特图

  • 我们将 1H = 60px；这样去定宽，即 1px = 1M；

  • 绘制第一个时间段 start:‘2019/1/21 6:23’; end: ‘2019/1/21 7:45’;

  • var start = new Date('2019/1/21 6:23'),end = new Date('2019/1/21 7:45'),start_h = start.getHours(), // 开始时间start_m = start.getMinutes(), // 开始分钟 end_h = end.getHours(), // 结束时间end_m = end.getMinutes(), // 结束分钟left_offset = 0;_left_offset = 0;width = '';// 获取时间段甘特图的开始位置（我们从5点开始,所以-5）；left_offset = (start_h - 5) * 60 + start_m;// 获取每一段甘特图的宽度，// 先计算出结束时间的位置，然后在减去开始时间的左边距；width = ((end_h - 5) * 60 + end_m) - left_offset;// 使用现有的左边距减去前一个时间的左边距_left_offset = left_offset - allLeft;// 因为存在多个时间段，所以在绘制下一个时间断时，left_offset// 使用allLeft存储上一个时间断距离左边的距离。allLeft = left_offset + width;// 将其添加到DOM中html += `<span style="width:${width}px;margin-left:${_left_offset}px;">${innerData[i].value}</span>`;

  • 首先需要找到时间段中开始时间的开始位置，

  • 计算出时间的width，遵循1px = 1M的规则。

  • 在设置margin-left时，记得减去上一个时间段甘特图的margin-left（重点）。

  • 没绘制一条后，存储其margin-left，方便下一个时间段使用。

关于跨天怎么计算

  • 当我们的时间段是属于跨天的怎么计算他的开始和结束位置，以及他的宽度呢？直接贴代码了哈

  • createData: function() {
var data = this.demoData;
var today = new Date().getDate(); // 今天的日期
for (let m = 0; m< data.length; m++) {var innerData = data[m].innerData;var html = '';var allLeft = 0;for (let i = 0; i< innerData.length; i++) {var start = new Date(innerData[i].start),end = new Date(innerData[i].end),start_d = start.getDate(),end_d = end.getDate(),start_h = start.getHours(),start_m = start.getMinutes(),end_h = end.getHours(),end_m = end.getMinutes(),left_offset = 0;_left_offset = 0;width = '';if (start_d === (today + 1)) {left_offset = ((23 - 5) * 60) + ((start_h + 1) * 60) + start_m;_left_offset = left_offset - allLeft;width = (((23 + (end_h + 1)) - 5) * 60 + end_m) - left_offset;} else if (end_d === (today + 1)) {left_offset = ((start_h - 5) * 60) + start_m;_left_offset = left_offset - allLeft;width = (((24 + end_h) - 5) * 60 + end_m) - left_offset;} else {left_offset = (start_h - 5) * 60 + start_m;_left_offset = left_offset - allLeft;width = ((end_h - 5) * 60 + end_m) - left_offset;}allLeft = left_offset + width;html += `<span style="width:${width}px;margin-left:${_left_offset}px;background:${innerData[i].bg}">${innerData[i].value}</span>`;}document.getElementById('container').innerHTML += `<div class="gantt-item" >${html}</div>`;
}
}

  • 这个地方就不详细解说了，有什么不懂的地方欢迎大家留言。代码很简洁，主要用于实现一个比较简单的甘特图。不需要下载什么插件之类的。

  • 这里把代码贴出来哈，大家可以一起交流，或许你有更好的实现方式呢。

  • <html><head><title>测试demo</title><style type="text/css">#container {width: 100%;overflow: scroll;height: calc(100vh - 0px);width: 1900px;}.carNum {float:left;width:100px;text-align: center;}#hour {width: 1800px;overflow: scroll;}#hour div{width: 60px;float: left;border-left: 1px solid #ddd;background: #ccc;text-align: center;box-sizing: border-box;}.gantt-item {width: 1800px;}.gantt-item:hover{background:rgba(0,0,0,.1);}.gantt-item span {height: 20px;;display: inline-block;margin: 5px 0px;font-size: 12px;text-align: center;color:#fff;background:green;}.nowTime {border: 1px solid green;display: inline-block;height: 500px;height: calc(100vh - 0px);position: absolute;top: 0px;}</style></head><body><div id="container"><div class="carNum"><div style="background:#ccc;">车牌号</div><div style="line-height:30px;">川A09384</div><div style="line-height:30px;">川A09384</div><div style="line-height:30px;">川A09384</div></div><div id="hour" style="float:righ"></div></div></body><script type="text/javascript">var gantt = {demoData: [{   innerData: [{start: '2019/1/21 6:23',end: '2019/1/21 7:45',value: 'A站点',bg: 'green'},{start: '2019/1/21 12:23',end: '2019/1/21 16:45',value: 'B站点',bg: 'yellow'},{start: '2019/1/21 20:00',end: '2019/1/21 23:25',value: 'C站点',bg: 'blue'}]},{   innerData: [{start: '2019/1/21 5:23',end: '2019/1/21 6:05',value: 'A站点',bg: 'blue'},{start: '2019/1/21 10:23',end: '2019/1/21 13:45',value: 'B站点',bg: 'green'},{start: '2019/1/21 21:00',end: '2019/1/22 3:35',value: 'C站点',bg: 'yellow'},]},{  innerData: [{start: '2019/1/21 8:23',end: '2019/1/21 10:05',value: 'A站点',bg: 'blue'},{start: '2019/1/21 13:23',end: '2019/1/21 14:45',value: 'B站点',bg: 'green'},{start: '2019/1/21 22:00',end: '2019/1/22 3:35',value: 'C站点',bg: 'red'},{start: '2019/1/22 4:00',end: '2019/1/22 7:35',value: 'D站点',bg: 'green'},]},],// 初始化init: function() {this.showNowTime();this.createHours();this.createData();},// 创建时间createHours: function(){var startHour = 5;var endHour = 11;var html = '';for (let i = startHour; i< 24; i++) {html += `<div>${i < 10 ? `0${i}` : i}:00</div>`}for (let i = 0; i< endHour; i++) {html += `<div>${i < 10 ? `0${i}` : i}:00</div>`}document.getElementById('hour').innerHTML = html;},// 当前时间线showNowTime: function() {var date = new Date();var h = date.getHours(),m = date.getMinutes();var offset = (h - 5) * 60 + m;var html = `<div class="nowTime" style="margin-left:${offset}px"></div>`;document.getElementById('container').innerHTML += `<div class="gantt-item">${html}</div>`;},createData: function() {var data = this.demoData;var today = new Date().getDate(); // 今天的日期for (let m = 0; m< data.length; m++) {var innerData = data[m].innerData;var html = '';var allLeft = 0;for (let i = 0; i< innerData.length; i++) {var start = new Date(innerData[i].start),end = new Date(innerData[i].end),start_d = start.getDate(),end_d = end.getDate(),start_h = start.getHours(),start_m = start.getMinutes(),end_h = end.getHours(),end_m = end.getMinutes(),left_offset = 0;_left_offset = 0;width = '';if (start_d === (today + 1)) {left_offset = ((23 - 5) * 60) + ((start_h + 1) * 60) + start_m;_left_offset = left_offset - allLeft;width = (((23 + (end_h + 1)) - 5) * 60 + end_m) - left_offset;} else if (end_d === (today + 1)) {left_offset = ((start_h - 5) * 60) + start_m;_left_offset = left_offset - allLeft;width = (((24 + end_h) - 5) * 60 + end_m) - left_offset;} else {left_offset = (start_h - 5) * 60 + start_m;_left_offset = left_offset - allLeft;width = ((end_h - 5) * 60 + end_m) - left_offset;}allLeft = left_offset + width;html += `<span style="width:${width}px;margin-left:${_left_offset}px;">${innerData[i].value}</span>`;}document.getElementById('container').innerHTML += `<div class="gantt-item" >${html}</div>`;}}}gantt.init();</script>
</html>

相关文章：

基于JS简单甘特图（IT枫斗者）

基于JS简单甘特图 基于JS简单甘特图 先来看一下效果吧&#xff0c;这里的需求是从早上的5点为开始时间&#xff0c;到第二天到凌晨5点 前期准备 其实网上有很多甘特图的实现方式&#xff0c;但是他们都只能具象到天&#xff0c;不能具体到某个时间点&#xff0c;而且每一个…...

编程日记 2023/4/28 23:49:58

你真的会判断对象是否为空吗？

首先&#xff0c;这个问题就很有意思&#xff0c;相信大部分人第一反应不就是null吗&#xff1f; 比如&#xff1a; if(str ! null){}可是&#xff0c;很多时候我们判断前端送过来的值&#xff0c;有可能是空字符串&#xff0c;所以更严格的写法是&#xff1a; if(str ! nul…...

编程日记 2023/4/28 23:44:57

JVM系列(十) 垃圾收集器之 Parallel Scavenge/Old

上篇文章我们讲解了单线程垃圾收集器 Serial/SerialOld &#xff0c;与之相对应的多线程垃圾收集器就是 Parallel Scavenge/Old&#xff0c; 本文我们讲解下多线程垃圾收集器 Parallel Scavenge/Old 垃圾收集器 新生代收集器&#xff1a; Serial、ParNew、Parallel Scavenge&…...

编程日记 2023/4/28 23:39:55

华为认证实验篇-ENSP的安装（附下载地址）

ENSP&#xff08;Enterprise Network Simulation Platform&#xff09;是华为公司开发的一款网络仿真软件&#xff0c;它可以帮助网络工程师进行网络拓扑设计、网络配置、网络测试等工作。本篇文章将介绍如何在Windows操作系统上安装ENSP。后续会在专栏陆续更新ENSP的实验&…...

编程日记 2023/4/28 23:34:54

轻量级任务看板做任务管理

利用看板管理工作和任务&#xff0c;可以让团队更高效&#xff0c;也可以一目了然的了解任务进度及问题 1、首先创建一个任务看板 使用看板工具轻量级项目模板创建一个任务看板。 任务看板内包含&#xff1a;列表和任务卡片&#xff0c;列表一般代表任务流程及状态&#xff…...

编程日记 2023/4/28 23:29:53

ARM buildroot 的引入

一、X210 的 bsp 介绍 1、嵌入式 linux 产品的 bsp 介绍 (1) 大部分的 ARM 架构的 linux 平台的 bsp 的内容和结构都是相似的。 (2) bsp 一般是芯片厂家/板卡厂家提供的。 2、X210 的 linuxQT bsp 整体介绍 (1) tslib_x210_qtopia.tgz 是用来支持 QT 的触摸屏操作的应用层库。…...

编程日记 2023/4/28 23:24:52

Fancy 的区间（C++）（前缀和差分）

目录 1.题目描述 2.AC 1.题目描述 Fancy 的区间 时间限制: 1.000 Sec 内存限制: 128 MB 题目描述 省选终于考完了&#xff0c;但是还是不出成绩&#xff0c;Fancy 非常焦急而忧伤的等待着。 闲着无聊的 Fancy 打开书包拿出了一张纸和一支笔&#xff0c;在纸上画了一行n个…...

编程日记 2023/4/28 23:19:51

06 【Sass语法介绍-函数】

这篇文章只更新了颜色函数&#xff0c;由于Sass使用时间过短&#xff0c;其它函数参考官网 1.前言 Sass 中的函数&#xff0c;这在 Sass 中是比较强大的一个功能&#xff0c;同时使用场景和语法也比较多&#xff0c;所以本节内容篇幅较长&#xff0c;但你一定要好好学习&#…...

编程日记 2023/4/28 23:14:50

入参校验产品化 schema

与规则引擎不同,规则面向技术, 传入data, 返回 所有异常字段和原因. 面向技术, 先有对象,再有规则, 如何通过交互来编写schema是个难题? 和json-schema区别: 思路上就是反过来的, 面相产品, schema可视化编辑器, 是面向结构设计. 现有模型,才有数据, 才可以编程. 基于配置…...

编程日记 2023/4/28 23:09:49

【Linux】7、一篇文章学习 Linux 中一些硬核的常用知识

目录 一、systemctl二、软链接三、日期&#xff08;date 命令&#xff09;四、Linux 的时区(1) 修改时区(2) ntp 五、IP 地址六、主机名七、域名解析八、配置 Linux 的固定 IP 地址(1) 在 VMwareWorkstation 中配置 IP 地址网关和网段&#xff08;IP 地址的范围&#xff09;(2)…...

编程日记 2023/4/28 23:04:47

gpt4-如何使用

gpt-4怎么用 目前&#xff0c;GPT-4尚未发布或公开释放。因此&#xff0c;我们目前无法使用GPT-4。GPT-4是由OpenAI公司开发的人工智能语言模型&#xff0c;其预计能够比先前的版本GPT-3更加强大和智能化&#xff0c;但我们需要等待OpenAI官方发布有关GPT-4的更多信息。 如果您…...

编程日记 2023/4/28 22:59:46

定时每天凌晨一点在linux系统上执行一个autobuild.sh脚本如何实现？

定时每天凌晨一点在linux系统上执行一个autobuild.sh脚本如何实现&#xff1f; 可以使用linux的计划任务功能crontab来实现定时执行脚本。 具体步骤如下: 编辑crontab计划任务列表: bash crontab -e 这会打开一个文本编辑器,你可以在里面添加计划任务。添加一行计划任务,内容如…...

编程日记 2023/4/28 22:54:44

C++ 设计模式23：访问者模式

C++ 23种设计模式系列文章目录 创建型模式 第1式 工厂方法模式 第2式 抽象工厂模式 第3式 单例模式 第4式 建造者模式 第5式 原型模式 结构型模式 第6式 适配器模式 第7式 桥接模式 第8式 组合模式 第9式 装饰器模式...

编程日记 2023/4/28 22:49:43

使用python实现葡萄酒威士忌风味特征分类

聚类威士忌 目的和描述：苏格兰威士忌因其复杂性和多样化的风味而备受推崇。据信，生产它的苏格兰地区具有独特的风味特征。在本案例研究中，我们将根据苏格兰威士忌的风味特征对其进行分类。我们将使用的数据集包含来自几个酿酒厂的精选苏格兰威士忌，我们将尝试将威士忌聚类…...

编程日记 2023/5/31 18:05:46

代理IP（代理服务器）的作用和注意事项

代理IP&#xff08;也称代理服务器&#xff09;是一种网络技术&#xff0c;可以用来隐藏用户的真实IP地址并代替其发起网络请求。这种技术在许多场景下都有广泛的应用&#xff0c;如加速网络访问、保护个人隐私、绕过地理限制等。下面将详细介绍代理IP的原理和应用。 原理 代理…...

编程日记 2023/4/28 22:39:39

问题解决 | Failed to initialize NVML: Driver/library version mismatch

问题描述&#xff1a; Ubuntu20.04服务器上&#xff0c;一个docker容器正在训练模型&#xff0c;打开另外一个docker容器时&#xff0c;出现以下错误 Error response from daemon: failed to create shim task: OCI runtime create failed: runc create failed: unable to st…...

编程日记 2023/4/28 22:34:38

ThinkPHP模型操作上

ThinkPHP模型操作上 前言模型一、创建模型二、模型操作 总结 前言 在mvc架构中&#xff0c;模型的解释是写逻辑代码的地方&#xff0c;其实还可以这样理解&#xff0c;就是一串操作写在一个模型类中&#xff0c;就是你要完成某一项功能&#xff0c;将这个功能的代码写在一个mod…...

编程日记 2023/5/31 18:08:03

053：cesium显示网格切片标识，展示X、Y、Level 坐标

第053个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中加载瓦片网格切分标识地图。，它在切片方案中的每个渲染图块周围绘制一个框，并在其中绘制一个标签，指示图块的 X、Y、Level 坐标。 这主要用于调试地形和图像渲染问题。 直接复制下面的 vue+cesium源代码，操…...

编程日记 2023/4/28 22:24:35

FPGA基于XDMA实现PCIE X8视频采集HDMI输出 提供工程源码和QT上位机程序和技术支持

目录 1、前言2、我已有的PCIE方案3、PCIE理论4、总体设计思路和方案5、vivado工程详解6、驱动安装7、QT上位机软件8、上板调试验证9、福利&#xff1a;工程代码的获取 1、前言 PCIE&#xff08;PCI Express&#xff09;采用了目前业内流行的点对点串行连接&#xff0c;比起 PC…...

编程日记 2023/4/28 22:19:33

简单的redis master slave 配置

只做一个简单的master - slave 配置&#xff0c;新手试炼配置用。使用windows系统 master 配置 redis 默认&#xff0c;密码为空。首先配置redis(for master)的密码。 修改安装目录下的redis.windows.conf文件&#xff0c;搜索到requirepass&#xff0c; # requirepass foob…...

编程日记 2023/4/28 22:14:32

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/10/16 23:00:32

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/11/7 18:25:33

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/11/8 6:12:51

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/10/8 5:48:25

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/11/8 9:44:52