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

improve-gantt-elastic（vue2中甘特图实现与引入）

news 来源：原创 2025/6/17 3:08:21

1.前言

项目开发中需要使用甘特图展示项目实施进度，左侧为表格计划，右侧为图表进度展示。wl-gantt-mater，dhtmlx尝试使用过可拓展性受到限制。gantt-elastic相对简单，可操作性强，基础版本免费。

甘特图（Gantt chart）又称为横道图、条状图（Bar chart），通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。

2. gantt-elastic（vue2中甘特图实现与引入）

2.1 gantt-elastic

官方demo

gantt-elastic官网gantt-elastic | Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]https://neuronetio.github.io/gantt-elastic/

2.2 npm install引入

不受网络限制直接npm install在项目中

npm install --save gantt-elastic
npm install --save gantt-elastic-header # 可选，根据需求安装

将对应的demo组件引入对应的项目。

2.3内网引入

(1)拉取github上的gantt-elastic项目

将对应需要的依赖进行复制到需要开发的项目依赖中node_module。

需要复制的依赖包，相关依赖包已上传到博客资源中，可自行下载使用。

dayjs  
gantt-elastic  
gantt-elastic-header  
resize-observe-polyfill  
vue-slider-component  
vue-switches

(2) package.json版本锁定

"dependencies": {"dayjs": "^1.8.14","gantt-elastic": "^1.0.12","gantt-elastic-header": "^0.1.11",
}

(3) demo引入

<template><gantt-elastic:options="options":tasks="tasks"@tasks-changed="tasksUpdate"@options-changed="optionsUpdate"@dynamic-style-changed="styleUpdate"><gantt-header slot="header"></gantt-header></gantt-elastic>
</template><script>
import GanttElastic from "gantt-elastic";
import GanttHeader from "gantt-elastic-header";
import dayjs from "dayjs";// just helper to get current dates
function getDate(hours) {const currentDate = new Date();const currentYear = currentDate.getFullYear();const currentMonth = currentDate.getMonth();const currentDay = currentDate.getDate();const timeStamp = new Date(currentYear,currentMonth,currentDay,0,0,0).getTime();return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}let tasks = [{id: 1,label: "Make some noise",user:'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',start: getDate(-24 * 5),duration: 15 * 24 * 60 * 60 * 1000,percent: 85,type: "project",collapsed: true,},{id: 2,label: "With great power comes great responsibility",user:'<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',parentId: 1,start: getDate(-24 * 4),duration: 4 * 24 * 60 * 60 * 1000,percent: 50,type: "milestone",collapsed: true,style: {base: {fill: "#1EBC61",stroke: "#0EAC51"}}},{id: 3,label: "Courage is being scared to death, but saddling up anyway.",user:'<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',parentId: 2,start: getDate(-24 * 3),duration: 2 * 24 * 60 * 60 * 1000,percent: 100,type: "task"},{id: 4,label: "Put that toy AWAY!",user:'<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',start: getDate(-24 * 2),duration: 2 * 24 * 60 * 60 * 1000,percent: 50,type: "task",dependentOn: [3]},{id: 5,label:"One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.",user:'<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',parentId: 4,start: getDate(0),duration: 2 * 24 * 60 * 60 * 1000,percent: 10,type: "milestone",style: {base: {fill: "#0287D0",stroke: "#0077C0"}}},{id: 6,label: "Butch Mario and the Luigi Kid",user:'<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',parentId: 5,start: getDate(24),duration: 1 * 24 * 60 * 60 * 1000,percent: 50,type: "task",collapsed: true,style: {base: {fill: "#8E44AD",stroke: "#7E349D"}}},{id: 7,label: "Devon, the old man wanted me, it was his dying request",user:'<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',parentId: 2,dependentOn: [6],start: getDate(24 * 2),duration: 4 * 60 * 60 * 1000,percent: 20,type: "task",collapsed: true},{id: 8,label: "Hey, Baby! Anybody ever tell you I have beautiful eyes?",user:'<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',parentId: 7,dependentOn: [7],start: getDate(24 * 3),duration: 1 * 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 9,label:"This better be important, woman. You are interrupting my very delicate calculations.",user:'<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',parentId: 8,dependentOn: [8, 7],start: getDate(24 * 4),duration: 4 * 60 * 60 * 1000,percent: 20,type: "task",style: {base: {fill: "#8E44AD",stroke: "#7E349D"}}},{id: 10,label: "current task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 5),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 11,label:"test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 6),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 12,label: "test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 7),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task",parentId: 11},{id: 13,label:"test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 8),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 14,label: "test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 9),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 15,label: "test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 16),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"}];let options = {taskMapping: {progress: "percent"},maxRows: 100,maxHeight: 500,title: {label: "Your project title as html (link or whatever...)",html: false},row: {height: 24},calendar: {hour: {display: true}},chart: {progress: {bar: false},expander: {display: true}},taskList: {expander: {straight: false},columns: [{id: 1,label: "ID",value: "id",width: 40},{id: 2,label: "Description",value: "label",width: 200,expander: true,html: true,events: {click({ data, column }) {alert("description clicked!\n" + data.label);}}},{id: 3,label: "Assigned to",value: "user",width: 130,html: true},{id: 3,label: "Start",value: task => dayjs(task.start).format("YYYY-MM-DD"),width: 78}, {id: 4,label: "Type",value: "type",width: 68},{id: 5,label: "%",value: "progress",width: 35,style: {"task-list-header-label": {"text-align": "center",width: "100%"},"task-list-item-value-container": {"text-align": "center",width: "100%"}}}]},locale: {name: "en",Now: "Now","X-Scale": "Zoom-X","Y-Scale": "Zoom-Y","Task list width": "Task list","Before/After": "Expand","Display task list": "Task list"}};export default {name: "Gantt",components: {GanttElastic,GanttHeader},data() {return {tasks,options,dynamicStyle: {},lastId: 16};},methods: {tasksUpdate(tasks) {this.tasks = tasks;},optionsUpdate(options) {this.options = options;},styleUpdate(style) {this.dynamicStyle = style;}}
};
</script><style>
</style>

