JavaScript多功能甘特图组件 - jsGantt

news/2024/3/28 23:36:36/文章来源:https://blog.csdn.net/duninet/article/details/131515763

jsGantt 是一个可定制的、灵活的、多语言的甘特图组件,由原生 JavaScript 构建。它使用客户端渲染以获得快速的性能和动态的交互性。非常适用于任何需要交互式时间线或时间表显示的项目。

更多特点

  • 多语言支持: 通过对多语言的支持,使您的甘特图可以在全球范围内使用。

  • 任务和可折叠的任务组: 以有组织的方式构建你的任务,并轻松浏览它们。

  • 依赖关系和突出显示: 可视化任务的依赖性,并通过简单的悬停获得任务细节。

  • 数据可编辑性: 通过内嵌的责任方列表,随时更新你的甘特表。

  • 附加列: 使用附加列来丰富你的甘特表,使其具有更多的数据。

  • 动态加载和格式变化: 动态加载任务,并在小时、日、周、月和季度格式之间毫不费力地切换。

  • 远程或本地数据: 从本地JS对象或远程JSON/XML数据源获取你的甘特图数据。

  • 也可与Angular、React、Vue和.Net合作

如何使用它

1.安装并导入jsGantt。

# NPM
$ npm i jsgantt-improved
import {JSGantt} from 'jsgantt-improved';

2.或者直接在文档中加载所需的JS/CSS文件。

<!-- OR -->
<link rel="stylesheet" href="dist/jsgantt.css" />
<script src="dist/jsgantt.js"></script>

3.创建一个空的容器来放置甘特图。

<div style="position:relative" class="gantt" id="example"></div>

4.创建一个新的甘特图实例。

  • pDiv: 图表容器的选择器

  • pFormat: “小时”、“日”、“周”、"月 "或 “季度”

// JSGantt.GanttChart(pDiv, pFormat);
const myChart = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');

5.从JS对象、JS字符串、JSON或XML加载任务数据。

// object
myChart.AddTaskItemObject({pID: 1,pName: "Name 1",pStart: "2023-02-25",pEnd: "2023-03-17",pPlanStart: "2023-04-01",pPlanEnd: "2023-04-15 12:00",pClass: "",pPlanClass: ""pLink: "",pMile: 0,pRes: "Brian", // resource namepComp: 0,pGroup: 0, // 0 = normal task, 1 = standard group task, 2 = combined group taskpParent: 0, // parent IDpOpen: 1, // 1 = open, 0 = closedpDepend: "", // comma separated list of ids this task is dependent onpCaption: "",pCost: 1000,pNotes: "Some Notes text",pBarText: "ex. bar text",category: "My Category",sector: "Finance"
});
// JSON
JSGantt.parseJSON('./data.json', myChart);
// XML
JSGantt.parseXML("./data.xml", myChart);

6.在页面上画出图表。

myChart.Draw();

7.按ID删除一个任务项目。

myChart.RemoveTaskItem(5);

8.清除所有任务。

myChart.ClearTasks()

9.设置选项。

g.setOptions({vCaptionType: 'Complete',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,     vQuarterColWidth: 36,vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tooltip boxvDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to display dates in the "Major" header of the "Day" viewvWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" viewvLang: lang,vAdditionalHeaders: { // Add data columns to your tablecategory: {title: 'Category'},sector: {title: 'Sector'}},vShowTaskInfoLink: 1, // Show link in tool tip (0/1)vShowEndWeekDate: 0,  // Show/Hide the date for the last day of the week in header for daily view (1/0)vUseSingleCell: 10000, // Set the threshold at which we will only use one cell per table row (0 disables).  Helps with rendering performance for large charts.vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsersvScrollTo: new Date(),// EVENTS// OnChangeevEventsChange: {taskname: console.log,res: console.log,},// EventsClickCellvEvents: {taskname: console.log,res: console.log,dur: console.log,comp: console.log,start: console.log,end: console.log,planstart: console.log,planend: console.log,cost: console.log,additional_category: console.log, // for additional fieldsbeforeDraw: ()=>console.log('before draw listener'),afterDraw: ()=>console.log('before after listener')},vEventClickRow: console.log,vEventClickCollapse: console.log
});

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_325701.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx配置https加密

