8個CSS柱形圖表技術(shù)應(yīng)用
當前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
在web應(yīng)用中有很多數(shù)據(jù)、圖表的表現(xiàn)方式，尤其在一些數(shù)據(jù)統(tǒng)計應(yīng)用比較廣泛的網(wǎng)站后臺，可以直觀表現(xiàn)數(shù)據(jù)的圖表應(yīng)用更是不可缺少的一個重要部分。摒棄圖片的實現(xiàn)方法，使用純碎的css樣式去表現(xiàn)data的統(tǒng)計變化，能更好的增加網(wǎng)站的可訪問性和管理的可操作性。 現(xiàn)在，菠菜博為你介紹8個優(yōu)秀的css實現(xiàn)數(shù)據(jù)圖表的應(yīng)用實例。 1，css線條圖表數(shù)據(jù) [align=center] 這個實例包含了三種圖形數(shù)據(jù)的實現(xiàn)方法。上面的basic bar graph實例中使用了一個 包含圖表，一個元素作為柱形的block，然后再使用百分比來控制柱形的寬度，這種方法中一個優(yōu)點就是使用了元素而不是段落
元素。另外兩個例子則是使用了定義列表dl和無序列表ul實現(xiàn)。 2，符合標準的可訪問的可視化數(shù)據(jù)圖表 [align=center] 作者wilson miner研究數(shù)據(jù)圖表的web accessible可訪問性概念和標準兼容性技術(shù)，涉及優(yōu)勢、限制或是說兩者取長補短的折中用法。這里有三個使用無序列表ul基本結(jié)構(gòu)實現(xiàn)的實例。 3，css豎行圖表 [align=center] 這個實例展示的是一個和“css線條圖表數(shù)據(jù)”類似的應(yīng)用，使用無序列表ul實現(xiàn)豎行圖表效果。 4，使用百分比和背景圖片創(chuàng)建圖表 [align=center] 在這個例子中，你可以參考使用預(yù)先做好的背景圖片完成適當?shù)臄?shù)據(jù)描述。但缺陷就是這個預(yù)先設(shè)計好的背景圖片也會局限住其使用范圍，如果要實現(xiàn)更多的不同效果，就要增加css和html文件大小，同時，你的http連接數(shù)也就會增加。 5，純碎的css數(shù)據(jù)圖表 [align=center] 這個例子使用定義列表dl標記，然后在 6，css實現(xiàn)小塊錯綜區(qū)域圖表 [align=center] 至今還沒遇到過類似的應(yīng)用，但通過這個實例一定可以有效地提高你的css應(yīng)用能力。 7，定義列表dl實現(xiàn)線條圖表 [align=center] 這個技巧用兩個橫向線條圖表實例來表述dl實現(xiàn)方法，每一個例子都是使用被賦予class的dl元素來控制圖表的寬度百分比。 8，具備可訪問行的線條圖表 [align=center] 該實例使用table來控制整天圖表的結(jié)構(gòu)，然后使用css樣式及背景圖片來將圖表延伸至適當?shù)膶挾取?/p> 原文地址：8 css techniques for charting data 該文章在 2010/4/27 2:40:20 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
[/align]
[/align]
[/align]
[/align]
[/align]
[/align]
[/align]
[/align]