3.gantt-elastic-h

基于 gantt-elastic的拓展封装，基本功能相较gantt-elastic完善。在使用gantt-elastic可参考gantt-elastic-h的Api文档。也可选择使用gantt-elastic-h来实现参考使用文档自行完成。

使用文档 | gantt-elastic-h | 使用文档https://jianguoht.github.io/gantt-elastic-h/doc.html#options-tasklist-columns

4.参考博客

vue甘特图(内网引入gantt-elastic以及源码扩展)_vue wl-gantt-CSDN博客文章浏览阅读3.2k次，点赞2次，收藏18次。前言：项目要求用甘特图展示计划的实施过程。之前用过dhtmlx，用着不是很舒服。又在网上看了jQueryGantt-master，wl-gantt-mater，gantt-elastic的大概源码，最后选定gantt-elastic(源码相对简单，易扩展开发，没选用他的进阶版本gantt-schedule-timeline-calendar-master的原因是这个要收费)1.外网开发，直接去github上npm install就好，我是内网开发，在github上install下来，然后把下下来的nod_vue wl-gantthttps://blog.csdn.net/qq_36566924/article/details/125293765?fromshare=blogdetail&sharetype=blogdetail&sharerId=125293765&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link

improve-gantt-elastic（vue2中甘特图实现与引入）

1.前言项目开发中需要使用甘特图展示项目实施进度，左侧为表格计划，右侧为图表进度展示。wl-gantt-mater，dhtmlx尝试使用过可拓展性受到限制。gantt-elastic相对简单，可操作性强，基础版本免费。甘特图（Gan…...

编程日记 2025/6/4 16:00:50

模型笛卡尔思维

系列文章分享模型，了解更多👉 模型_思维模型目录。怀疑一切，分析整合，验证真理。 1 笛卡尔思维模型的应用 1.1 笛卡尔思维模型在城市规划中的应用背景：某城市计划进行新的城市规划，以提高城市的可持续性…...

编程日记 2025/6/4 13:22:34

LabVIEW桥接传感器数据采集与校准程序

该程序设计用于采集来自桥接传感器的数据，执行必要的设置（如桥接配置、信号采集参数、时间与触发设置），并进行适当的标定和偏移校正，最终通过图表呈现采集到的数据信息。程序包括多个模块，用于配置通道、触…...

编程日记 2025/6/1 14:09:54

无人机技术架构剖析！

一、飞机平台系统飞机平台系统是无人机飞行的主体平台，主要提供飞行能力和装载功能。它由机体结构、动力装置、电气设备等组成。机体结构：无人机的机身是其核心结构，承载着其他各个组件并提供稳定性。常见的机身材料包括碳纤维、铝合金、…...

编程日记 2025/6/4 3:29:26

飞牛使用docker部署Watchtower 自动更新 Docker 容器

Watchtower是一款开源的Docker容器管理工具，其主要功能在于自动更新运行中的Docker容器 Watchtower 支持以下功能： 自动拉取镜像并更新容器。配置邮件通知。定时执行容器更新任务。 compose搭建Watchtower 1、新建文件夹先在任意位置创建一个 w…...

编程日记 2025/6/3 10:39:35

【Flink系列】4. Flink运行时架构

4. Flink运行时架构 4.1 系统架构 Flink运行时架构——Standalone会话模式为例 1）作业管理器（JobManager） JobManager是一个Flink集群中任务管理和调度的核心，是控制应用执行的主进程。也就是说，每个应用都应该被…...

