用CSS实现柱状图(Bar Graph)的方法(二)—基于表格元素的柱状图
作者:dudo 来源:dudo博客 时间:2008-05-26 13:23:00
在第一部分中,我们主要讲解了一下如何用列表元素来实现柱状图效果。其中需要特别注意的就是相对定位和绝对定位的的使用。在本节中,将来讨论一下使用表格元素<table />来创建一个柱状图的过程,这其中用到的关键技术还是相对定位和绝对定位的知识。
在开始之前,我们要先确定一下列表元素和表格元素到底有哪些不同。如果去除他们在浏览器的表现来说的话,他们基本上没有差别——都是有嵌套的(x)html标签而已。他们的不同主要是体现在在浏览器中的表现样式上,但是我们要实现的柱状图效果,无论采用了哪类方式实现,最终还是要具有差不多的外观。所以我们可以抛开细节不去管,不管<table />和<ul />有什么千差万别,我们只把它们看作是嵌套了两层或者三层的(x)html标签即可。既然这样,我们就可以用上一节的方式处理本节中的内容了:
1、建立如下结构的xhtml代码
<table id="graph">
<tr>
<td id="q1">100</td>
<td id="q2">190</td>
<td id="q3">140</td>
<td id="q4">70</td>
</tr>
</table>
和第一部分中的代码
<ul>
<li id="q1">100</li>
<li id="q2">190</li>
<li id="q3">140</li>
<li id="q4">70</li>
</ul>
相比,差别就在于我们使用的元素类型以及嵌套层次上,其他没有任何区别,如果我们忽略<table />标签从<tr />标签往下看的话,就完全一致了。
接下来我们用CSS样式化上面这段代码在浏览器的表现:
#graph tr {display:block;width:600px;border:1px solid #ccc;position:relative;height:200px;}
td {width:32px;position:absolute;bottom:0;text-align:center;font-weight:bold;color:#fff;}
#q1 {height:100px;left:10px;background:url(/file/UploadPic/20085/26/2008526132331285.gif) #fff no-repeat scroll 0 0;}
#q2 {height:190px;left:54px;background:url(/file/UploadPic/20085/26/2008526132331285.gif) #fff no-repeat scroll -34px 0;}
#q3 {height:140px;left:98px;background:url(/file/UploadPic/20085/26/2008526132331285.gif) #fff no-repeat scroll -68px 0;}
#q4 {height:70px;left:142px;background:url(/file/UploadPic/20085/26/2008526132331285.gif) #fff no-repeat scroll -102px 0;}
这段代码和前面的也没有太大区别,都是通过绝对定位来实现布局。
因此,我们可以运行一下下面的代码看最终效果:
和第一部分的纵向柱状结构完全一致。
2、横向的柱状图:
有了1中的演示,那么从纵向改为横向就更加简单的了,我们保持上面的xhtml代码结构不变,只需要变换一下CSS样式表就可以了(web标准的好处就是,只需要改变CSS就能改变页面的样子)。
#graph tr {display:block;width:600px;border:1px solid #ccc;position:relative;height:200px;}
td {height:32px;position:absolute;left:0;text-align:right;font-weight:bold;color:#fff;padding-right:13px;}
#q1 {width:100px;top:10px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -188px 0;}
#q2 {width:190px;top:54px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -98px -34px;}
#q3 {width:140px;top:98px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -148px -68px;}
#q4 {width:70px;top:142px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -218px -102px;}
替换这段代码即可实现横向的排列。
[小结]
在第一部分中,我们讨论了用列表元素实现状柱图的方法;在本部分中,我们又讨论了用表格元素<table />实现柱状图的方法;下一部分,我们将会用两个种方法来实现更加复杂的柱状图效果;最后,我们会综合比较两个方法的存在的问题,并选择其中一种较好的应用于我们的网站开发中……