用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 />实现柱状图的方法；下一部分，我们将会用两个种方法来实现更加复杂的柱状图效果；最后，我们会综合比较两个方法的存在的问题，并选择其中一种较好的应用于我们的网站开发中……
0
投稿猜你喜欢
JavaScript 关于引用那点事
asp HTTP_X_FORWARDED_FOR和REMOTE_ADDR
JavaScript 组件之旅（四）：测试 JavaScript 组件
HTML5 Canvas 起步(1) - 基本概念
JS 中触发 A 标签的点击事件
mysql使用LOAD语句批量录入数据
怎样才能解决MySQL 5.0.16的乱码问题
Microsoft JET Database Engine 错误 '80040e21' 所有记录中均未找到搜索关键字
SQL Server数据库实用小技巧集合
怎样使用 SQL Server 数据库嵌套子查询
体验DW MX 2004 CSS新功能
正在研究XMLHTTP如何正确传送大于7F(127)的二进制数据
asp会员系统如何实现“忘记密码”
升级SQL Server 2008数据库引擎
ASP + XML + JavaScript 实现动态无限级联动菜单
交互设计实用指南系列(2) –可及
MySQL数据库之UPDATE更新语句精解
SQLServer 镜像功能完全实现