编程日记 2025/6/2 7:05:45

【机器学习实战入门】使用Pandas和OpenCV进行颜色检测

Python 颜色检测项目今天的项目将非常有趣和令人兴奋。我们将与颜色打交道，并在项目过程中学习许多概念。颜色检测对于识别物体来说是必要的，它也被用作各种图像编辑和绘图应用的工具。什么是颜色检测？ 颜色检测是检测任何颜色名称的过程…...

编程日记 2025/6/3 5:12:17

C++ K2 （2）

提示：文章文章目录前言一、背景标准库基础知识堆栈总结前言前期疑问： 本文目标： 一、背景接上文标准库 1、（单选）【STL】在以下容器中间插入一个元素，时间复杂度为O(1)的是（A&#x…...

编程日记 2025/6/2 7:00:27

【React】静态组件动态组件

目录静态组件动态组件创建一个构造函数(类)使用 class 实现组件**使用 function 实现类组件** 静态组件函数组件是静态组件： 组件第一次渲染完毕后，无法基于内部的某些操作让组件更新「无法实现自更新」；但是，如果调用它的父组…...

编程日记 2025/6/4 7:22:13

Spring Web MVC综合案例

承接上篇文章——Spring Web MVC探秘，在了解Spring Web MVC背后的工作机制之后，我们接下来通过三个实战项目，来进一步巩固一下前面的知识。一、计算器效果展示：访问路径：http://127.0.0.1:8080/calc.html 前端代码&a…...

编程日记 2025/5/31 0:52:53

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数，它基于已知的相机参数和相对位置&am…...

编程日记 2025/6/3 3:15:41

SDL2基本的绘制流程与步骤

SDL2（Simple DirectMedia Layer 2）是一个跨平台的多媒体库，它为游戏开发和图形应用提供了一个简单的接口，允许程序直接访问音频、键盘、鼠标、硬件加速的渲染等功能。在 SDL2 中，屏幕绘制的流程通常涉及到窗口的创建、渲染目标的设置、图像的绘制、事件的处理等几个步骤。…...

编程日记 2025/6/3 9:06:43

计算机网络（42）远程终端协议TELNET

前言 Telnet（Telecommunication Network Protocol）是一种网络协议，属于TCP/IP协议族，主要用于提供远程登录服务。一、概述 Telnet协议是一种远程终端协议，它允许用户通过终端仿真器连接到远程主机，并在远程…...

编程日记 2025/6/2 3:09:53

重拾Python学习，先从把python删除开始。。。

自己折腾就是不行啊，屡战屡败，最近终于找到前辈教我第一步删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder，跟matlab最像，也最容易入手。从VScode上搞python，最后安装到appdata上，安装插…...

编程日记 2025/5/27 10:18:03

51c大模型~合集106

我自己的原文哦~ https://blog.51cto.com/whaosoft/13115290 #GPT-5、 Opus 3.5为何迟迟不发新猜想：已诞生，被蒸馏成小模型来卖「从现在开始，基础模型可能在后台运行，让其他模型能够完成它们自己无法完成的壮举——就像一个老…...

编程日记 2025/6/4 15:15:23

node安装教程及环境配置

1.下载安装包下载的网址：Node.js — Download Node.js 根据自己电脑系统及位数选择，电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。 .msi和.zip格式区别： .msi…...

编程日记 2025/6/4 16:45:47

Temp123

MapDB：的持久化机制，以及源码分析和摘取 1、spark streaming--struct streaming 基于时间间隔攒批 2、kafka-connect-hdfs 控制 flush.size 和 interval.ms控制攒批 - 完全自研攒批机制 - 使用 embeded 版 https://lxblog.com/qianwen/share?shar…...

编程日记 2025/6/4 12:22:26

YOLO系列代码

Test-Time Augmentation TTA (Test Time Augmentation)是指在test过程中进行数据增强。其思想非常简单，就是在评测阶段，给每个输入进行多种数据增广变换，将一个输入变成多个输入，然后再merge起来一起输出，形成一种ens…...

编程日记 2025/6/2 21:32:41

2025.1.16——一、NewsCenter

题目来源：攻防世界 NewsCenter 目录一、题目二、sqlmap解题——bp抓包存为txt文件进行爆破 step 1：search框内随便输入，进行抓包 step 2：抓包后，存到txt文件，进行sqlmap step 3：-r获取文…...

编程日记 2025/6/4 8:18:30

Java中的继承

引入继承 Java中使用类对实体进行描述，类经过实例化之后的产物对象，就可以用来表示现实中的实体，描述的事物错综复杂，事物之间可能会存在一些关联，因此我们就需要将他们共性抽取，面向对象的思想中提出了继…...

