柱狀統(tǒng)計圖表的CSS實現(xiàn)

人們經(jīng)常需要在網(wǎng)頁上表現(xiàn)一些數(shù)據(jù)的統(tǒng)計圖表，通常情況下，是先用一些軟件畫出圖表，然后轉換成GIF或JPEG格式保存，再用img標記插入網(wǎng)頁中。這些圖片常常會占去網(wǎng)頁本身大小的很大比例，影響到網(wǎng)頁的傳輸速度。

常接觸統(tǒng)計圖表的人會注意到，很多圖表其實比較簡單，比如柱狀的統(tǒng)計圖，就是由簡單的矩形塊拼合。這自然會讓人們聯(lián)想到Html中的表格，所以，有不少這些類型的統(tǒng)計圖，直接用表格來實現(xiàn)，比如下面這張寬帶下載速度的測試結果圖：

（圖一：瀏覽器中的結果）（圖二：在編輯器中的樣子）

這種用Html代替圖片的做法，顯然要比任何圖片的方式都要少占用帶寬資源。不過，表格的方法對于如下這種統(tǒng)計圖就無能為力了：

聯(lián)想到CSS的Box（容器）模型和它提供的定位屬性，不難想象到，這樣的統(tǒng)計圖表應該可以使用CSS的方式來完成。

下面，我們就來介紹這種柱狀統(tǒng)計圖的CSS畫法。

以第13次CNNIC互聯(lián)網(wǎng)調查中的數(shù)據(jù)為例子，這次調查中，發(fā)現(xiàn)，66.1%的網(wǎng)民在家里上網(wǎng)，43.6%的網(wǎng)民在單位上網(wǎng)，其次是網(wǎng)吧、網(wǎng)校、網(wǎng)絡咖啡廳（20.3%），以及學校（18.4%）。

要畫出類似左邊的樣子，首先需要一個作為背景的框，然后是四個矩形的柱子，可以使用Div，代碼如下：

<div class="outline"> <div class="title">網(wǎng)民上網(wǎng)地方比例</div> <div class="home">&nbsp;</div> <div class="work">&nbsp;</div> <div class="biz">&nbsp;</div> <div class="school">&nbsp;</div> </div>

其中，加入&nbsp;這個空格，是因為作為數(shù)據(jù)塊來標示的這些Div本身不包含任何東西，要讓它具有容器的樣子，則需要隨便填寫什么。

接下來就要設定它們的CSS屬性。首先是作為背景的outline，代碼如下：

.outline { text-align: center; visibility: visible; margin-right: 5px; margin-left: 5px; position: relative; width: 150px; height: 196px; float: left; border-style: solid; border-width: 2px; border-color: #5f4a94 #e6e8ff #e6e8ff #5f4a94 }

其中，作為標題（title）的“網(wǎng)民上網(wǎng)地方比例”的設定為：

.title { font-size: 10pt; color: #000080; font-weight: bold; margin-top:6px; }

現(xiàn)在要來處理四個柱形了,首先是在家上網(wǎng)的人數(shù)比例（home）：

.home { background-color: #099; position: absolute; z-index: 1; bottom: 0; left: 20px; width: 30px; height: 132px; }

寬度和高度可以按照數(shù)據(jù)的比例關系要求來設定，這里為132px（不那么精確，只是表示一個大概）；“l(fā)eft:20px;”標示此柱形距離左邊的大小，通過它的設定，可以讓各個柱形彼此部分重疊或者相互分離；“bottom：0；”設定這個home的div黏著在底部；“z-index:1；”，設定它處在最下層。

其他幾個柱形也類似處理，結果：

最終的CSS代碼如下：

.home {

border-left:2px solid #00CCCC; border-right:2px solid #008080; border-top:2px solid #00CCCC; border-bottom:2px solid #008080; background-color: #009999; position: absolute; z-index: 1; bottom: 0; left: 20px; width: 30px; height: 132px }

.work { border-left:2px solid #ff80ff; border-right:2px solid #9a0053; border-top:2px solid #ff80ff; border-bottom:0px none #000; background-color: #e6007c; position: absolute; z-index: 2; bottom: 0; left: 35px; width: 30px; height: 86px;

}

.biz { border-left:2px solid #b3daff; border-right:2px solid #06f; border-top:2px solid #9cf; border-bottom:0px none #000; background-color: #39f; position: absolute; z-index: 3; bottom: 0; left: 50px; width: 30px; height: 42px;

}

.school { border-left:2px solid #ffec35; border-right:2px solid #9a8c00; border-top:2px solid #ffec35; border-bottom:0px none #000; background-color: #e6d000; position: absolute; z-index: 4; bottom: 0; left: 65px; width: 30px; height: 36px;

}

這個效果的生成，使用了網(wǎng)格背景和立體圓柱圖片?？梢允褂帽尘霸O定“background-image: url(圖片URL);”和背景圖片重復“background-repeat: repeat-y;”來達到效果。

代碼樣例：

.red { background-image: url(redbar.gif); background-repeat: repeat-y; visibility: visible; width: 32px; height: 60px; margin-top: 60px; float: right }

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

本文名稱：柱狀統(tǒng)計圖表的CSS實現(xiàn)
新聞來源：http://www.bm7419.com/news44/323144.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、App設計、商城網(wǎng)站、關鍵詞優(yōu)化、面包屑導航、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)