统计图表之柱状图

栏目: Html · 发布时间: 6年前

核心属性

list-style-type: none 去除列表元素前面的小黑点

[class^='eje-'] 选择class属性以“eje-”开头的所有元素

border-top: 1px solid #fff 横向坐标轴

content: attr(data-ejeY) 显示HTML标签属性为data-ejeY的值

float: left 使X轴的文字水平排列

:before + background + height 不同高度不同颜色的柱状图

```
<div class="bar-chart-block block">
```
```
<h2 class='titular'>城市统计</h2>
```
```
<div class='grafico bar-chart'>
```
```
<ul class='eje-y'>
```
```
<li data-ejeY='60'></li>
```
```
<li data-ejeY='45'></li>
```
```
<li data-ejeY='30'></li>
```
```
<li data-ejeY='15'></li>
```
```
<li data-ejeY='0'></li>
```
```
</ul>
```
```
<ul class='eje-x'>
```
```
<li data-ejeX='37'><i>西安</i></li>
```
```
<li data-ejeX='56'><i>北京</i></li>
```
```
<li data-ejeX='25'><i>杭州</i></li>
```
```
<li data-ejeX='18'><i>海口</i></li>
```
```
<li data-ejeX='45'><i>上海</i></li>
```
```
<li data-ejeX='50'><i>广州</i></li>
```
```
<li data-ejeX='33'><i>成都</i></li>
```
```
</ul>
```
```
</div>
```
```
</div>
```

```
* {
```
```
box-sizing: border-box;
```
```
}
```
```
ul {
```
```
list-style-type: none;
```
```
margin: 0;
```
```
padding-left: 0;
```
```
}
```
```
h2 {
```
```
font-size: 17px;
```
```
}
```
```
h1, h2, p, a, span{
```
```
color: #fff;
```
```
}
```
```
.block {
```
```
margin: 25px auto;
```
```
background: #394264;
```
```
border-radius: 5px;
```
```
width: 300px;
```
```
height: 400px;
```
```
overflow: hidden;
```
```
}
```
```
.titular {
```
```
display: block;
```
```
line-height: 60px;
```
```
margin: 0;
```
```
text-align: center;
```
```
}
```
```
.grafico.bar-chart {
```
```
position: relative;
```
```
width: 100%;
```
```
height: 60%;
```
```
background: #3468AF;
```
```
padding: 0 1rem 2rem 1rem;
```
```
color: #fff;
```
```
font-size: 80%;
```
```
}
```
```
[class^='eje-'] {
```
```
position: absolute;
```
```
left: 0;
```
```
bottom: 0rem;
```
```
width: 100%;
```
```
height: 80%;
```
```
padding: 1rem 1rem 0 2rem;
```
```
}
```
```
.eje-x {
```
```
height: 2.5rem;
```
```
border: 1px solid blue;
```
```
}
```
```
.bar-chart [class^='eje-'] {
```
```
padding: 0 1rem 0 2rem;
```
```
bottom: 1rem;
```
```
}
```
```
.bar-chart .eje-y li {
```
```
height: 20%;
```
```
border-top: 1px solid #fff;
```
```
}
```
```
[data-ejeY]:before {
```
```
content: attr(data-ejeY);
```
```
display: inline-block;
```
```
position: relative;
```
```
left: -2.5rem;
```
```
top: -.5rem;
```
```
width: 2rem;
```
```
line-height: 0;
```
```
text-align: right;
```
```
}
```
```
.bar-chart .eje-x {
```
```
bottom: 0;
```
```
}
```
```
.bar-chart .eje-x li {
```
```
width: 14%;
```
```
position: relative;
```
```
float: left;
```
```
text-align: left;
```
```
}
```
```
.bar-chart .eje-x li i {
```
```
display: block;
```

transform: rotatez(-45deg) translatex(-1rem);

```
transform-origin: 30% 60%;
```
```
}
```
```
.bar-chart .eje-x li:before {
```
```
content: '';
```
```
position: absolute;
```
```
bottom: 1.9rem;
```
```
width: 70%;
```
```
right: 5%;
```

box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);

```
}
```

.bar-chart .eje-x li:nth-child(1):before {

```
background: #E64C65;
```
```
height: 570%;
```
```
}
```

.bar-chart .eje-x li:nth-child(2):before {

```
background: #11A8AB;
```
```
height: 900%;
```
```
}
```

.bar-chart .eje-x li:nth-child(3):before {

```
background: #FCB150;
```
```
height: 400%;
```
```
}
```

.bar-chart .eje-x li:nth-child(4):before {

```
background: #4FC4F6;
```
```
height: 290%;
```
```
}
```

.bar-chart .eje-x li:nth-child(5):before {

```
background: #FFED0D;
```
```
height: 720%;
```
```
}
```

.bar-chart .eje-x li:nth-child(6):before {

```
background: #F46FDA;
```
```
height: 820%;
```
```
}
```

.bar-chart .eje-x li:nth-child(7):before {

```
background: #15BFCC;
```
```
height: 520%;
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Realm of Racket

Matthias Felleisen、Conrad Barski M.D.、David Van Horn、Eight Students Northeastern University of / No Starch Press / 2013-6-25 / USD 39.95

Racket is the noble descendant of Lisp, a programming language renowned for its elegance and power. But while Racket retains the functional goodness of Lisp that makes programming purists drool, it wa......一起来看看《Realm of Racket》这本书的介绍吧!

码农工具

Markdown 在线编辑器

正则表达式在线测试

RGB HSV 转换

RGB HSV 互转工具