利用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功能的函数每隔一段时间向后台请求一次,获得最新的数据信息之后再做柱形图高度的同步,还不错吧。

 

 

你可能感兴趣的:(利用table,div实现动态柱状图表)