利用table,div实现动态柱状图表

想来很有趣，没想到利用table,div,css,javascript也可以实现一个动态的柱状图表。效果还不错，如下图。基本可以应付简单的需要，更重要的是可以做到柱形图的动态显示 呵呵

 

 

 

 

用一个table实现柱状图表,table结构如下:

<table>
	<caption>统计分析 (2007-02～2008-02)</caption>
	<thead></thead>
	<tbody>
		<tr style="height:300px;">
			<td class="chartcaption" style="vertical-align:top;border-right:1px solid #004477;border-bottom:none;">
				<p style="padding-top:10px;">消</p><p>费</p><p>金</p><p>额</p><p>(元)</p>
			</td>
			<td><p><span>12899</span></p><div id="firstcolumn" title="消费金额:12899 元" class="tdbg" style="height:80%;"></div></td>
			<td><p><span>9616</span></p><div title="消费金额:9616 元" class="tdbg" style="height:60%;"></div></td>
			....
			....
			....
			<td></td>
		</tr>
		<tr>
			<td style="border:none;"></td>
			<td style="border:none;">07/02</td>
			....
			....
			....
			<td class="chartcaption" style="border:none;">月份</td>
		</tr>
	</tbody>
</table>

 

代码比较简单，table也只有2行，x轴上下各是一行。设定一下tr或td的border属性就可以画出x轴，y轴。

柱形图就是在一个td里面有蓝色背景的div~,设定这个div的height属性就可以决定每个柱形图的高度了。

重要的还是要写一些css代码来控制这个table及其div元素的表现形式。

 

再说说动态实现部分吧，这个很爽啊。

其实要控制一个柱形的高度只要给这个div设定一个id，然后再修改这个div的height属性就行了。

如：

<td><p><span>12899</span></p><div id="firstcolumn" title="消费金额:12899 元" class="tdbg" style="height:80%;"></div></td>

 

为第一个柱形div标号 id = firstcolumn.

 

javascript代码修改height属性

<input type="button" value="change" onclick="change()"/>
<script language="javascript" src="include/prototype.js" type="text/javascript"></script>
<script>
var times = 0;
function change(){
	add(times);
	times = times+5;
}
function add(time){
	var firstColumn = $('firstcolumn');
	firstColumn.style.height = time+'%';
}
</script>

 

 

现在大功告成 点击change按钮就可改变第一个柱形的高度了～

实际应用中可以由ajax技术来控制柱形的变化。例如一个带ajax功能的函数每隔一段时间向后台请求一次，获得最新的数据信息之后再做柱形图高度的同步，还不错吧。