Cómo crear un gráfico de barras solo con HTML
Publicado por Juan (1 intervención) el 01/05/2019 11:55:51
Intenté crear un gráfico de barras solo con HTML utilizando varios métodos. Lee el tutorial completo para crear gráficos de barras: http://www.coding-dude.com/wp/html5/bar-chart-html/
Este es el código HTML con el que comencé:
Y este es el LESS / CSS
Este es el código HTML con el que comencé:
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="chart-wrap">
<h2 class="title">HTML Bar Graph Example Using Flexbox</h2>
<div class="grid horizontal">
<div class="bar" style="--bar-value:85%;" data-name="Your Blog" title="Your Blog 85%"></div>
<div class="bar" style="--bar-value:23%;" data-name="Medium" title="Medium 23%"></div>
<div class="bar" style="--bar-value:7%;" data-name="Tumblr" title="Tumblr 7%"></div>
<div class="bar" style="--bar-value:38%;" data-name="Facebook" title="Facebook 38%"></div>
<div class="bar" style="--bar-value:35%;" data-name="YouTube" title="YouTube 35%"></div>
<div class="bar" style="--bar-value:30%;" data-name="LinkedIn" title="LinkedIn 30%"></div>
<div class="bar" style="--bar-value:5%;" data-name="Twitter" title="Twitter 5%"></div>
<div class="bar" style="--bar-value:20%;" data-name="Other" title="Other 20%"></div>
</div>
</div>
Y este es el LESS / CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@width:650px;@height:600px;@bar-size:45px;
@bar-color:#F16335;
@bar-rounded: 3px;
@grid-color:#aaa;
.chart-wrap{
width: @width; height: @height;font-family:sans-serif;
.title {
text-align:center;
}}.grid{
width:100%;
height:100%;
display:flex;flex-direction:row;
justify-content:center;
border-bottom:2px solid @grid-color;
background:repeating-linear-gradient(0deg,transparent,transparent 19.5%,fadeout(@grid-color,30%) 20%);
.bar {
background-color:@bar-color;
width:@bar-size;
height: var(--bar-value);
align-self:flex-end;
margin:0 auto;border-radius:@bar-rounded @bar-rounded 0 0;
position:relative;&.bar:hover{
opacity:0.7;
}&::after{
content:attr(data-name);
top:-3em;
padding:10px;display:inline-block;
white-space:nowrap;
position:absolute;transform:rotate(-45deg);
} }&.horizontal{
flex-direction:column;
border-bottom:none;
border-left:2px solid @grid-color;
background:repeating-linear-gradient(90deg,transparent,transparent 19.5%,fadeout(@grid-color,30%) 20%);
.bar{
height:@bar-size;
width: var(--bar-value);
align-self:flex-start;
margin:auto 0 auto 0;border-radius:0 @bar-rounded @bar-rounded 0;
&::after{
top:initial;left:100%;
padding:0 10px;display:inline-block;
white-space:nowrap;
position:absolute;transform:rotate(0deg);
line-height:@bar-size;
} } }}Valora esta pregunta
0