位置：首页>> 网络编程>> 网页设计>> 用CSS实现柱状图（Bar Graph）的方法（二）—基于表格元素的柱状图

用CSS实现柱状图（Bar Graph）的方法（二）—基于表格元素的柱状图

作者：dudo　来源：dudo博客　发布时间：2008-05-26 13:23:00　

标签：柱状图,Bar,Graph,表格,css

在第一部分中，我们主要讲解了一下如何用列表元素来实现柱状图效果。其中需要特别注意的就是相对定位和绝对定位的的使用。在本节中，将来讨论一下使用表格元素<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;}

这段代码和前面的也没有太大区别，都是通过绝对定位来实现布局。

因此，我们可以运行一下下面的代码看最终效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <style type="text/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;} </style> </head> <body> <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> </body></html>

和第一部分的纵向柱状结构完全一致。

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 />实现柱状图的方法；下一部分，我们将会用两个种方法来实现更加复杂的柱状图效果；最后，我们会综合比较两个方法的存在的问题，并选择其中一种较好的应用于我们的网站开发中……

投稿

用CSS实现柱状图（Bar Graph）的方法（二）—基于表格元素的柱状图

猜你喜欢