前言：
最近某个时间开始，特别留意了一下Web标准中柱状图，也就是英文中的bar graph的实现。虽然实现方法各异，效果不尽相同，但是总体来说，按照使用的xhtml元素来分大概可以分为两类：无序列表（包括ul,dd等）和表格（主要是table）。有文及以后几篇有关柱状图系列的文章文章将着重讲解他们的实现方法和他们存在优缺点的比较。本文主要
所谓的柱状图是统计学中经常用到的直观表达数据的一种方法，他是用块级元素的长短来表现数据的大小。从分布方式来说，他大体可以分为纵向分布和横向分布。本文及后面的几篇文章将从Web技术的角度来考虑他们的实现问题。不过，在开始本部分的讨论之前，大家应该先对绝对定位和相对定位的知识有一定的了解，想更深入的了解，可以Google一下。
我打算花3到4个篇幅来综合讲述。在第一部分中，我们讨论了用列表元素实现状柱图的方法；在第二部分中，我们又讨论了用表格元素<table />实现柱状图的方法；第三部分，我们将会用两个种方法来实现更加复杂的柱状图效果；最后，我们会综合比较两个方法的存在的问题，并选择其中一种较好的应用于我们的网站开发中……
一、使用列表元素和CSS实现柱状图效果
列表元素包括无序列表ul和有充列表ol以及dd等。但是他们在表现上都有着相似的外观，因此使用CSS的技巧上也大体相似。
1、使用无序列表<ul />
我们的xhtml代码如下
以下为代码的内容：
- <ul>
- <li id="q1">100</li>
- <li id="q2">190</li>
- <li id="q3">140</li>
- <li id="q4">70</li>
- </ul>
|
怎么样，很简单吧！我们确定了xhtml代码之后，就可以用CSS来进行样式表现。这里最关键的就是绝对定位和相对定位的使用。我们对最<li />使用绝对定位absolute，但是如果要使绝对定位起作用就必须对它的父元素使用相对定位relative。绝对定位的好处就是可以直接定位元素的位置，因此在布局上相对方便一点。
下面我们来看看CSS代码的写法：
以下为代码的内容：
- ul {list-style-type:none;display:block;border:1px solid #999;width:400px;height:200px;
- position:relative;}
- ul li {position:absolute;width:34px;bottom:0;color:#fff;font-weight:bold;text-align:center;}
- #q1 {left:10px;height:100px;background:url(bars_v.gif) #fff no-repeat scroll 0 0;}
- #q2 {left:59px;height:190px;background:url(bars_v.gif) #fff no-repeat scroll -34px 0;}
- #q3 {left:108px;height:140px;background:url(bars_v.gif) #fff no-repeat scroll -68px 0;}
- #q4 {left:160px;height:70px;background:url(bars_v.gif) #fff no-repeat scroll -102px 0;}
|
可以运行下面的代码查看一下效果：
|
以下为代码的内容：
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
ul {list-style-type:none;display:block;border:1px solid #999;width:400px;height:200px;position:relative;}
ul li {position:absolute;width:34px;bottom:0;color:#fff;font-weight:bold;text-align:center;}
#q1 {left:10px;height:100px;background:url(attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll 0 0;}
#q2 {left:59px;height:190px;background:url(attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll -34px 0;}
#q3 {left:108px;height:140px;background:url(attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll -68px 0;}
#q4 {left:160px;height:70px;background:url(attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll -102px 0;}
</style>
</head>
<body>
<ul>
<li id="q1">100</li>
<li id="q2">190</li>
<li id="q3">140</li>
<li id="q4">70</li>
</ul>
</body>
</html> |
另外，还可以通过增加背景等实现更加丰富的效果。
这里我们用的是纵向柱状图，当然也可以实现横向的表现方式。我们不需要改变xhtml代码，可需要简单修改CSS代码即可实现横向效果。
横向显示的时候就不需要用到绝对定位和相对定位，只需要各元素的默认属性就可以了。另外还要注意一点就是为了消除<ul />的边距，我们需要设margin:0;padding:0。这是因为在不同的浏览器的差异需要两个同时设置为0.
横向排列时更加简单：
|
以下为代码的内容：
- ul {list-style-type:none;display:block;border:1px solid #ccc;width:400px;height:200px;padding:0;margin:0;}
- ul li {color:#fff;font-weight:bold;text-align:center;height:34px;display:block;margin-top:10px;}
- #q1 {width:100px;background:url(bars_h.gif) #fff no-repeat scroll -190px 0;}
- #q2 {width:190px;background:url(bars_h.gif) #fff no-repeat scroll -100px -34px;}
- #q3 {width:140px;background:url(bars_h.gif) #fff no-repeat scroll -150px -68px;}
- #q4 {width:70px;background:url(bars_h.gif) #fff no-repeat scroll -220px -102px;}
|
运行下面的代码查看效果：
|
以下为代码的内容：
<html>
<head>
<title> new document </title>
<style type="text/css">
ul {list-style-type:none;display:block;border:1px solid #ccc;width:400px;height:200px;
padding:0;margin:0;}
ul li {color:#fff;font-weight:bold;text-align:center;height:34px;display:block;margin-top:10px;}
#q1 {width:100px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -190px 0;}
#q2 {width:190px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -100px -34px;}
#q3 {width:140px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -150px -68px;}
#q4 {width:70px;background:url(attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -220px -102px;}
</style>
</head>
<body>
<ul>
<li id="q1">100</li>
<li id="q2">190</li>
<li id="q3">140</li>
<li id="q4">70</li>
</ul>
</body>
</html> |
这样看来，利用列表元素实现柱状图效果还是比较方便，也是为什么现行Web中的bar graph都在使用CSS+UL。
后面的两篇文章我们将会探讨，利用table元素实现同样的效果，以极利用 dl dt dd来实现更加复杂的效果。
参考：
Eric's Archived Thought
投递文章
投稿指南
RSS订阅
收 藏
推 荐