繼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最新試用版