8个CSS柱形图表技术应用
当前位置:知识管理交流
→『 技术文档交流 』
[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标记,然后在 该文章在 2010/4/27 2:40:20 编辑过 |
关键字查询
相关文章
正在查询... |