CSS implementation of columnar statistical chart

css| Statistics | charts

People often need to display some data on the Web page of statistical charts, usually, is to use some software to draw the chart, and then convert to GIF or JPEG format saved, and then insert the Web page with an IMG tag. These pictures often take up a large proportion of the size of the page itself, affecting the speed of the transmission of the page.

Frequent contact with statistical charts will notice that many charts are actually simpler, such as column-like statistics, which are pieced together by simple rectangular blocks. This naturally allows people to associate the table in HTML, so there are a lot of these types of statistics, directly using a table, such as the following broadband download speed test Results chart:

(Figure I: results in the browser) (Figure II: in the editor)

This use of HTML instead of pictures, obviously more than any picture of the way to occupy bandwidth resources. However, the method of the table is powerless in the following statistical charts:

Lenovo to the CSS box (container) model and the positioning of its properties, it is not difficult to imagine that such a statistical chart should be able to use the CSS method to complete.

Below, we will introduce the CSS representation of this column statistic graph.

In the 13th CNNIC Internet survey data as an example, the survey found that 66.1% of netizens at home online, 43.6% of netizens in the Internet, followed by internet cafes, school, internet cafes (20.3%), as well as schools (18.4%).

To draw a similar look to the left, first you need a box as a background, then four rectangular pillars, you can use the Div, the code is as follows:

£

<div class= "Outline" >
<div class= "title" > local proportion of Internet users online </div>
<div class= "Home" > </div>
<div class= "Work" > </div>
<div class= "Biz" > </div>
<div class= "School" > </div>
</div>

Among them, the addition of this space, because as the data block to mark the div itself does not contain anything, to let it have the appearance of the container, you need to fill out whatever.

The next step is to set their CSS properties. First, as the background of the outline, the code is as follows:

.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
}

Among them, as the title of the "Internet users online local proportion" set to:

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

Now it's time to deal with four columns, starting with the proportion of people who surf the Net (home):

.home {
Background-color: #099;
Position:absolute;
Z-index:1;
bottom:0;
left:20px;
width:30px;
height:132px;
}

Width and height can be set according to the proportional relation of the data, here is 132px (not so precise, just means one approximate); "left:20px;" Indicate the size of the column distance to the left, and by its setting, each column can be partially overlapped or separated from each other; "bottom:0;" Set the div at the bottom of the home, "Z-INDEX:1;" and set it to the lowest level.

Several other columns are similarly treated, and the results are as follows:

£

The final CSS code is as follows:

.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;

}
　

The legend is also necessary, do not forget to add, here is omitted. You can click to view the sample page.

How do you want this column to be more beautiful, you can set a border, or add a background image to decorate it, such as the following example:

£

This effect is generated using a grid background and a solid cylindrical picture. You can use the background setting "Background-image:url (picture URL);" And the background picture repeats "BACKGROUND-REPEAT:REPEAT-Y;" To achieve results.

£

£

Code Sample:

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