8個CSS柱形圖表技術應用
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
[p]在web應用中有很多數(shù)據(jù)、圖表的表現(xiàn)方式，尤其在一些數(shù)據(jù)統(tǒng)計應用比較廣泛的網站后臺，可以直觀表現(xiàn)數(shù)據(jù)的圖表應用更是不可缺少的一個重要部分。摒棄圖片的實現(xiàn)方法，使用純碎的css樣式去表現(xiàn)data的統(tǒng)計變化，能更好的增加網站的可訪問性和管理的可操作性。[/p]
[p]現(xiàn)在，[b][/b][url=http://bbon.cn/]菠菜博[/url]為你介紹8個優(yōu)秀的css實現(xiàn)數(shù)據(jù)圖表的應用實例。[/p] 1，css線條圖表數(shù)據(jù) [p][align=center][img]http://farm4.static.flickr.com/3060/2874182689_a4d22ff63b.jpg?v=0[/img][/align][/p] 這個實例包含了三種圖形數(shù)據(jù)的實現(xiàn)方法。上面的basic bar graph實例中使用了一個 包含圖表，一個元素作為柱形的block，然后再使用百分比來控制柱形的寬度，這種方法中一個優(yōu)點就是使用了元素而不是段落
元素。另外兩個例子則是使用了定義列表dl和無序列表ul實現(xiàn)。 [p][url=http://images.sixrevisions.com/2008/09/20-05_pure_css_data.png]訪問實例[/url][/p] 6，css實現(xiàn)小塊錯綜區(qū)域圖表 [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實現(xiàn)線條圖表 [p][align=center][img]http://farm4.static.flickr.com/3103/2874187491_eccd3fbf1f.jpg?v=0[/img][/align][/p] [p]這個技巧用兩個橫向線條圖表實例來表述dl實現(xiàn)方法，每一個例子都是使用被賦予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樣式及背景圖片來將圖表延伸至適當?shù)膶挾?。[/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 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
