禅道 js引入甘特图

最新推荐文章于 2024-06-13 21:15:12 发布

Xiao苏同学

最新推荐文章于 2024-06-13 21:15:12 发布

阅读量5k

点赞数 2

本文链接：https://blog.csdn.net/sugang666/article/details/86163870

版权

1.引入插件

<link href="jsgantt.css" rel="stylesheet" type="text/css"/>
  <script src="jsgantt.js" type="text/javascript"></script>

2..创建一个div元素来保存甘特图

<div style =“position：relative”class =“gantt”id =“GanttChartDIV”> </ div>

3.使用GanttChart（）实例化JSGantt

var g = new JSGantt.GanttChart（'g'，document.getElementById（'GanttChartDIV'），'day'）;
GanttChart（pGanttVar，pDiv，pFormat）
pGanttVar :(必需）指定变量的名称
pDiv :(必需）这是在HTML 
pFormat中创建的DIV对象:(必需） - 用于指示是否应在“day”中绘制图表， “周”，“月”或“季度”格式

4.主要方法

使用以下setter自定义外观

g.setShowRes（1）; //显示/隐藏责任（0/1）
g.setShowDur（1）; //显示/隐藏持续时间（0/1）
g.setShowComp（1）; //显示/隐藏％完成（0/1）
g.setCaptionType（ '资源'）; //设置为显示标题（无，标题，资源，持续时间，完成）
g.setShowStartDate（1）; //显示/隐藏开始日期（0/1）
g.setShowEndDate（1）; //显示/隐藏结束日期（0/1）
g.setDateInputFormat（'mm / dd / yyyy'）//设置输入日期的格式（'mm / dd / yyyy'，'dd / mm / yyyy'，'yyyy-mm-dd'）
g.setDateDisplayFormat（'mm / dd / yyyy'）//设置格式以显示日期（'mm / dd / yyyy'，'dd / mm / yyyy'，'yyyy-mm-dd'）
g.setFormatArr（“day”，“week”，“month”，“quarter”）//设置格式选项（最多4个：“分钟”，“小时”，“日”，“周”，“月”， “25美分硬币”）
5.使用AddTaskItem（）添加任务

 
g.AddTaskItem（new JSGantt.TaskItem（1，'Define Chart API'，''，''，'ff0000'，'http：//help.com'，0，'Brian'，0,1,0,1 ））;
g.AddTaskItem（new JSGantt.TaskItem（11，'Chart Object'，'2/10/2008'，'2/10/2008'，'ff00ff'，'http：//www.yahoo.com'，1， 'Shlomy'，100,0,1,1，“121,122”，“我的标题”））;
TaskItem（pID，pName，pStart，pEnd，pColor，pLink，pMile，pRes，pComp，pGroup，pParent，pOpen，pDepend）
pID :(必需）是一个唯一的ID，用于标识父函数的每一行以及设置dom id用于隐藏/显示
pName :(必需）是任务标签
pStart :(必需）任务开始日期，可以为组输入空日期（''）。您还可以输入特定时间（2/10/2008 12:00）以获得额外的精心度或半天。
pEnd :(必需）任务结束日期，可以为组输入空日期（''）
pColor :(必需）此任务的html颜色; 例如'00ff00'pLink 
:(可选）单击任务栏时导航到的任何http链接。
pMile:(可选）表示里程碑
pRes :(可选）资源名称
pComp :(必需）完成百分比
pGroup :(可选）表示这是否为组（父） - 0 = NOT Parent; 1 = IS父
pParent :(必需）标识父pID，这会导致此任务成为已识别任务的子项
pOpen：最初可以设置为在首次绘制图表时关闭文件夹
pDepend：可选的id列表此任务依赖于...从依赖项绘制的行
pCaption：如果CaptionType设置为“Caption”，将在任务栏后添加可选标题
*您应该能够通过javascript实时添加项目到图表并发出“g.Draw（）”命令。
5A。添加任务的另一种方法是使用带有parseXML（）的外部XML文件
JSGantt.parseXML（ “project.xml中”，克）;

xml文件

<project>
<task>
	<pID>10</pID>
	<pName>WCF Changes</pName>
	<pStart></pStart>
	<pEnd></pEnd>
	<pColor>0000ff</pColor>
	<pLink></pLink>
	<pMile>0</pMile>
	<pRes></pRes>
	<pComp>0</pComp>
	<pGroup>1</pGroup>
	<pParent>0</pParent>
	<pOpen>1</pOpen>
	<pDepend />
</task>
<task>
	<pID>20</pID>
	<pName>Move to WCF from remoting</pName>
	<pStart>8/11/2008</pStart>
	<pEnd>8/15/2008</pEnd>
	<pColor>0000ff</pColor>
	<pLink></pLink>
	<pMile>0</pMile>
	<pRes>Rich</pRes>
	<pComp>10</pComp>
	<pGroup>0</pGroup>
	<pParent>10</pParent>
	<pOpen>1</pOpen>
	<pDepend></pDepend>
</task>
<task>
	<pID>30</pID>
	<pName>add Auditing</pName>
	<pStart>8/19/2008</pStart>
	<pEnd>8/21/2008</pEnd>
	<pColor>0000ff</pColor>
	<pLink></pLink>
	<pMile>0</pMile>
	<pRes>Mal</pRes>
	<pComp>50</pComp>
	<pGroup>0</pGroup>
	<pParent>10</pParent>
	<pOpen>1</pOpen>
	<pDepend>20</pDepend>
</task>
</project>

5.调用Draw（）和DrawDependencies（）

g.Draw（）;	
g.DrawDependencies（）;

6.整体文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <!-- <link rel="stylesheet" type="text/css" href="jsgantt.css"/>
  <script language="javascript" src="jsgantt.js"></script>
  <script language="javascript" src="graphics.js"></script> -->
  <link href="jsgantt.css" rel="stylesheet" type="text/css"/>
  <script src="jsgantt.js" type="text/javascript"></script>
  <style type="text/css">
  </style>
  <title>FREE javascript gantt - JSGantt HTML and CSS only</title>
  </head>
<body>
   <h1>乐展专卖系统项目时间管理</h1>
    <div style="position:relative" class="gantt" id="GanttChartDIV"></div>

</body>
<script>
  var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
  g.setShowRes(1); //显示/隐藏责任（0/1）
  g.setShowDur(1); //显示/隐藏持续时间（0/1）
  g.setShowComp(1); //显示/隐藏％完成（0/1）
  g.setCaptionType('Resource');  //（ '资源'）; //设置为显示标题（无，标题，资源，持续时间，完成）
  if( g ) {
    g.AddTaskItem(new JSGantt.TaskItem(1,   '乐展专卖系统','8/15/2018','','00ffff', 'http://www.baidu.com', 0, '苏罡', 0, 1, 0, 1));
    g.AddTaskItem(new JSGantt.TaskItem(11,  '我的订单','8/15/2018', '', 'ff00ff', 'http://www.baidu.com', 1, '马云',  100, 1, 1, 1));
    g.AddTaskItem(new JSGantt.TaskItem(111,  '新订单',  '8/15/2018',  '8/18/2018', 'F6A7EC', 'http://help.com', 0, 'A1', 100, 0, 11, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(112,  '待付款',  '8/15/2018',  '8/21/2018', '8C2232', 'http://help.com', 0, 'A2', 100, 0, 11, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(113,  '待收货',  '8/15/2018',  '8/22/2018', '228C62', 'http://help.com', 0, 'A3', 100, 0, 11, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(114,  '待评价',  '8/15/2018',  '8/23/2018', '858C22', 'http://help.com', 0, 'A4', 100, 0, 11, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(115,  '全部订单',  '8/15/2018',  '8/18/2018', 'F63ADE', 'http://help.com', 0, 'A5', 100, 0, 11, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(12,  '系统设置', '8/15/2018','','3AF652', 'http://www.baidu.com', 1, '马腾',   100, 1, 1, 1));
    g.AddTaskItem(new JSGantt.TaskItem(121, '门市信息',  '8/15/2018', '8/16/2018',  '3AA8F6', 'http://www.yahoo.com', 0, 'B1', 100, 0, 12, 1));
    g.AddTaskItem(new JSGantt.TaskItem(122, '收货地址',  '8/15/2018',  '8/27/2018', '453AF6', 'http://help.com', 0, 'B2',  100, 0, 12, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(123, '意见反馈',  '8/15/2018',  '8/18/2018', 'A83AF6', 'http://help.com', 0, 'B3',100, 0, 12, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(124, '操作员管理',  '8/15/2018',  '8/20/2018', 'F63ADE', 'http://help.com', 0, 'B4', 100, 0, 12, 1,121));
    g.Draw();   
    g.DrawDependencies();
  }else{
    alert("not defined");
  }

</script>
</html>

Xiao苏同学

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
禅道 js引入甘特图

1.引入插件&lt;link href="jsgantt.css" rel="stylesheet" type="text/css"/&gt; &lt;script src="jsgantt.js" type="text/javascript"&gt;&lt;/script&gt;2..创建一个div元素来保存甘特图&am
复制链接

扫一扫