统计图表之柱状图

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

核心属性

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%;
```
```
}
```

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

查看所有标签

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

码农书籍

Web开发敏捷之道

Sam Ruby、Dave Thomas、David Heineme Hansson / 慕尼黑Isar工作组、骆古道 / 机械工业出版社 / 2012-3-15 / 59.00元

本书第1版曾荣获Jolt大奖“最佳技术图书”奖。在前3版的内容架构基础上，第4版增加了关于Rails中新特性和最佳实践的内容。本书从逐步创建一个真正的应用程序开始，然后介绍Rails的内置功能。全书分为3部分，第一部分介绍Rails的安装、应用程序验证、Rails框架的体系结构，以及Ruby语言的知识；第二部分用迭代方式创建应用程序，然后依据敏捷开发模式搭建测试案例，最终用Capistrano完成......一起来看看《Web开发敏捷之道》这本书的介绍吧!

码农工具

图片转BASE64编码

在线图片转Base64编码工具

统计图表之柱状图

核心属性

Web开发敏捷之道

图片转BASE64编码

html转js在线工具