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

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

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

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

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

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

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

要畫出類似左邊的樣子，首先需要一個(gè)作為背景的框，然后是四個(gè)矩形的柱子，可以使用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;這個(gè)空格，是因?yàn)樽鳛閿?shù)據(jù)塊來標(biāo)示的這些Div本身不包含任何東西，要讓它具有容器的樣子，則需要隨便填寫什么。

接下來就要設(shè)定它們的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 }

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

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

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

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

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

其他幾個(gè)柱形也類似處理，結(jié)果：

最終的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;

}

這個(gè)效果的生成，使用了網(wǎng)格背景和立體圓柱圖片。可以使用背景設(shè)定“background-image: url(圖片URL);”和背景圖片重復(fù)“background-repeat: repeat-y;”來達(dá)到效果。

代碼樣例：

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

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

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

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

廣告

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