用CSS实现柱状图(Bar Graph)的方法(一)—基于列表元素的柱状图
作者:dudo 来源:dudo博客 发布时间:2008-05-26 13:03:00
前言:
最近某个时间开始,特别留意了一下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;}
可以运行下面的代码查看一下效果:
另外,还可以通过增加背景等实现更加丰富的效果。
这里我们用的是纵向柱状图,当然也可以实现横向的表现方式。我们不需要改变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;}
运行下面的代码查看效果:
这样看来,利用列表元素实现柱状图效果还是比较方便,也是为什么现行Web中的bar graph都在使用CSS+UL。
后面的两篇文章我们将会探讨,利用table元素实现同样的效果,以极利用 dl dt dd来实现更加复杂的效果。
猜你喜欢
- 很早以前就说过,IE8的标准模式已经不再支持滤镜了,不过IE仍然留了一条后路,你可以在CSS中这样写滤镜:-ms-filter
- 看了不少朋友的个人网站,有一个小问题,似乎很多朋友都忽略了,那就是版权声明的写法。虽然那只是一小行字,不过作为设计师也好,作为个人的爱好也好
- 在IE进行文档链接时,如果遇到OLE支持的文档,IE会自动调用相应程序打开它,有时候这种功能并不是我们所需的,虽然我们可以提醒用户用鼠标右键
- 很多时候,设计师们都会通过各种渠道去了解用户的需求,然而从这些渠道反馈回来的信息大部分只是用户的期望并不是真正的用户需求,但是很多时候这些期
- '创建DOM对象set objDom=server.CreateObject("MicroSoft.XMLDom"
- 因AJAX接受数据时服务器默认是采用UTF-8的编码形式进行传送,所以在很多GB2312中文网页中应用AJAX回传数据经常会发生中文乱码。解
- 1引言实现磁带备份数据的功能有两方面的困难:首先,SQL Server(以下简称SQL)所提供的数据库的整体备份及恢复功能不能直接满足本系统
- 本程序有两文件test.asp 和tree.asp 还有一些图标文件 1。test.asp 调用类生成树 代码如下<%@
- 以下插件是我在项目中经常使用的jQuery插件,不见得是最好的,但是我目前接触到的jQuery插件中最适合我的。01. jQuery.Fle
- 在asp里通过以下两个函数实现javascript里的escape函数和unescape函数加密功能。在ajax post或get时内容存在
- 原型扩展:>> String.prototype :String对象原型扩展 --------------
- 一旦被黑客获取到webshell,黑客就知道了你的sqlserver管理员密码,如果sqlserver再没有经过安全设置那么黑客很容易就提权
- 现在我将清除页面缓存的一些方法总结如下:1、在Asp页面首部加入<% Response.Buffer = True
- 将Excel中的数据导入到Access中,前提是在Access中的表已经建好。 dim conn dim co
- 搜索引擎是通过分析网页源代码来分析页面文本信息的逻辑性,所以在编写网页代码的时候一定要尽可能使用合适的标签来体现文本表达的层次感,也即是让搜
- JQuery Solar System 是一个用JQuery写的东西,效果真是cool ! 没想到使用Javascript 也可以做到这种效
- 很多时候,我们都在说设计需要引导用户,尤其是在对初级用户的引导上,很大程度决定着产品能否快速聚拢用户的可能;但同样很多时候,用户并不需要引导
- 聚集索引,数据实际上是按顺序存储的,数据页就在索引页上。就好像参考手册将所有主题按顺序编排一样。一旦找到了所要搜索的数据,就完成了这次搜索,
- UNIX时间戳转换为日期用函数FROM_UNIXTIME()select FROM_UNIXTIME(1156219870);日期
- banner 设计会严重影响广告投放效果,在此建议相关设计人员,在设计FLASH BANNER的时候考虑到以下问题.1.