8个CSS柱形图表技术应用

admin

2010年4月27日 2:40 本文热度 8098

[p]在web应用中有很多数据、图表的表现方式，尤其在一些数据统计应用比较广泛的网站后台，可以直观表现数据的图表应用更是不可缺少的一个重要部分。摒弃图片的实现方法，使用纯碎的css样式去表现data的统计变化，能更好的增加网站的可访问性和管理的可操作性。[/p]
[p]现在，[b][/b][url=http://bbon.cn/]菠菜博[/url]为你介绍8个优秀的css实现数据图表的应用实例。[/p]
1，css线条图表数据
[p][align=center][img]http://farm4.static.flickr.com/3060/2874182689_a4d22ff63b.jpg?v=0[/img][/align][/p]
这个实例包含了三种图形数据的实现方法。上面的basic bar graph实例中使用了一个

包含图表，一个元素作为柱形的block，然后再使用百分比来控制柱形的宽度，这种方法中一个优点就是使用了元素而不是段落
元素。另外两个例子则是使用了定义列表dl和无序列表ul实现。
[p][url=http://apples-to-oranges.com/goodies/css-for-bar-graphs/]访问实例1[/url][/p]
[p][/p]
2，符合标准的可访问的可视化数据图表
[p][align=center][img]http://farm4.static.flickr.com/3260/2874182691_4e99063606.jpg?v=0[/img][/align][/p]
[p]作者[url=http://wilsonminer.com/]wilson miner[/url]研究数据图表的web accessible可访问性概念和标准兼容性技术，涉及优势、限制或是说两者取长补短的折中用法。这里有三个使用无序列表ul基本结构实现的实例。[/p]
[p][url=http://alistapart.com/d/accessibledata/example-barchart.html]访问实例1[/url] [url=http://alistapart.com/d/accessibledata/example-timeline.html]访问实例2[/url] [url=http://alistapart.com/d/accessibledata/example-sparklines.html]访问实例3[/url][/p]
3，css竖行图表
[p][align=center][img]http://farm4.static.flickr.com/3121/2874182695_47d2bc4d3a.jpg?v=0[/img][/align][/p]
[p]这个实例展示的是一个和[b]“css线条图表数据”[/b]类似的应用，使用无序列表ul实现竖行图表效果。[/p]
[p][url=http://meyerweb.com/eric/css/edge/bargraph/demo.html]访问实例[/url][/p]
4，使用百分比和背景图片创建图表
[p][align=center][img]http://farm4.static.flickr.com/3061/2874182697_5a3329ac98.jpg?v=0[/img][/align][/p]
[p]在这个例子中，你可以参考使用预先做好的背景图片完成适当的数据描述。但缺陷就是这个预先设计好的背景图片也会局限住其使用范围，如果要实现更多的不同效果，就要增加css和html文件大小，同时，你的http连接数也就会增加。[/p]
[p][url=http://maxdesign.com.au/presentation/percentage/]访问实例[/url][/p]
5，纯碎的css数据图表
[p][align=center][img]http://farm4.static.flickr.com/3261/2874182699_6b917eecf7.jpg?v=0[/img][/align][/p]
这个例子使用定义列表dl标记，然后在
定义列表中用元素来控制柱形区域的高度，用元素来显示图表遮罩区域的数值表示和在条形中间的绝对位置。
[p][url=http://images.sixrevisions.com/2008/09/20-05_pure_css_data.png]访问实例[/url][/p]
6，css实现小块错综区域图表
[p][align=center][img]http://farm4.static.flickr.com/3284/2874182701_fd892309b0.jpg?v=0[/img][/align][/p]
[p]至今还没遇到过类似的应用，但通过这个实例一定可以有效地提高你的css应用能力。[/p]
[p][url=http://jgc.org/blog/2005/12/css-absolute-positioning-scatter-plot.html]访问实例[/url][/p]
7，定义列表dl实现线条图表
[p][align=center][img]http://farm4.static.flickr.com/3103/2874187491_eccd3fbf1f.jpg?v=0[/img][/align][/p]
[p]这个技巧用两个横向线条图表实例来表述dl实现方法，每一个例子都是使用被赋予class的dl元素来控制图表的宽度百分比。[/p]
[p][url=http://cssplay.co.uk/menu/barchart.html]访问实例[/url][/p]
8，具备可访问行的线条图表
[p][align=center][img]http://farm4.static.flickr.com/3269/2874187497_a9f0f478b7.jpg?v=0[/img][/align][/p]
[p]该实例使用table来控制整天图表的结构，然后使用css样式及背景图片来将图表延伸至适当的宽度。[/p]
[p][url=http://standards-schmandards.com/exhibits/barchart/]访问实例[/url][/p]
[p]原文地址：[url=http://sixrevisions.com/css/css_techniques_charting_data/]8 css techniques for charting data[/url][/p]
[p][url=http://bbon.cn/2008/09/8%e4%b8%aacss%e6%9f%b1%e5%bd%a2%e5%9b%be%e8%a1%a8%e6%8a%80%e6%9c%af%e5%ba%94%e7%94%a8.html]http://bbon.cn/2008/09/8%e4%b8%aacss%e6%9f%b1%e5%bd%a2%e5%9b%be%e8%a1%a8%e6%8a%80%e6%9c%af%e5%ba%94%e7%94%a8.html[/url][/p]

该文章在 2010/4/27 2:40:20 编辑过

关键字查询

css

技术

应用

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。