Visualización de datos CSS: gráficos, tablas, etc.

Una buena presentación de datos es un aspecto importante de la industria web, ya que es la clave para que los visitantes comprendan su contenido en segundos. Cuanto más fácil o rápido entiendan sus visitantes el contenido de su sitio web, más reflejará su profesionalismo en la gestión de su presentación..

Los criterios para una presentación de datos decente deben ser simples y descriptivos, bien diseñados, pero capaces de retener el interés del usuario, asimilar su contenido sin esfuerzo, facilitar las comparaciones y, en última instancia, el usuario debe poder tomar una decisión o sacar una conclusión. presentado sin esfuerzo. Por difíciles que parezcan estos estándares locos, es posible.

En el post de hoy queremos pasearte y aprender sobre todo tipo de belleza y Herramienta totalmente basada en CSS/HTML para la visualización de datos creativos. sí Sólo tienes que copiar y pegar y personalizarlo a tu gusto. ¡Estos gráficos pueden ser gráficos de barras CSS que muestran datos horizontales/verticales o incluso gráficos de líneas y circulares!

¿quieres mas? ¡Sigue deslizándote hacia abajo!

gráfico de barras horizontales

Una manera fácil de ver las estadísticas como un resumen con esta barra accesible usando CSS. El cálculo de la barra usa celdas de valor y etiquetas Encabezado usando clase de audiotexto

Reproducción de CSS

Un gráfico de barras es una lista explícita de estilos y clases definidos para cada fila. El primer gráfico tenía un error que ocurría cuando el valor estaba cerca del 100%, el cual fue corregido en el segundo gráfico. El código fuente se incluye para su referencia.

barra de porcentaje

Usando la función de ancho porcentual de CSS, se creó un gráfico de barras basado en porcentajes en este tutorial. En un gráfico de barras horizontales, puede configurar los marcadores para mover la longitud de izquierda a derecha, o puede usar la misma técnica y duplicarla. varias veces para generar un gráfico vertical.

máximo diseño

Russ Weakley te enseña a crear gráficos basados ​​en porcentajes y el uso de imágenes de fondo. El código y las imágenes asociados se pueden copiar y descargar para usarlos en sus proyectos.

gráfico de barras verticales

Use CSS y PHP para crear un gráfico de barras verticales mediante la creación de una lista simple que contiene la altura (en píxeles) de una barra, el eje Y del grupo de barras y una clase para diseñar el conjunto de datos. Eric Meyer te enseña a usar la misma técnica para convertirlo en barra, línea, puntero y gráficos 3D

Dibujo lineal CSS puro

Los gráficos de líneas transmiten información más rápido que las tablas de números. Aprenda a usar HTML para crear gráficos de líneas con CSS, reemplace texto con imágenes y use sprites de CSS y posicionamiento absoluto para obtener gráficos de líneas.

Dibujo simple de líneas.

Gráficos lineales muy simples que utilizan solo DHTML y CSS, donde puede establecer un fondo transparente para los gráficos. Los gráficos se cargan más rápido y se fusionan con el resto de la página.

gráficos

Este gráfico de Ajax se usa para presentar los datos del año, con base en cada mes, usando solo CSS y XHTML, y funciona en Firefox y Opera.

lista de muchas columnas

Paul Nowitzki te enseña cómo crear una lista de varias columnas CSS en este artículo. Discute muchas técnicas, como navegar por una lista dividida, usar atributos HTML para numerarla, contenido generado por CSS, envolver listas con XHTML, CSS, etc., y finalmente agrega algunos estilos e imágenes de fondo para implementar perfectamente muchas listas de columnas.

gráfico de viñetas

Los diagramas de lotes comparan una métrica con una o más métricas y muestran un rango de efectividad de calidad. Son muy flexibles para sitios basados ​​en datos. Aprende a crear cuadros gráficos con CSS/HTML.

Horario de estancia

