Sistema de gráficos de barras HTML/CSS puro-Chart. CSS

Vista prévia

Descripción

Chart. CSS es un sistema de gráficos fácil de usar que le ayuda a mostrar el valor porcentual como gráfico de barras horizontales o verticales utilizando HTML y CSS sin formato.

Funcionamiento

Todo lo que necesita es incluir el Chart. CSS en la página web y estamos listos para ir.

<link rel="stylesheet" href="dist/chart.css">

Cree un gráfico de barras básico en el que los valores de porcentaje se especifiquen mediante clases CSS.

<div class="charts">

<div class="charts__chart chart--p50"></div>

<div class="charts__chart chart--p60"></div>

<div class="charts__chart chart--p70"></div>

<div class="charts__chart chart--p80"></div>

<div class="charts__chart chart--p90"></div>
</div>

También puede utilizar el atributo de datos para especificar los valores porcentuales que desea representar.

<div class="charts">

<div class="charts__chart" data-percent="50%"></div>

<div class="charts__chart" data-percent="60%"></div>

<div class="charts__chart" data-percent="70%"></div>

<div class="charts__chart" data-percent="80%"></div>

<div class="charts__chart" data-percent="90%"></div>
</div>

Agregar la clase CSS ' Charts – vertical ' al elemento superior para crear un gráfico de barra vertical (columna).

<div class="charts charts--vertical">

<div class="charts__chart" data-percent="50%"></div>

<div class="charts__chart" data-percent="60%"></div>

<div class="charts__chart" data-percent="70%"></div>

<div class="charts__chart" data-percent="80%"></div>

<div class="charts__chart" data-percent="90%"></div>
</div>

Cree un gráfico de barras apiladas con elementos DIV anidados.

<div class="charts charts--grouped">

<div class="charts__chart chart--p100 chart--sm" data-percent>


<div class="charts__chart chart--p80
chart--blue" data-percent>



<div class="charts__chart chart--p60
chart--green" data-percent></div>


</div>

</div>



<div class="charts__chart chart--p70" data-percent>


<div class="charts__chart chart--p80
chart--grey" data-percent>



<div class="charts__chart chart--p60
chart--yellow" data-percent></div>


</div>

</div>


<div class="charts__chart chart--p50 chart--lg" data-percent>


<div class="charts__chart chart--p80
chart--red" data-percent>



<div class="charts__chart chart--p60
chart--inverse" data-percent></div>


</div>

</div>
</div>

Referencia.

• . Charts : contenedor de gráficos normales (horizonal). . Charts asume el ancho del elemento exterior (100%). Puede cambiar el ancho del contenedor. Charts.
• . Charts – agrupados : habilitar la agrupación de gráficos. No trabaje con. Charts – verticales
• . Charts – vertical: transforme el gráfico en vertical. . Charts – vertical tiene una altura predefinida. Puede cambiar la altura de. Charts – contenedor vertical
• . charts__chart : elemento de gráfico que debe permanecer dentro del elemento contenedor
• . gráfico – XS. Chart – SM. Chart – LG. Chart – XL : lista de tamaños disponibles
• . Chart – default. Chart – azul. Chart – verde. Chart – rojo. gráfico – amarillo. gráfico – gráfico de modificadores de color gris. gráfico – lista de colores predeterminada disponible
• . gráfico – P0 –. Chart – P100 : las clases de anchura reemplazan el cambio por style = "". Con estas clases, agregando el atributo Data-percent, el porcentaje aparece correctamente
• . Chart – desplazar el mouse : agregar hover en el elemento de gráfico. Funciona con clases de colores
• [Data-Percent] : atributo para habilitar el porcentaje en el gráfico. Obtiene el valor del gráfico de clases – P0-100, no es necesario declarar no trabajar con. Charts – vertical y. Charts – agrupados
• < span class = "charts__percent" > : elemento para mostrar el porcentaje en. Charts – vertical. Si < span class = "charts__percent" > </span > está vacío, asume el valor de la clase de porcentaje (Chart – P0-100). Pero, este lapso puede usarse como un título. Sólo funciona con. Charts – verticales
• < span > : elemento para mostrar el título en el gráfico. Debe venir antes del elemento. charts__chart no trabaje con. Charts – verticales