彩票走势图

AnyGantt实例教程——在Web网页中添加多个甘特图

原创|使用教程|编辑:龚雪|2014-04-09 10:05:09.000|阅读 486 次

概述:AnyGantt控件实例详解在web页面中添加多个甘特图。

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

AnyGantt实例教程——在Web网页中快速创建甘特图后,慧都控件网整理发布如何实现多个甘特图的添加。

创建3个随机数据表甘特图资源的XML文件,通过布局显示甘特图:

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td colspan="2" width="60%">
    <div id="chartDiv-1"></div>
  </td>
  <td width="40%">
    <div id="chartDiv-2"></div>
  </td>
</tr>
<tr>
  <td colspan="3" width="100%">
    <div id="chartDiv-3"></div>
  </td>
</tr> 
</table>

然后添加代码到onload事件中加载甘特图:

最后在表格中添加甘特图代码:

<script type="text/javascript" language="javascript">
//<![CDATA[
// Set SWF file for all charts
AnyGantt.swfFile = './swf/AnyGantt.swf';

// Function that creates gantt charts will be launched when page loads
function init(){

var chart1 = new AnyGantt();

chart1.width = "100%";
chart1.height = 300;

chart1.setXMLFile('./data-1.xml');
chart1.write('chartDiv-1');

var chart2 = new AnyGantt();

chart2.width = "100%";
chart2.height = 300;

chart2.setXMLFile('./data-2.xml');
chart2.write('chartDiv-2');

var chart3 = new AnyGantt();

 chart3.width = "100%";
 chart3.height = "200";

 chart3.setXMLFile('./data-3.xml');
 chart3.write('chartDiv-3');
 }
//]]>
</script> 

下载AnyGantt最新试用版


标签:甘特图甘特图开发

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


为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP