Código de CSS - Gráfico de barras utilizando unicamente HTML y CSS

Imágen de perfil
Val: 200
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Gráfico de barras utilizando unicamente HTML y CSSgráfica de visualizaciones


CSS

Publicado el 5 de Mayo del 2019 por Joan
1.717 visualizaciones desde el 5 de Mayo del 2019
Este código muestra como crear un gráfico de barras tanto horizontal como vertical utilizando unicamente HTML y CSS.

grafico-html-css-vertical

grafico-html-css-horizontal

Requerimientos

Cualquier navegador que soporte HTML5

Versión 1.0

Publicado el 5 de Mayo del 2019gráfica de visualizaciones de la versión: Versión 1.0
1.718 visualizaciones desde el 5 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

La base del código ha sido obtenida de http://www.coding-dude.com/wp/html5/bar-chart-html/ y modificada para que funcione unicamente con CSS y HTML nativo.
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráfico de barrasL</title>
 
    <style>
    .chart-wrap {
        --chart-width:420px;
        --grid-color:#aaa;
        --bar-color:#F16335;
        --bar-thickness:40px;
        --bar-rounded: 3px;
        --bar-spacing:10px;
 
        font-family:sans-serif;
        width:var(--chart-width);
    }
 
    .chart-wrap .title{
        font-weight:bold;
        padding:1.8em 0;
        text-align:center;
        white-space:nowrap;
    }
 
    /* cuando definimos el gráfico en horizontal, lo giramos 90 grados */
    .chart-wrap.horizontal .grid{
        transform:rotate(-90deg);
    }
 
    .chart-wrap.horizontal .bar::after{
        /* giramos las letras para horizontal*/
        transform: rotate(45deg);
        padding-top:0px;
        display: block;
    }
 
    .chart-wrap .grid{
        margin-left:50px;
        position:relative;
        padding:5px 0 5px 0;
        height:100%;
        width:100%;
        border-left:2px solid var(--grid-color);
    }
 
    /* posicionamos el % del gráfico*/
    .chart-wrap .grid::before{
        font-size:0.8em;
        font-weight:bold;
        content:'0%';
        position:absolute;
        left:-0.5em;
        top:-1.5em;
    }
    .chart-wrap .grid::after{
        font-size:0.8em;
        font-weight:bold;
        content:'100%';
        position:absolute;
        right:-1.5em;
        top:-1.5em;
    }
 
    /* giramos las valores de 0% y 100% para horizontal */
    .chart-wrap.horizontal .grid::before, .chart-wrap.horizontal .grid::after {
        transform: rotate(90deg);
    }
 
    .chart-wrap .bar {
        width: var(--bar-value);
        height:var(--bar-thickness);
        margin:var(--bar-spacing) 0;
        background-color:var(--bar-color);
        border-radius:0 var(--bar-rounded) var(--bar-rounded) 0;
    }
 
    .chart-wrap .bar:hover{
        opacity:0.7;
    }
 
    .chart-wrap .bar::after{
        content:attr(data-name);
        margin-left:100%;
        padding:10px;
        display:inline-block;
        white-space:nowrap;
    }
 
    </style>
</head>
<body>
 
<div class="chart-wrap horizontal"> <!-- quitar el estilo "horizontal" para visualizar verticalmente -->
  <div class="title">Grafico con HTML y CSS que se puede visualizar horizontal o vertical</div>
 
  <div class="grid">
      <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>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5294