国产精品欧美一,国产精品精品国内自产拍,精品免费国产一区二区

AnyGantt實例教程——在Web網頁中快速創建甘特圖

原創|使用教程|編輯：龔雪|2014-04-08 10:10:35.000|閱讀 2766 次

概述：AnyGantt控件實例詳解在web頁面中創建甘特圖。

首先，確保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頁面展示的甘特圖：