统计图表之线状图

栏目: 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;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

Google's PageRank and Beyond

Amy N. Langville、Carl D. Meyer / Princeton University Press / 2006-7-23 / USD 57.50

Why doesn't your home page appear on the first page of search results, even when you query your own name? How do other web pages always appear at the top? What creates these powerful rankings? And how......一起来看看《Google's PageRank and Beyond》这本书的介绍吧!

码农工具

Markdown 在线编辑器

html转js在线工具

HEX CMYK 转换工具

HEX CMYK 互转工具