網(wǎng)頁制作Webjx文章簡介：在Web應(yīng)用中有很多數(shù)據(jù)、圖表的表現(xiàn)方式，尤其在一些數(shù)據(jù)統(tǒng)計(jì)應(yīng)用比較廣泛的網(wǎng)站后臺，可以直觀表現(xiàn)數(shù)據(jù)的圖表應(yīng)用更是不可缺少的一個重要部分。摒棄圖片的實(shí)現(xiàn)方法，使用純碎的CSS樣式去表現(xiàn)data的統(tǒng)計(jì)變化，能更好的增加網(wǎng)站的可訪問性和管理的可操作性。

在Web應(yīng)用中有很多數(shù)據(jù)、圖表的表現(xiàn)方式，尤其在一些數(shù)據(jù)統(tǒng)計(jì)應(yīng)用比較廣泛的網(wǎng)站后臺，可以直觀表現(xiàn)數(shù)據(jù)的圖表應(yīng)用更是不可缺少的一個重要部分。摒棄圖片的實(shí)現(xiàn)方法，使用純碎的CSS樣式去表現(xiàn)data的統(tǒng)計(jì)變化，能更好的增加網(wǎng)站的可訪問性和管理的可操作性。

現(xiàn)在，菠菜博為你介紹8個優(yōu)秀的CSS實(shí)現(xiàn)數(shù)據(jù)圖表的應(yīng)用實(shí)例。

這個實(shí)例包含了三種圖形數(shù)據(jù)的實(shí)現(xiàn)方法。上面的Basic Bar Graph實(shí)例中使用了一個<div>包含圖表，一個<strong>元素作為柱形的block，然后再使用百分比來控制柱形的寬度，這種方法中一個優(yōu)點(diǎn)就是使用了<strong>元素而不是段落<p>元素。另外兩個例子則是使用了定義列表dl和無序列表ul實(shí)現(xiàn)。

訪問實(shí)例1

作者Wilson Miner研究數(shù)據(jù)圖表的Web accessible可訪問性概念和標(biāo)準(zhǔn)兼容性技術(shù)，涉及優(yōu)勢、限制或是說兩者取長補(bǔ)短的折中用法。這里有三個使用無序列表ul基本結(jié)構(gòu)實(shí)現(xiàn)的實(shí)例。

這個實(shí)例展示的是一個和“CSS線條圖表數(shù)據(jù)”類似的應(yīng)用，使用無序列表ul實(shí)現(xiàn)豎行圖表效果。

訪問實(shí)例

在這個例子中，你可以參考使用預(yù)先做好的背景圖片完成適當(dāng)?shù)臄?shù)據(jù)描述。但缺陷就是這個預(yù)先設(shè)計(jì)好的背景圖片也會局限住其使用范圍，如果要實(shí)現(xiàn)更多的不同效果，就要增加CSS和HTML文件大小，同時，你的HTTP連接數(shù)也就會增加。

訪問實(shí)例

這個例子使用定義列表dl標(biāo)記，然后在<dd>定義列表中用<span>元素來控制柱形區(qū)域的高度，用<em>元素來顯示圖表遮罩區(qū)域的數(shù)值表示和在條形中間的絕對位置。

訪問實(shí)例

至今還沒遇到過類似的應(yīng)用，但通過這個實(shí)例一定可以有效地提高你的CSS應(yīng)用能力。

訪問實(shí)例

這個技巧用兩個橫向線條圖表實(shí)例來表述dl實(shí)現(xiàn)方法，每一個例子都是使用被賦予class的dl元素來控制圖表的寬度百分比。

訪問實(shí)例

該實(shí)例使用table來控制整天圖表的結(jié)構(gòu)，然后使用CSS樣式及背景圖片來將圖表延伸至適當(dāng)?shù)膶挾取?/p>

訪問實(shí)例

原文地址：8 CSS Techniques for Charting Data