甘特图 横道图

本周工作需要编写工程进度横道图(又称甘特图)，自己写了半天，firefox下正常显示，IE下有问题，有不知道怎么解决，干脆在网上找了个插件，下面介绍给大家。

先来个效果图：

下面是源代码：

1、构建xml文件

<?xml version="1.0" encoding="utf-8"?>
<anygantt>
  <settings>
    <title align="Center" angle="0" position="Top">
      <text><![CDATA[清远抽水蓄能电站基建工程进度横道图]]></text>
      <padding all="5" />
    </title>
    <styles>
      <defaults>
        <summary>
          <task_style>
            <actual>
              <bar_style>
                <middle shape="Full">
                  <fill enabled="true" type="Solid" color="Red" opacity="0.8" />
                  <border enabled="true" type="Solid" color="DarkRed" thickness="1" />
                </middle>
              </bar_style>
            </actual>
          </task_style>
        </summary>
      </defaults>
    </styles>
    <navigation enabled="True" position="Top" size="30">
      <buttons collapse_expand_button="false" align="Far" />
      <text>清蓄建管局进度显示</text>
      <font face="宋体" size="12" bold="true" color="White" />
      <background>
        <fill type="Gradient">
          <gradient>
            <key color="#B0B0B0" position="0" />
            <key color="#A0A0A0" position="0.3" />
            <key color="#999999" position="0.5" />
            <key color="#A0A0A0" position="0.7" />
            <key color="#B0B0B0" position="1" />
          </gradient>
        </fill>
        <border type="Solid" color="#494949" />
      </background>
    </navigation>
    <background enabled="false" />
    <locale>
      <date_time_format week_starts_from_monday="True">
        <months>
          <names>1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月</names>
          <short_names>1,2,3,4,5,6,7,8,9,10,11,12</short_names>
        </months>
        <time am_string="AM" short_am_string="A" pm_string="PM" short_pm_string="P" />
        <week_days>
          <names>日,一,二,三,四,五,六</names>
          <short_names>日,一,二,三,四,五,六</short_names>
        </week_days>
        <format>
          <full>%yyyy.%MM.%dd.%HH.%mm.%ss</full>
          <date>%yyyy.%MM.%dd</date>
          <time>%HH.%mm.%ss</time>
        </format>
      </date_time_format>
    </locale>
  </settings>
  <datagrid>
    <style>
      <header>
        <cell>
          <font size="11" />
        </cell>
      </header>
    </style>
    <columns>
      <column width="30" cell_align="Center">
        <header>
          <text>序号</text>
        </header>
        <format>{%RowNum}</format>
      </column>
      <column width="120" cell_align="LeftLevelPadding">
        <header>
          <text>任务名称</text>
        </header>
        <format>{%Name}</format>
      </column>
      <column width="120" cell_align="LeftLevelPadding">
        <header>
          <text>开始时间</text>
        </header>
        <format>{%ActualStart}</format>
      </column>
      <column width="120" cell_align="LeftLevelPadding">
        <header>
          <text>结束时间</text>
        </header>
        <format>{%ActualEnd}</format>
      </column>
      <column width="120" cell_align="LeftLevelPadding">
        <header>
          <text>完成进度</text>
        </header>
        <format>{%Complete}</format>
      </column>
    </columns>
  </datagrid>
  <project_chart>
    <tasks>
      <task id="1" name="上水库工程" parent="" progress="66" actual_start="2010-01-22" actual_end="2012-08-30" />
      <task id="1.1" name="上库主坝" parent="1" progress="100" actual_start="2010-05-16" actual_end="2012-08-30" />
      <task id="1.2" name="上库1#副坝" parent="1" progress="100" actual_start="2010-07-28" actual_end="2012-08-30" />
      <task id="1.3" name="上库2#副坝" parent="1" progress="100" actual_start="2011-04-05" actual_end="2012-08-30" />
      <task id="1.4" name="上库3#副坝" parent="1" progress="" actual_start="2010-01-22" actual_end="2011-02-12" />
      <task id="1.5" name="上库4#副坝" parent="1" progress="" actual_start="2010-06-15" actual_end="2011-06-29" />
      <task id="1.6" name="上库5#副坝" parent="1" progress="100" actual_start="2011-08-13" actual_end="2012-08-30" />
      <task id="1.7" name="上库6#副坝" parent="1" progress="100" actual_start="2011-04-15" actual_end="2012-08-30" />
      <task id="1.8" name="上库库周防渗及库岸处理" parent="1" progress="100" actual_start="2011-09-12" actual_end="2012-08-30" />
      <task id="1.9" name="上库下闸蓄水" parent="1" progress="" actual_start="2012-12-31" actual_end="2012-09-20" />
      <task id="2" name="下水库工程" parent="" progress="50" actual_start="2010-03-02" actual_end="2013-06-30" />
      <task id="2.1" name="施工导流、泄洪洞工程" parent="2" progress="95" actual_start="2010-03-02" actual_end="2013-02-28" />
      <task id="2.2" name="下库大坝" parent="2" progress="55" actual_start="2010-10-18" actual_end="2013-06-30" />
      <task id="2.3" name="下库下闸蓄水" parent="2" progress="" actual_start="2013-10-02" actual_end="2012-09-20" />
      <task id="3" name="引水系统工程" parent="" progress="64" actual_start="2009-09-02" actual_end="2013-12-31" />
      <task id="3.1" name="上库进出水口、上平洞、闸门井" parent="3" progress="100" actual_start="2009-09-20" actual_end="2012-08-01" />
      <task id="3.2" name="1#施工支洞及竖井（54m和228m）" parent="3" progress="90" actual_start="2010-11-22" actual_end="2013-04-30" />
      <task id="3.3" name="2#施工支洞及封堵、中平洞（2#施工支洞958m，中平洞上游576m和下游80m）" parent="3" progress="55" actual_start="2009-09-02" actual_end="2013-12-31" />
      <task id="3.4" name="斜井及下平洞（斜井359m和下平洞286m）" parent="3" progress="60" actual_start="2011-05-15" actual_end="2013-06-28" />
      <task id="3.5" name="高压岔道及高压钢支管（3#、6#施工支洞封堵）" parent="3" progress="80" actual_start="2011-06-05" actual_end="2012-12-20" />
      <task id="3.6" name="引水水道具备充水条件" parent="3" progress="" actual_start="2014-04-01" actual_end="2012-09-20" />
      <task id="4" name="厂房系统工程" parent="" progress="94" actual_start="2009-09-01" actual_end="2013-08-01" />
      <task id="4.1" name="3~6#施工支洞" parent="4" progress="100" actual_start="2010-11-10" actual_end="2011-05-10" />
      <task id="4.2" name="主副厂房及安装间开挖" parent="4" progress="100" actual_start="2010-06-03" actual_end="2012-04-06" />
      <task id="4.3" name="主变洞" parent="4" progress="75" actual_start="2010-11-01" actual_end="2013-08-01" />
      <task id="4.5" name="母线洞" parent="4" progress="100" actual_start="2011-04-24" actual_end="2012-09-30" />
      <task id="4.6" name="排水廊道" parent="4" progress="100" actual_start="2010-07-18" actual_end="2012-12-31" />
      <task id="4.7" name="尾闸室及尾闸运输洞" parent="4" progress="100" actual_start="2011-02-14" actual_end="2012-04-30" />
      <task id="4.8" name="高压电缆洞及开关站（洞长494m）" parent="4" progress="80" actual_start="2010-03-16" actual_end="2013-06-05" />
      <task id="4.9" name="自流排水洞（主洞5610m和支洞740m）" parent="4" progress="100" actual_start="2009-09-01" actual_end="2012-12-31" />
      <task id="5" name="尾水系统工程" parent="" progress="55" actual_start="2009-12-22" actual_end="2013-11-20" />
      <task id="5.1" name="尾水岔管及支管" parent="5" progress="75" actual_start="2011-05-14" actual_end="2013-08-27" />
      <task id="5.2" name="尾水隧洞及4#施工支洞封堵（洞长851m）" parent="5" progress="70" actual_start="2010-11-15" actual_end="2013-11-20" />
      <task id="5.3" name="尾水调压井（井深137m）" parent="5" progress="60" actual_start="2010-12-15" actual_end="2013-08-30" />
      <task id="5.4" name="下库进出水口及闸门井" parent="5" progress="70" actual_start="2009-12-22" actual_end="2013-05-30" />
      <task id="5.5" name="尾水水道具备充水条件" parent="5" progress="" actual_start="2014-02-01" actual_end="2012-09-20" />
      <task id="6" name="机电安装工程" parent="" progress="10" actual_start="2011-11-29" actual_end="2015-09-30" />
      <task id="6.1" name="厂房桥机安装（30T桥机）" parent="6" progress="100" actual_start="2011-11-29" actual_end="2012-03-25" />
      <task id="6.2" name="#1机组尾水肘管安装开始（机电安装工程正式开工）" parent="6" progress="" actual_start="2012-04-06" actual_end="2012-09-20" />
      <task id="6.3" name="1#机组安装至发电" parent="6" progress="" actual_start="2012-04-06" actual_end="2014-12-31" />
      <task id="6.4" name="2#机组安装至发电" parent="6" progress="" actual_start="2012-05-20" actual_end="2015-03-31" />
      <task id="6.5" name="3#机组安装至发电" parent="6" progress="" actual_start="2012-07-20" actual_end="2015-06-30" />
      <task id="6.6" name="4#机组安装至发电" parent="6" progress="" actual_start="2012-09-01" actual_end="2015-09-30" />
      <task id="6.7" name="接入系统充电时间" parent="6" progress="" actual_start="2013-12-31" actual_end="2012-09-20" />
      <task id="6.8" name="主变安装调试" parent="6" progress="" actual_start="2012-09-20" actual_end="2012-09-20" />
      <task id="6.9" name="高压电缆安装调试" parent="6" progress="" actual_start="2012-09-20" actual_end="2012-09-20" />
      <task id="6.10" name="GIS安装调试" parent="6" progress="" actual_start="2012-09-20" actual_end="2012-09-20" />
    </tasks>
  </project_chart>
</anygantt>

2、引用插件

<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" language="JavaScript" src="./js/AnyGantt.js"></script>
		<title>Simple Gantt Chart435435</title>
        <style type="text/css">
        html, body { padding: 0; margin: 0; }
        </style>
	</head>
	
	<body>
		<script type="text/javascript" language="JavaScript">
		//<![CDATA[
			var chartSample = new AnyGantt('./swf/AnyGantt.swf');
			chartSample.width = '100%';
			chartSample.height = '100%';
			chartSample.setXMLFile('anygantt.xml');//http://anychart.com/products/anygantt/online-demos/msproject-viewer/data.xml?&xmlcalldate=1344236433800
			chartSample.write();
			//]]>
		</script>
	</body>
</html>

3、插件结构

4、插件下载

    本想把插件上传上来，但好像不行哦！

有需要的给我发邮件哦

联系方式:wdfscp@126.com