彩票走势图

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

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

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

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

首先,确保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页面展示的甘特图:

web显示甘特图

下载AnyGantt最新试用版


标签:甘特图甘特图开发

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP