柱狀統計圖表的CSS實現

來源:互聯網
上載者:User
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
      }



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。