2011年5月31日星期二

8個CSS圖表數據制作實例

8個CSS圖表數據制作實例

http://www.inspirr.com

8個CSS圖表數據制作實例

有很多方法可以用來呈現數字， 我們最常用的就是制作一張靜態圖片。 但你也可以考慮CSS。使用CSS樣式化元素來實現數據圖表化。 可以使數據的控制更具靈活性。

下面。 你將看到8個CSS技巧。 教你如何使用CSS來制作漂亮、靈活的圖表。

1. CSS線條圖表數據

這個實例包含了三種圖形數據的實現方法。上面的Basic Bar Graph實例中使用了一個《div》包含圖表。 一個《strong》元素作為柱形的block. 然后再使用百分比來控制柱形的寬度。 這種方法中一個優點就是使用了《strong》元素而不是段落《p》元素。另外兩個例子則是使用了定義列表dl和無序列表ul實現。

CSS圖表制作技術

2. 符合標準的可訪問的可視化CSS數據圖表

作者Wilson Miner研究數據圖表的Web accessible可訪問性概念和標準兼容性技術。 涉及優勢、限制或是說兩者取長補短的折中用法。這里有三個使用無序列表ul基本結構實現的實例。

CSS圖表制作技術

3. CSS豎行圖表

CSS圖表制作技術

這個實例展示的是一個和“CSS線條圖表數據”類似的應用。 使用無序列表ul實現豎行圖表效果。

4. 使用百分比和背景圖片創建的CSS圖表

在這個例子中。 你可以參考使用預先做好的背景圖片完成適當的數據描述。但缺陷就是這個預先設計好的背景圖片也會局限住其使用范圍。 如果要實現更多的不同效果。 就要增加CSS和HTML文件大小。 同時。 你的HTTP連接數也就會增加。

CSS圖表制作技術

发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)