JavaScript多功能甘特图组件

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

如何使用它

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
});

JavaScript多功能甘特图组件 - jsGantt相关推荐

Twproject Gantt – 开源的 JavaScript 甘特图组件
Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是, 它是免费开源的. ...
强大js web甘特图制作之甘特图组件和数据对象
引用CSS和JS 使用EdoGantt是一件简单轻松的事,首先我们在HTML页面内引用CSS和JS: <link href="http://ww ...
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
语雀原文有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源公司项目有个甘特图的需求. 笔者考察了世面上常见的甘特图组件后,本着我上我也行的心态,以及考虑 ...
前端甘特图组件开发（二）
自定义时间轴功能由于常见的甘特图时间轴只支持按照天/周/月/年或者固定的时间单位进行划分,但实际使用场景下有时候会需要按照特定且不规则的时间段对进度数据进行直观划分.因此本组件在原时间轴的基础上添加 ...
前端甘特图组件开发（一）
背景工作中需要在网页上实现甘特图,以展示进度数据.通过网上调研相关项目,找到一款 dhtmlx-gantt 组件,在低程度上满足项目需求,但在部分定制功能(如时间轴自定义.编辑弹窗样式风格等)并不能 ...
AnyGantt Flash甘特图组件免费下载及使用教程
原文来自龙博方案网http://www.fanganwang.com/product/1455转载请注明出处 AnyGantt是一个强大的,基于Flash的数据可视化解决方案.允许任何人利用有力的动画 ...
记一次 React 开源甘特图组件的性能优化，已合入 PR！
背景公司项目最近用到甘特图功能,于是集成了一款开源的甘特图插件. 甘特图的主要作用是项目管理,可以用图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间,如下图 image. ...
Flex：MyReport报表引擎2.7.3.0新功能——甘特图
新增甘特图控件,可以制作项目管理类的报表例子1:年-月时间刻度,显示项目的计划进度和实际完成进度,适用于项目周期较长的情况. <shapetype id="_x0000_t75&qu ...
易度甘特图的功能介绍和开发手册
易度甘特图发布1.5版本! 易度甘特图是当前WEB开发中领先的甘特图解决方案. 它是使用Javascript开发的,实现了与微软 Project 甘特图一致的界面和功能,可广泛应用于项目管 ...

JavaScript多功能甘特图组件 - jsGantt

更多特点

如何使用它

JavaScript多功能甘特图组件 - jsGantt相关推荐

最新文章

热门文章