HTML - Cómo crear un gráfico de barras solo con HTML

 
Vista:
Imágen de perfil de Juan
Val: 2
Ha aumentado su posición en 45 puestos en HTML (en relación al último mes)
Gráfica de HTML

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/
horizontal-html-bar-graph
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder