柱狀統計圖表的CSS實現

css|統計|圖表

人們經常需要在網頁上表現一些資料的統計圖表，通常情況下，是先用一些軟體畫出圖表，然後轉換成GIF或JPEG格式儲存，再用img標記插入網頁中。這些圖片常常會佔去網頁本身大小的很大比例，影響到網頁的傳輸速度。

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

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

這種用Html代替圖片的做法，顯然要比任何圖片的方式都要少佔用頻寬資源。不過，表格的方法對於如下這種統計圖就無能為力了：

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

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

以第13次CNNIC互連網調查中的資料為例子，這次調查中，發現，66.1%的網民在家裡上網，43.6%的網民在單位上網，其次是網吧、網校、網路咖啡廳（20.3%），以及學校（18.4%）。

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

　

<div class="outline">
<div class="title">網民上網地方比例</div>
<div class="home"> </div>
<div class="work"> </div>
<div class="biz"> </div>
<div class="school"> </div>
</div>

其中，加入 這個空格，是因為作為資料區塊來標示的這些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）的“網民上網地方比例”的設定為：

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

現在要來處理四個柱形了,首先是在家上網的人數比例（home）：

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

寬度和高度可以按照資料的比例關係要求來設定，這裡為132px（不那麼精確，只是表示一個大概）；“left: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;

}
　

圖例也是必須的，別忘了加上，這裡就省略。你可以點擊查看樣本頁面。

如何希望這個柱形更為漂亮，可以設定邊框，或者加上背景圖片來修飾，比如下面這個例子：

這個效果的產生，使用了網格背景和立體圓柱圖片。可以使用背景設定“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
      }