统计图表之线状图

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

核心属性

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Java Servlet & JSP Cookbook

Bruce W. Perry / O'Reilly Media / 2003-12-1 / USD 49.99

With literally hundreds of examples and thousands of lines of code, the Java Servlet and JSP Cookbook yields tips and techniques that any Java web developer who uses JavaServer Pages or servlets will ......一起来看看《Java Servlet & JSP Cookbook》这本书的介绍吧!

码农工具

HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换

RGB HSV 互转工具