Gráfico de barras CSS con funciones modernas

Las nuevas funciones de CSS a veces pueden hacer que sea más fácil y eficiente codificar diseños que ya sabemos cómo crear. Esta eficiencia puede resultar de una reducción del código o de los hacks, o de una mejor legibilidad debido a nuevas funciones.

Con este espíritu, mejoremos el contenido subyacente del gráfico de barras.

<ul class="chart" tabindex="0" role="list" aria-labelledby="chart-title">
  <li class="chart-bar" data-value="32" tabindex="0" role="img" aria-label="32 percentage">32%</li>
  <!-- etc. -->
</ul>

Empezamos trazando una cuadrícula.

.chart {
  display: grid;
  grid-template-rows: repeat(100, 1fr);
  /* etc. */
}

Los indicadores gráficos se basan en porcentajes, como “un número Puntuación total 100“. Digamos que estamos usando una cuadrícula con 100 filas. Eso debería ser una prueba de estrés, ¿verdad?

A continuación agregamos las barras a la grilla. grid-column y grid-row característica:

.chart-bar {
  grid-column:  sibling-index();
  grid-row: span attr(data-value number);
  /* etc. */
}

Primero, quiero señalar algunas cosas. primero es sibling-index() Función. es nuevo e incompleto Soporte del navegador Al momento de escribir este artículo (¡vamos, Firefox!), aunque actualmente es compatible con las últimas versiones de Chrome y Safari (pero aparentemente no en iOS). seguido por attr() Función. Lo hemos estado usando por un tiempo pero recientemente lo actualizamos. Ahora acepte atributos de datos.. Entonces, cuando tenemos uno de estos en nuestro marcado, es como data-value="32" –Esto es lo que la función puede leer.

¡Con esto, podemos crear un gráfico de barras muy bonito usando CSS simple! La siguiente demostración tiene opciones alternativas para que aún puedas ver el resultado final si tu navegador no adopta estas nuevas características:

Sí, es fácil de hacer, pero es mejor saberlo exactamente. Por qué funciona. Entonces, analicémoslo.

Crear columnas de cuadrícula automáticamente

Anunciar sibling-index() funcionar en grid-column propiedad explícitamente Coloque los elementos de la lista en columnas consecutivas. Digo “explícitamente” porque le decimos a la cuadrícula dónde colocar cada elemento según su posición específica. data-value atributos en la etiqueta. va primero <li> En la primera columna, en la segunda columna. <li> En la segunda columna y así sucesivamente.

esto es poder sibling-index() — La red genera pedidos de forma inteligente para nosotros No se requiere operación manual A través de variables CSS.

/* First bar: sibling-index() = 1 */
grid-column: sibling-index();

/* ...results in: */
grid-column: 1;
grid-column-start: 1; grid-column-end: auto;

/* Second bar: sibling-index() = 2 */
grid-column: sibling-index();

/* ...results in: */
grid-column: 2;
grid-column-start: 2; grid-column-end: auto;

/* etc. */

Crear automáticamente filas de cuadrícula

¡Es más o menos lo mismo! Pero en este caso, cada barra ocupa una determinada cantidad de filas en función del porcentaje que representa. La grilla obtiene estos valores de data-value Propiedad en el marcador que efectivamente le indica a la cuadrícula la altura de cada barra en el gráfico.

/* First bar: data-value="32" */
grid-row: span attr(data-value number);

/* ...results in: */
grid-row: span 32

/* Second bar: data-value="46" */
grid-row: span attr(data-value number);

/* ...results in: */
grid-row: span 46

este attr() función, al proporcionar un tipo de datos Parámetro (valor del parámetro number En nuestro caso), Convertir el valor recuperado attr() en ese tipo específico. En nuestro ejemplo, attr() valor de retorno de la función data-value como <number> tipo, que luego se utiliza para determinar el número de filas que abarcarán cada barra.

¡Hagamos gráficos diferentes!

Ahora que tenemos los aspectos básicos de este enfoque, pensé en llevarlo un poco más allá y demostrar cómo se puede aplicar la misma técnica a una variedad de gráficos CSS puro.

Por ejemplo, podemos utilizar grid-row Ajusta el valor vertical de la barra:

O podríamos omitir las subsecciones por completo y usar marcadores en su lugar:

También podemos intercambiar las columnas y filas de un gráfico de barras horizontales:

Resumir

Bastante emocionante, ¿verdad? Basta con mirar todos los métodos que utilizamos para implementar estas cosas en el pasado. sibling-index() y versión mejorada attr():