8個(gè)CSS柱形圖表技術(shù)應(yīng)用
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
[p]在web應(yīng)用中有很多數(shù)據(jù)、圖表的表現(xiàn)方式，尤其在一些數(shù)據(jù)統(tǒng)計(jì)應(yīng)用比較廣泛的網(wǎng)站后臺(tái)，可以直觀表現(xiàn)數(shù)據(jù)的圖表應(yīng)用更是不可缺少的一個(gè)重要部分。摒棄圖片的實(shí)現(xiàn)方法，使用純碎的css樣式去表現(xiàn)data的統(tǒng)計(jì)變化，能更好的增加網(wǎng)站的可訪問(wèn)性和管理的可操作性。[/p]
[p]現(xiàn)在，[b][/b][url=http://bbon.cn/]菠菜博[/url]為你介紹8個(gè)優(yōu)秀的css實(shí)現(xiàn)數(shù)據(jù)圖表的應(yīng)用實(shí)例。[/p] 1，css線條圖表數(shù)據(jù) [p][align=center][img]http://farm4.static.flickr.com/3060/2874182689_a4d22ff63b.jpg?v=0[/img][/align][/p] 這個(gè)實(shí)例包含了三種圖形數(shù)據(jù)的實(shí)現(xiàn)方法。上面的basic bar graph實(shí)例中使用了一個(gè) 包含圖表，一個(gè)元素作為柱形的block，然后再使用百分比來(lái)控制柱形的寬度，這種方法中一個(gè)優(yōu)點(diǎn)就是使用了元素而不是段落
元素。另外兩個(gè)例子則是使用了定義列表dl和無(wú)序列表ul實(shí)現(xiàn)。 [p][url=http://images.sixrevisions.com/2008/09/20-05_pure_css_data.png]訪問(wèn)實(shí)例[/url][/p] 6，css實(shí)現(xiàn)小塊錯(cuò)綜區(qū)域圖表 [p][align=center][img]http://farm4.static.flickr.com/3284/2874182701_fd892309b0.jpg?v=0[/img][/align][/p] [p]至今還沒(méi)遇到過(guò)類似的應(yīng)用，但通過(guò)這個(gè)實(shí)例一定可以有效地提高你的css應(yīng)用能力。[/p] [p][url=http://jgc.org/blog/2005/12/css-absolute-positioning-scatter-plot.html]訪問(wèn)實(shí)例[/url][/p] 7，定義列表dl實(shí)現(xiàn)線條圖表 [p][align=center][img]http://farm4.static.flickr.com/3103/2874187491_eccd3fbf1f.jpg?v=0[/img][/align][/p] [p]這個(gè)技巧用兩個(gè)橫向線條圖表實(shí)例來(lái)表述dl實(shí)現(xiàn)方法，每一個(gè)例子都是使用被賦予class的dl元素來(lái)控制圖表的寬度百分比。[/p] [p][url=http://cssplay.co.uk/menu/barchart.html]訪問(wèn)實(shí)例[/url][/p] 8，具備可訪問(wèn)行的線條圖表 [p][align=center][img]http://farm4.static.flickr.com/3269/2874187497_a9f0f478b7.jpg?v=0[/img][/align][/p] [p]該實(shí)例使用table來(lái)控制整天圖表的結(jié)構(gòu)，然后使用css樣式及背景圖片來(lái)將圖表延伸至適當(dāng)?shù)膶挾取/p] [p][url=http://standards-schmandards.com/exhibits/barchart/]訪問(wèn)實(shí)例[/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 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