以下操作版本为Ubuntu2004&#xff0c;文件位置可能略有不同 https 功能 Web网站的登录页面通常都会使用https加密传输的&#xff0c;加密数据以保障数据的安全&#xff0c;HTTPS能够加密信息&#xff0c;以免敏感信息被第三方获取&#xff0c;所以很多银行网站或电子邮箱等等…

fiddler弱网测试 和 Chrome浏览器弱网设置

文章目录 前言 一、fiddler弱网测试 二、Chrome浏览器弱网测试 步骤1&#xff1a;在Fiddler中启动弱网 步骤2&#xff1a;设置网络参数 步骤3&#xff1a;设置完成后&#xff0c;保存 三、弱网测试关注点 总结 前言 测试APP、web经常需要用到弱网测试&#xff0c;也就是…

Flink运行原理

Apache Flink是什么&#xff1f;对于这个问题&#xff0c;Apache软件基金会官方给出了定义&#xff1a;Flink是一种框架和分布式处理引擎&#xff0c;主要用于对无界和有界数据流进行有状态计算。 本文将从以下几个方面来了解flink运行原理&#xff1a; 【Flink运行时四大组件…

Vault AppRole最佳实现过程

AppRole AppRole身份验证方法允许机器或应用程序使用 Vault 定义的角色进行身份验证。AppRole 的开放式设计支持使用不同的工作流和配置来应对大量应用程序。这种身份验证方法主要是面向自动化工作流程(机器和服务)设计的,对人类操作者不太有用。 “AppRole”代表一组 Vau…

clickhouse日志表占用大量磁盘空间

clickhouse日志表占用大量磁盘空间 sql&#xff1a; SELECT sum(rows) AS 总行数, formatReadableSize(sum(data_uncompressed_bytes)) AS 原始大小, formatReadableSize(sum(data_compressed_bytes)) AS 压缩大小, round((sum(data_compressed_bytes) / sum(data_uncompresse…

linux 操作系统内核态用户态

1. 32位系统一个进程最多有多少堆内存 对 32 位操作系统而言&#xff0c;它的寻址空间是4G&#xff08;2的32次方&#xff09;&#xff0c;Linux把它分为两部分&#xff1a;最高的1G(虚拟地址从0xC0000000到0xffffffff)用做内核本身&#xff0c;成为“内核空间”&#xff0c;而…

【全文搜索选型】全文搜索 PostgreSQL 或 ElasticSearch

在本文中&#xff0c;我记录了在 PostgreSQL&#xff08;使用 Django ORM&#xff09;和 ElasticSearch 中实现全文搜索 (FTS) 时的一些发现。 作为一名 Django 开发人员&#xff0c;我开始寻找可用的选项来在大约一百万行的标准大小上执行全文搜索。有两个值得尝试的选项&…

新发布的 DBeaver 23.1.1 版本正式支持时序数据库 TDengine

众所周知&#xff0c;DBeaver 是一个流行的开源数据库管理和 SQL 客户端工具&#xff0c;为管理和使用各种类型的数据库&#xff08;包括多个时序数据库&#xff09;提供强大而灵活的平台。为了让大家在应用上更加便捷&#xff0c;我们与 DBeaver 达成合作&#xff0c;新发布的…

【ARM】-IRQ 和 FIQ 异常中断处理程序的返回

文章目录 处理流程示例代码实现 处理流程 通常处理器执行完当前指令后&#xff0c;查询 IRQ 中断引脚及 FIQ 中断引脚&#xff0c;并且查看系统是否允许 IRQ 中断及 FIQ中断。 如果有中断引脚有效&#xff0c;并且系统允许该中断产生&#xff0c;处理器将产生 IRQ 异常中断或 …

【直播预告】HarmonyOS极客松赋能直播第四期:HarmonyOS开发经验分享

直播预约通道&#xff1a;【直播预告】HarmonyOS极客松赋能直播第四期&#xff1a;HarmonyOS开发经验分享

