Gráfico de columnas CSS adaptable con reserva móvil

Vista prévia

Descripción

Un simple y receptivo CSS gráfico de barras biblioteca que visualiza los datos tabulares (valores numéricos) en barras. El gráfico de columnas se degradará correctamente a una tabla HTML sencilla en dispositivos móviles.

Funcionamiento

Un simple y receptivo CSS gráfico de barras biblioteca que visualiza los datos tabulares (valores numéricos) en barras. El gráfico de columnas se degradará correctamente a una tabla HTML sencilla en dispositivos móviles.

<link rel="stylesheet" href="style.css">

Cree una tabla HTML para el gráfico de barras.

<table id="bar-graph">

<caption>Web Performance Results</caption>

<thead>



<tr>





<th></th>





<th class="before">Before</th>





<th class="after">After</th>



</tr>

</thead>

<tbody>



<tr id="section-1">





<th scope="row">Initial Load Time</th>





<td class="before bar"><p>4.7s</p></td>





<td class="after bar"><p>1.1s</p></td>



</tr>



<tr id="section-2">





<th scope="row">Visually Complete</th>





<td class="before bar"><p>3.1s</p></td>





<td class="after bar"><p>1.5s</p></td>



</tr>



<tr id="section-3">





<th scope="row">Fully Loaded</th>





<td class="before bar"><p>4.8s</p></td>





<td class="after bar"><p>1.4s</p></td>



</tr>

</tbody>
</table>

Cree una tabla HTML para el gráfico de barras.

<div id="ticks">

<div class="tick"><p>5.0s</p></div>

<div class="tick"><p>4.0s</p></div>

<div class="tick"><p>3.0s</p></div>

<div class="tick"><p>2.0s</p></div>

<div class="tick"><p>1.0s</p></div>

<div class="tick"><p>0.0s</p></div>
</div>