有很多方法可以用來呈現數字, 我們最常用的就是制作一張靜态圖檔. 但你也可以考慮CSS。使用CSS樣式化元素來實作資料圖表化. 可以使資料的控制更具靈活性。
下面. 你将看到8個CSS技巧. 教你如何使用CSS來制作漂亮、靈活的圖表。
這個執行個體包含了三種圖形資料的實作方法。上面的Basic Bar Graph執行個體中使用了一個<div>包含圖表. 一個<strong>元素作為柱形的block. 然後再使用百分比來控制柱形的寬度. 這種方法中一個優點就是使用了<strong>元素而不是段落<p>元素。另外兩個例子則是使用了定義清單dl和無序清單ul實作。
<a href="http://apples-to-oranges.com/goodies/css-for-bar-graphs/" target="_blank">檢視示範1</a>
這個執行個體展示的是一個和“CSS線條圖表資料”類似的應用. 使用無序清單ul實作豎行圖表效果。
<a href="http://meyerweb.com/eric/css/edge/bargraph/demo.html" target="_blank">檢視示範</a>
<a href="http://www.maxdesign.com.au/presentation/percentage/" target="_blank">檢視示範</a>
這個例子使用定義清單dl标記. 然後在<dd>定義清單中用<span>元素來控制柱形區域的高度. 用<em>元素來顯示圖表遮罩區域的數值表示和在條形中間的絕對位置。
<a href="http://images.cnblogs.com/cnblogs_com/hnyei/20-05_pure_css_data.jpg" target="_blank">檢視示範</a>
至今還沒遇到過類似的應用. 但通過這個執行個體一定可以有效地提高你的CSS應用能力。
<a href="http://www.jgc.org/blog/2005/12/css-absolute-positioning-scatter-plot.html" target="_blank">檢視示範</a>
這個技巧用兩個橫向線條圖表執行個體來表述dl實作方法. 每一個例子都是使用被賦予class的dl元素來控制圖表的寬度百分比。
<a href="http://www.cssplay.co.uk/menu/barchart.html" target="_blank">檢視示範</a>
該執行個體使用table來控制整天圖表的結構. 然後使用CSS樣式及背景圖檔來将圖表延伸至适當的寬度。
<a href="http://www.standards-schmandards.com/exhibits/barchart/" target="_blank">檢視示範</a>
本文轉自寒意部落格園部落格，原文連結：http://www.cnblogs.com/hnyei/archive/2011/09/27/2192782.html，如需轉載請自行聯系原作者