动态地显示统计图表--横式

动态地显示统计图表--横式，用控制SPAN宽度的方式来实现<br/>
Gu Laicheng, 2009.3.19<br/>

<table cellspacing="2" cellpadding="1" BGCOLOR="#DDDDDD" width="300" id="P2" border=0>
<col width="30%">
<col width="70%">

<tr><td align=right></td><td align=left><span id=BAR2 style="display:inline;width:0;height:20;background:#AAA;"></span>&nbsp;<span ID=Dig></span></td></tr>
<tr><td align=right></td><td align=left><span id=BAR2 style="display:inline;width:0;height:20;background:#AAA;"></span>&nbsp;<span ID=Dig></span></td></tr>
<tr><td align=right></td><td align=left><span id=BAR2 style="display:inline;width:0;height:20;background:#AAA;"></span>&nbsp;<span ID=Dig></span></td></tr>
<tr><td align=right></td><td align=left><span id=BAR2 style="display:inline;width:0;height:20;background:#AAA;"></span>&nbsp;<span ID=Dig></span></td></tr>
<tr><td align=right></td><td align=left><span id=BAR2 style="display:inline;width:0;height:20;background:#AAA;"></span>&nbsp;<span ID=Dig></span></td></tr>
<tr><td align=right></td><td align=left><span id=BAR2 style="display:inline;width:0;height:20;background:#AAA;"></span>&nbsp;<span ID=Dig></span></td></tr>
<tr><td align=right></td><td align=left><span id=BAR2 style="display:inline;width:0;height:20;background:#AAA;"></span>&nbsp;<span ID=Dig></span></td></tr>

</table>

<script language=javascript>
var time;
var h=0,step=0.5,intval=20;
// h:  立柱的高度
// step: 步距
// intval: 时间间距

var w2 = [
["一月份",12],
["二月份",34],
["三月份",78],
["四月份",23],
["五月份",45],
["六月份",89],
["七月份",55]];

// 显示底层的月份:
 for (var i=0;i<w2.length ;i++ )
 {
  P2.rows[i].cells[0].innerText = ""+w2[i][0];
 }

time = window.setInterval("enhance()", intval)

function enhance()
{
 h=h+step;
 for (var i=0;i<w2.length ;i++ )
 {
  Dig[i].innerText = ""+w2[i][1];
  if (h >= w2[i][1])
  {
   BAR2[i].style.width = w2[i][1] + "";
   continue;
  } else
  {
   BAR2[i].style.width = h + "";
  }
 }
 if (h>100)
 {
  window.clearInterval(time)
 }
}

</script>