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

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

 

 

 

 

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

			....
			....
			....
			
			....
			....
			....
			

	
统计分析 (2007-02～2008-02)
	

	

		

			

				
消
费
金
额
(元)
			
			
12899

			
9616

		
		

			

			
07/02
月份
		
	

 

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

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

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

 

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

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

如：

12899

 

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

 

javascript代码修改height属性

 

 

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

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