为什么从 MVC 到 DDD,架构的本质是什么?

作者&#xff1a;小傅哥 博客&#xff1a;https://bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 本文来自于小傅哥新编写的 《Java简明教程》 系列内容&#xff0c;本教程意在于通过简单、明了、清晰的成体系内容&#xff0c;教…

IP 扫描程序:轻松发现、扫描和跟踪 IP 空间

什么是 IP 扫描 IP 扫描是实时持续监控网络 IP 地址空间的过程。包括 ICMP ping 扫描和 SNMP 扫描在内的网络协议数量用于扫描网络中的 IP 地址。网络管理员依靠 IP 扫描程序轻松检查和管理 IP 地址空间。使用网络 IP 扫描程序进行 IP 扫描可查看 IP 地址空间利用率和性能。 …

网络io模型、同步异步及libuv

网络io模型及基础概念 概念说明 用户空间与内核空间 操作系统的核心是内核&#xff0c;独立于普通的应用程序&#xff0c;可以访问受保护的内存空间&#xff0c;也有访问底层硬件设备的所有权限。为了保证用户进程不能直接操作内核&#xff08;kernel&#xff09;&#xff0…

Unity3D:工具栏

推荐&#xff1a;将 NSDT场景编辑器 加入你的3D工具链 3D工具集&#xff1a; NSDT简石数字孪生 工具栏 在 Unity Editor 顶部可以看到工具栏。 工具栏不是窗口&#xff0c;是 Unity 界面中唯一无法重新排列的部分。 有关场景视图中的其他工具&#xff0c;请参阅叠加。 工具栏…

微服务:Springboot集成Hystrix实现熔断、降级、隔离

文章目录 前言知识积累Springboot集成Hystrix1、maven依赖引入2、application开启feign的hystrix支持&#xff08;客户端配置限流降级熔断&#xff09;3、入口类增加EnableFeignClients EnableHystrix 开启feign与hystrix4、feign调用增加降级方法服务端配置限流降级熔断(选择使…

中移物联车联网项目,在 TDengine 3.0 的应用

小T导读&#xff1a;在中移物联网的智慧出行场景中&#xff0c;需要存储车联网设备的轨迹点&#xff0c;还要支持对车辆轨迹进行查询。为了更好地进行数据处理&#xff0c;他们在 2021 年上线了 TDengine 2.0 版本的 5 节点 3 副本集群。 3.0 发布后&#xff0c;它的众多特性吸…

关于visual studio 2010 及以上版本 引入boost库的最新解决方法

之前没有怎么用到boost库&#xff0c;出来实习需要去编译一些代码&#xff0c;需要引入boost第三方库&#xff0c;在这过程中&#xff0c;一直出现 LINK : fatal error LNK1104: 无法打开文件“libboost_filesystem-vc100-mt-gd-x3 错误&#xff0c; 但是也确实是跟其他教程学过…

myCobot机器人ChatGPT应用:设计原则和模型能力

我们将 ChatGPT 的功能扩展到机器人&#xff0c;并通过语言直观地控制机器人手臂、无人机和家庭助理机器人等多个平台。 你有没有想过用你自己的话告诉机器人该怎么做&#xff0c;就像你对人类一样&#xff1f;只是告诉你的家庭助理机器人&#xff1a;“请加热我的午餐”&…

MYSQL根据标签查询数据

场景条件&#xff1a; 1.根据用户id查询到该id绑定的标签&#xff08;可能是多个标签也可能是单个标签&#xff09; 2.根据标签的id查询到绑定标签id的信息表 SELECT labelID FROM LRrelation WHERE relationID 1 SELECT * FROM notification SELECT * FROM notification…

6.30学习-函数柯里化,回调解决异步多线程

6.30学习-函数柯里化&#xff0c;回调解决异步多线程 1.函数柯里化1.1 确定参数的函数柯里化1.2参数不确定的函数柯里化1.3 用法1.3.1 给setTimeout传递进来的函数添加参数 2.回调解决异步多线程 1.函数柯里化 函数柯里化&#xff0c;经常可能就面试的时候听说过&#xff0c;反…