统计图表之线状图

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

核心属性

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

left: 100%; bottom: 0 使每一条线段紧接着前一条线段显示

width + transform: rotate( ) 设置线段的长度的角度

content: '+' attr(data-valor) '%' 显示HTML标签属性为data-valor的值

```
<div class="line-chart-block block">
```
```
<div class="line-chart">
```
```
<div class='grafico'>
```
```
<ul class='eje-y'>
```
```
<li data-ejeY='30'></li>
```
```
<li data-ejeY='20'></li>
```
```
<li data-ejeY='10'></li>
```
```
<li data-ejeY='0'></li>
```
```
</ul>
```
```
<ul class='eje-x'>
```
```
<li>四月</li>
```
```
<li>五月</li>
```
```
<li>六月</li>
```
```
</ul>
```
```
<span data-valor='25'>
```
```
<span data-valor='8'>
```
```
<span data-valor='13'>
```
```
<span data-valor='5'>
```
```
<span data-valor='23'>
```
```
<span data-valor='12'>
```
```
<span data-valor='15'></span>
```
```
</span>
```
```
</span>
```
```
</span>
```
```
</span>
```
```
</span>
```
```
</span>
```
```
</div>
```
```
</div>
```

<ul class="time-lenght horizontal-list">

<li><a class="time-lenght-btn" href="#14">周线</a></li>

<li><a class="time-lenght-btn" href="#15">月线</a></li>

<li><a class="time-lenght-btn" href="#16">年线</a></li>

```
</ul>
```
```
<ul class="month-data clear">
```
```
<li>
```

<p>四月<span class="scnd-font-color"> 2019</span></p>

<p><span class="entypo-plus increment"> </span>21<sup>%</sup></p>

```
</li>
```
```
<li>
```

<p>五月<span class="scnd-font-color"> 2019</span></p>

<p><span class="entypo-plus increment"> </span>48<sup>%</sup></p>

```
</li>
```
```
<li>
```

<p>六月<span class="scnd-font-color"> 2019</span></p>

<p><span class="entypo-plus increment"> </span>35<sup>%</sup></p>

```
</li>
```
```
</ul>
```
```
</div>
```

```
* {
```
```
box-sizing: border-box;
```
```
}
```
```
a {
```
```
text-decoration: none;
```
```
font-size: 15px;
```
```
}
```
```
h1, h2, p, a, span{
```
```
color: #fff;
```
```
}
```
```
.scnd-font-color {
```
```
color: #9099b7;
```
```
}
```
```
.block {
```
```
width: 300px;
```
```
margin: 25px auto;
```
```
background: #394264;
```
```
border-radius: 5px;
```
```
overflow: hidden;
```
```
}
```
```
ul {
```
```
list-style-type: none;
```
```
margin: 0;
```
```
padding-left: 0;
```
```
}
```
```
.line-chart {
```
```
height: 200px;
```
```
background: #11a8ab;
```
```
}
```
```
.horizontal-list {
```
```
margin: 0;
```
```
padding: 0;
```
```
list-style-type: none;
```
```
}
```
```
.horizontal-list li {
```
```
float: left;
```
```
}
```
```
.time-lenght {
```
```
padding-top: 22px;
```
```
padding-left: 38px;
```
```
overflow: hidden;
```
```
}
```
```
.time-lenght-btn {
```
```
display: block;
```
```
width: 70px;
```
```
line-height: 32px;
```
```
margin-right: 5px;
```
```
background: #50597b;
```
```
border-radius: 5px;
```
```
font-size: 14px;
```
```
text-align: center;
```
```
transition: background .3s;
```
```
}
```
```
.time-lenght-btn:hover {
```
```
text-decoration: none;
```
```
background: #e64c65;
```
```
}
```
```
.grafico {
```
```
position: relative;
```
```
width: 100%;
```
```
height: 100%;
```
```
padding: 2rem 1rem 1rem;
```
```
color: #fff;
```
```
font-size: 80%;
```
```
}
```
```
.grafico span {
```
```
display: block;
```
```
position: absolute;
```
```
bottom: 3rem;
```
```
left: 2rem;
```
```
height: 0;
```
```
border-top: 2px solid;
```
```
transform-origin: left center;
```
```
}
```
```
.grafico span > span {
```
```
left: 100%; bottom: 0;
```
```
}
```

[data-valor='25'] {width: 75px; transform: rotate(-45deg);}

[data-valor='8'] {width: 24px; transform: rotate(65deg);}

[data-valor='13'] {width: 39px; transform: rotate(-45deg);}

[data-valor='5'] {width: 15px; transform: rotate(50deg);}

[data-valor='23'] {width: 69px; transform: rotate(-70deg);}

[data-valor='12'] {width: 36px; transform: rotate(75deg);}

[data-valor='15'] {width: 45px; transform: rotate(-45deg);}

```
[data-valor]:before {
```
```
content: '';
```
```
position: absolute;
```
```
right: -4px;
```
```
bottom: -3px;
```
```
padding: 4px;
```
```
background: #fff;
```
```
border-radius: 50%;
```
```
}
```
```
[data-valor='23']:after {
```
```
content: '+' attr(data-valor) '%';
```
```
position: absolute;
```
```
right: -2.7rem;
```
```
top: -1.7rem;
```
```
padding: .3rem .5rem;
```
```
background: #50597B;
```
```
border-radius: .5rem;
```
```
transform: rotate(45deg);
```
```
}
```
```
[class^='eje-'] {
```
```
position: absolute;
```
```
left: 0;
```
```
bottom: 0rem;
```
```
width: 100%;
```
```
padding: 1rem 1rem 0 2rem;
```
```
height: 80%;
```
```
}
```
```
.eje-x {
```
```
height: 2.5rem;
```
```
}
```
```
.eje-y li {
```
```
height: 25%;
```
```
border-top: 1px solid #777;
```
```
}
```
```
[data-ejeY]:before {
```
```
content: attr(data-ejeY);
```
```
position: relative;
```
```
display: inline-block;
```
```
left: -2.5rem;
```
```
top: -.5rem;
```
```
width: 2rem;
```
```
text-align: right;
```
```
line-height: 0;
```
```
}
```
```
.eje-x li {
```
```
width: 33%;
```
```
float: left;
```
```
text-align: center;
```
```
}
```
```
.month-data {
```
```
padding-top: 28px;
```
```
}
```
```
.month-data p {
```
```
display: inline-block;
```
```
margin: 0;
```
```
padding: 0 25px 15px;
```
```
font-size: 16px;
```
```
}
```
```
.month-data p:last-child {
```
```
padding: 0 25px;
```
```
float: right;
```
```
font-size: 15px;
```
```
}
```
```
.increment {
```
```
color: #e64c65;
```
```
}
```

以上所述就是小编给大家介绍的《统计图表之线状图》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

SQL必知必会

福达 (Ben Forta) / 钟鸣、刘晓霞 / 人民邮电出版社 / 2013-5-1 / 29.00元

SQL语法简洁，使用方式灵活，功能强大，已经成为当今程序员不可或缺的技能。本书是深受世界各地读者欢迎的SQL经典畅销书，内容丰富，文字简洁明快，针对Oracle、SQL Server、MySQL、DB2、PostgreSQL、SQLite等各种主流数据库提供了大量简明的实例。与其他同类图书不同，它没有过多阐述数据库基础理论，而是专门针对一线软件开发人员，直接从SQL SELECT开始，讲述......一起来看看《SQL必知必会》这本书的介绍吧!

码农工具

统计图表之线状图

核心属性

SQL必知必会

RGB转16进制工具

在线进制转换器

HSV CMYK 转换工具