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

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

<table cellspacing="2" cellpadding="1" bgcolor="#FFFFFF" width="200" id="P2" border=0>
<tr align=center height=150>
 <td valign=bottom><span ID=Dig>1</span><br><hr id=BAR2 style="width:28;height:0;color:#F00;"></td>
 <td valign=bottom><span ID=Dig>2</span><br><hr id=BAR2 style="width:28;height:0;color:#F00;"></td>
 <td valign=bottom><span ID=Dig>3</span><br><hr id=BAR2 style="width:28;height:0;color:#F00;"></td>
 <td valign=bottom><span ID=Dig>4</span><br><hr id=BAR2 style="width:28;height:0;color:#F00;"></td>
 <td valign=bottom><span ID=Dig>5</span><br><hr id=BAR2 style="width:28;height:0;color:#F00;"></td>
 <td valign=bottom><span ID=Dig>6</span><br><hr id=BAR2 style="width:28;height:0;color:#F00;"></td>
 <td valign=bottom><span ID=Dig>7</span><br><hr id=BAR2 style="width:28;height:0;color:#F00;"></td>
</tr>

<tr align=center>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>

</table>
</center>
<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[1].cells[i].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.height = w2[i][1] + "";
   continue;
  } else
  {
   BAR2[i].style.height = h + "";
  }
 }
 if (h>100)
 {
  window.clearInterval(time)
 }
}

</script>