Inicialmente, el cronograma de permanencia tenía problemas para mostrar largos intervalos de tiempo en un área de pantalla limitada y mantener un diseño transparente de eventos, lo cual fue aclarado por el paradigma del calendario mensual.

onMouseOver () continúa funcionando, se utilizan diferentes colores para diferentes tipos de eventos de estancia.

Gráficos CSS dinámicos en En Vivo

Los gráficos CSS dinámicos en tiempo real muestran el tiempo de respuesta de los pings realizados por el servidor web, que utiliza código CSS y JavaScript, funciones AJAX y diapositivas gráficas para leer datos del servidor web.

Plan de producción

Cree un gráfico del plan de producción usando la clase de gráfico como contenedor de gráficos y use hLine y vLine para dibujar líneas divisorias. Este gráfico es para aplicaciones de intranet.

El ancho del gráfico se calcula en función de la cantidad de días que se muestran y la altura en función de la cantidad de cambios de trabajo.

ilustración de sándwich

Los diagramas sándwich se crean cuando una franja dentro de una franja se divide en varias capas, donde la altura de una columna puede ser una tendencia global y la altura de una capa es parte de esa capa. Cree un gráfico sándwich CSS basado en este tutorial.

gráfico de barras organizado

Para gráficos superpuestos, defina una lista para mostrar los datos, luego restablezca los campos y las almohadillas para mostrar lo mismo en todos los navegadores. Agrega un eje y dale estilo para obtener un gráfico de barras ordenado. Cada detalle se enseña en esta lección.

gráfico de barras verticales

Los gráficos de barras verticales se utilizan para mostrar un conjunto de datos hipotéticos. El gráfico de barras aquí es para una tabla simple y algunos divs. El cálculo de las alturas de las bandas y las capas horizontales se puede realizar en PHP, ASP o procesador por el servidor o por el cliente a través de JavaScript.

Pete

Los gráficos circulares son fáciles de entender porque se pueden usar para varios colores, se distinguen fácilmente de otros colores y no requieren mucho espacio. Tutorial para crear un gráfico circular simple usando DHTML / CSS Inserte un script de gráfico circular en la página

gráfico circular para chismes

Plotkit es una reescritura bien estructurada de CanvasGraph para dibujar gráficos y tablas para Javascript. Es compatible con HTML Canvas a través de Adobe SVG Viewer, es decir. Safari, Opera, Firefox e IE y SVG.

Otros visualizadores CSS

Mapa visual de CSS

Este tutorial usa CSS para hacer que el mapa sea más accesible, útil y visualmente atractivo. Los mapas primero se organizan con datos, luego se crea un mapa con esos datos agregando algunos estilos, mostrando datos como sugerencias, deshabilitando el script java y finalmente creando un mapa interactivo.

barra de progreso de animación

Crea una barra de progreso animada usando CSS con 3 elementos, 1 contenedor y 2 elementos anidados y completa la animación con un gif animado. Se utiliza una imagen de fondo para un contenedor de cierta altura y anchura.

Cronología de CSS

Usando CSS y una lista desordenada, se puede crear una línea de tiempo CSS con una simple marca de verificación para la sección "Acerca de". Cree una bonita línea de tiempo con estilo CSS que funcione incluso si el visitante no tiene CSS habilitado.

Golpe fuerte

SlickMap CSS es una hoja de estilo para mostrar un mapa del sitio completo desde la navegación HTML con una lista desordenada. Se puede personalizar según sus propias necesidades o estilo. SlickMap simplifica el proceso de diseño y elimina la necesidad de software adicional al automatizar las ilustraciones del mapa del sitio

Tabla CSS desplazable

Las tablas no siempre tienen que ser fijas en los datos. Podemos crear una tabla con la capacidad de desplazarse con un título fijo y cualquier cantidad de datos para desplazarse.

¿Nos faltan herramientas que te parecen útiles? Por favor, háganos saber y háganos saber.