AnyGantt实例教程——在Web网页中快速创建甘特图-控件新闻-慧都网

AnyGantt实例教程——在Web网页中快速创建甘特图

原创|使用教程|编辑：龚雪|2014-04-08 10:10:35.000|阅读 2793 次

概述：AnyGantt控件实例详解在web页面中创建甘特图。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

首先，确保html页面可以包含flash项目，在html代码页面添加AnyGantt组件：

/swf 
AnyGantt.swf
/js 
AnyGantt.js
anychart.xml
Anychart.html

我们以如下表格数据为例，进行数据和样式的选择：

Task	Start Time	End Time	Current Progress
Architectural Design	2008/01/01	2008/01/02	50%
Interior Design	2008/02/01	2008/03/01	35%
Construction Phase	2008/02/10	2008/04/18	0%
Decoration Phase	2008/04/01	2008/05/10	0%
Opening Celebration	2008/05/20		0%

其次是转为表格数据为XML传送至AnyGAntt：

<anygantt>
<project_chart>
<tasks>
<taskid="1"name="Architectural Design"actual_start="2008/01/01"actual_end="2008/01/02"progress="50" />
<taskid="2"name="Interior Design"actual_start="2008/02/01"actual_end="2008/03/01"progress="35" />
<taskid="3"name="Construction Phase"actual_start="2008/02/10"actual_end="2008/04/18"progress="0" />
<taskid="4"name="Decoration Phase"actual_start="2008/04/01"actual_end="2008/05/10"progress="0" />
<taskid="5"name="Opening Celebration"actual_start="2008/05/20"progress="0" />
</tasks>
</project_chart>
</anygantt>

然后，完善html文件结构：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>AnyChart Sample</title> 
<script type="text/javascript" language="javascript" src="./js/AnyGantt.js"></script> 
</head> 
<body> 
    <script type="text/javascript" language="javascript">
     //<![CDATA[
    var chart = new AnyGantt('./swf/AnyGantt.swf');
     chart.width = 700;
     chart.height = 300;
     chart.setXMLFile('./anychart.xml');
     chart.write();
     //]]>
     </script></body> 
</html>

最后通过浏览器，将可以看见web页面展示的甘特图：