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

动态地显示统计图表--横式，用控制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> <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> <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> <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> <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> <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> <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> <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>