统计图表之线状图

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

核心属性

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解惑

(美)布洛克·加夫特 / 陈昊鹏 / 人民邮电出版社 / 2010-11-22 / 49.00元

你认为自己了解Java多少?你是个爱琢磨的代码侦探吗?你是否曾经花费数天时间去追踪一个由Java或其类库的陷阱和缺陷而导致的bug?你喜欢智力测验吗?本书正好适合你! Bloch和Gafter继承了Effective Java一书的传统，深入研究了Java编程语言及其核心类库的细微之处。本书特写了95个噩梦般的谜题，中间穿插着许多有趣的视觉幻象，寓教于乐。任何具备Java知识的人都可以理解这......一起来看看《Java解惑》这本书的介绍吧!

码农工具

统计图表之线状图

核心属性

Java解惑

JS 压缩/解压工具

SHA 加密

XML、JSON 在线转换