编程日记 2025/6/1 19:49:58

vue3+ts+uniapp 微信小程序（第一篇）—— 微信小程序定位授权，位置信息权限授权

文章目录简介一、先看效果1.1 授权定位前，先弹出隐私协议弹框1.2 上述弹框点击同意，得到如下弹框1.3 点击三个点，然后点设置 1.4 在1.2步骤下，无论同意或者拒绝二、manifest.json 文件配置三、微信公众平台配置3.1 登录进入微信…...

编程日记 2025/6/4 9:49:02

在Playwright中使用PO模式

1.新建项目安装库 npm init -y npm install -D playwright npm install -D playwright/test npm install typescript ts-node types/node npx playwright install 项目目录 2.编写代码 package.json {"name": "pom_playwright","version": …...

编程日记 2025/6/4 1:29:10

三台 Centos7.9 中 Docker 部署 Redis 哨兵模式

三台 Centos7.9 中 Docker 部署 Redis 哨兵模式 1. 环境规划2. 配置 Docker Compose3. 配置 Redis 密码和持久化4. 配置哨兵5. 启动服务6. 验证 Redis 哨兵模式7. 注意事项 1. 环境规划三台服务器的角色分配如下： IP Address容器端口角色192.168.15.128redis-mas…...

编程日记 2025/5/30 18:06:32

JSON数据格式的序列化和反序列化jackson针对首字母小学的字段返回序列化后第2个大写字母也变成小写的问题处理

SpringBoot类属性”第二个字母大写“反序列化问题。key第二个字母大写会被转成小写 , 这个为 jackson 的bug。后台 : String pName; public String getPName() { return pName; } 前台 : { pname : xxx } 解决方案： 使用JsonProperty("pName")…...

编程日记 2025/5/28 5:35:54

Android wifi列表中去自身的热点

Android wifi列表中去自身的热点一、前言 Android wifi列表中能搜索到自身的热点wifi？ 正常手机上都不会出现这个问题；可能是系统底层已经做了过滤处理。现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。比如基于两个单独的wifi双模组硬…...

编程日记 2025/6/2 4:33:02

Elasticsearch：Jira 连接器教程第二部分 - 6 个优化技巧

作者：来自 Elastic Gustavo Llermaly 将 Jira 连接到 Elasticsearch 后，我们现在将回顾最佳实践以升级此部署。在本系列的第一部分中，我们配置了 Jira 连接器并将对象索引到 Elasticsearch 中。在第二部分中，我们将回顾一些最佳实…...

编程日记 2025/5/31 18:06:06

单线性激光扫描、多线性激光扫描？激光扫描三维重建算法环节

分类都属于激光扫描技术，但它们在光源的数量和工作方式上存在一些差异。单线性激光扫描： 单线性激光扫描使用单个线状光源进行扫描。光源沿一个方向移动，将一条直线上的目标进行扫描。这种方式适用于需要获取目标表面在一个维度上的信息的…...

编程日记 2025/6/2 0:20:01

git 常用命令 git archive

git archive 是 Git 中用于创建一个包含指定提交或分支中所有文件的归档文件（如 .tar 或 .zip）的命令。这个命令非常适合用于分发项目快照、备份代码库或导出特定版本的文件。 git archive --formatzip --outputproject.zip HEAD …...

编程日记 2025/6/2 19:05:16

CMD批处理命令入门（6）——常用的特殊字符

CMD批处理命令入门（6）——特殊字符本章内容主要学习要点：重定向符 >、>>命令管道符 |组合命令 &、&&、||转义字符 ^变量引导符 %界定符 "" 本章内容主要学习要点： >、>>重定向符| 命令…...

编程日记 2025/5/31 8:32:02

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（6）

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（6） 前言本篇摘要11. Chatbot：融合大模型的多模态聊天机器人11.6 为LLM Agent构建UI11.5.1 使用代理构建1. 使用transformers.agents的实际示例2. 使…...

编程日记 2025/6/3 20:57:41

【算法】前缀和

前缀和 1.【模板】前缀和2.最大子段和3.【模板】二维前缀和4.激光炸弹前缀的核心思想是预处理，可以在暴力枚举的过程中，快速查询出某一段区间内的和，从而优化时间复杂度。是经典的用空间替换时间的做法。 1.【模板】前缀和【模板】前缀和…...

编程日记 2025/6/1 19:39:50

android Recyclerview viewholder统一封装

Recyclerview holder 统一封装 ViewHolder类 import android.annotation.SuppressLint import android.content.Context import android.graphics.Color import android.graphics.drawable.GradientDrawable import android.os.Build import android.os.CountDownTimer import…...

编程日记 2025/6/3 16:14:15