永利最大(官方)网站

继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最新试用版