Gráfico de columnas/barras basado en la lista HTML de CSS3 puro

Vista prévia

Descripción

Una solución CSS/CSS3 pura para renderizar un gráfico de Columb/bar personalizable a partir de listas no ordenadas HTML.

Uso básico

Cargue el Main. CSS para los estilos de gráfico principales.

<link href="styles/main.css" rel="stylesheet">

Cree etiquetas del eje Y.

<ul class="y_axis">

<li>100%</li>

<li>80%</li>

<li>60%</li>

<li>40%</li>

<li>20%</li>

<li>0%</li>
</ul>

Cree etiquetas de eje X.

<ul class="x_axis">

<li>Steel</li>

<li>Copper</li>

<li>Metal</li>

<li>Iron</li>

<li>Wood</li>
</ul>

Inserte la fecha en el gráfico de columna/gráfico utilizando las listas HTML como sigue.

<div class="graph">

 <!-- grid -->

<ul class="grid">


<li><!-- 100 --></li>


<li><!-- 80 --></li>


<li><!-- 60 --></li>


<li><!-- 40 --></li>


<li><!-- 20 --></li>


<li class="bottom"><!-- 0 --></li>

</ul>



<!-- bars -->

 <!-- 250px = 100% -->

<ul>


<li class="bar nr_1 blue" style="height: 125px;">



<div class="top"></div>



<div class="bottom"></div>



<span>50%</span></li>


<li class="bar nr_2 blue" style="height: 225px;">



<div class="top"></div>



<div class="bottom"></div>



<span>90%</span></li>


<li class="bar nr_3 blue" style="height: 75px;">



<div class="top"></div>



<div class="bottom"></div>



<span>30%</span></li>


<li class="bar nr_4 blue" style="height: 100px;">



<div class="top"></div>



<div class="bottom"></div>



<span>40%</span></li>


<li class="bar nr_5 blue" style="height: 150px;">



<div class="top"></div>



<div class="bottom"></div>



<span>60%</span></li>

</ul>
</div>

Crear etiqueta de gráfico.

<div class="label">

<span>Graph: </span>Gain (in percent)
</div>