Ejemplos de tablas de mapas térmicas y cómo crear una en WordPress

Cada vez que vea una mesa con mapas térmicos en línea, debe pensar que es algo bastante elegante y complicado de crear, ¿verdad? En realidad no, en realidad. Con mucho, parece que tiene que jugar con muchos datos numéricos y hacer cosas técnicas complicadas para crear celdas para un mapa térmico de tabla. Sin embargo, esto está lejos de la realidad si tienes la herramienta adecuada. En este artículo, repasaré la creación de una tabla de mapas térmicos con WPDatatables, el complemento WordPress #1 para crear tablas y diagramas. ¿Qué tipo de tabla de mapa térmico podemos crear? Bueno, algo como este ejemplo a continuación:

Sí, es una captura de pantalla muy larga. Puede ver la tabla con mapas dinámicos aquí. Para crear una tabla de mapas térmicos para que usted o sus visitantes comparen los valores de datos más fácilmente, tiene algunas opciones dependiendo de los datos de origen. Pero antes de ir al tutorial, quería anunciar que hay dos secciones de este artículo que puede omitir directamente:
Tutorial que te enseña cómo crear una mesa con mapas térmicos
Ejemplos de tablas con mapas térmicos para inspirarlo a personalizar su
Cómo crear una tabla con mapas térmicos con wpdatateables 1. Creación de una tabla desde cero Si no tiene una fuente de datos, puede crear la tabla de mapa térmico desde cero con la opción “Crear manual de tablas” donde ingresará manualmente el valores de datos.
Para comenzar a crear una tabla de datos manualmente, abra el panel de administración de WordPress, vaya a WPDATATABLE -> Crear una tabla, elija la tercera opción “Cree una tabla manual” y haga clic en “Siguiente”.

Se le mostrará el paso del asistente que lo ayudará a crear la estructura de la tabla en la que creará 14 columnas: el período, el año y todos los demás serán los nombres de los meses (enero, febrero …). Para los períodos de períodos, dejará el tipo de columna como una “cadena en una línea”, y para todos los demás, establecerá el tipo de columna “entero”. Después de haber terminado la tabla, haga clic en “Crear la mesa”. Se abrirá un menú desplegable con opciones para “Abrir en el editor estándar” o “Abrir en un editor similar de Excel” y eso es todo. Se crea la estructura de la tabla. Ahora insertará los valores de sus datos numéricos sobre el editor estándar o un editor similar de Excel.

2. Creación de un mapa térmico de tabla a partir de una fuente de datos si tiene datos en una fuente de datos como Excel, CSV, JSON, Google, Hoja de computación XML, Matriz serializada de PHP o en una tabla de una base de datos (SQL Source), USTED Utilizará la segunda opción en el experto en la tabla. Para comenzar a crear una tabla de datos conectada a una fuente de datos existente, abra el panel de administración de WordPress, vaya a WPDATATABLE -> Crear una tabla, elija la segunda opción “Cree una tabla de datos conectada a una fuente de datos existente”. Y haga clic en “Siguiente”.
Dependiendo de la fuente que tenga, seguirá las instrucciones:

Cómo crear una tabla basada en mysql con wpdatatables
Creación de tablas en WordPress de Google Computing Hojas
Creación de tablas en WordPress en Excel
Cómo crear una tabla a partir de datos CSV
Creación de tablas en WordPress desde la entrada JSON
Cómo crear tablas en WordPress con entrada XML
Creación de tablas en WordPress basadas en la matriz PHP serializada
Para esta tabla, utilizamos CSV como fuente de datos que puede descargar desde aquí. Elegirá el CSV como un “tipo de fuente de datos de entrada” y luego, a través del botón de navegación, encuentre la fuente que ha descargado y cargado en su servidor. Haga clic en Guardar cambios, por lo que WPDATATABLES leerá el archivo de CSV que l -Oft. Cargar y la tabla se creará. Después de crear la tabla, con cualquiera de las dos opciones, puede personalizar y configurar la tabla de WordPress como sea necesario. En nuestro caso, primero activamos la opción “Muestra los filtros en un formulario sobre la tabla” en la pestaña “Ordenar y filtrar” en la configuración de la tabla y luego configuramos filtros avanzados para cada columna. Para el período, configuramos “Filtro de cuadro Seleccionar” y “Filtro de número” para todas las demás columnas. Luego activamos la opción “Reactividad” en la pestaña “Mostrar” en la configuración de la tabla y ocultamos valores como columnas “Luna” para tabletas y dispositivos móviles en la configuración de cada columna o más rápido en la lista de columnas sobre la tabla .
Para personalizar la paleta de colores de los datos en la tabla de una manera fácil e intuitiva, utilizamos el formato condicional. Para la primera columna, establecemos la condición de que, si la celda contiene 2, entonces “establece la clase CSS de la celda” en “Blue-White”, para que tengamos un color de fuente blanco en el fondo azul.
Luego creamos esas clases en el campo “personalizado” en la pestaña “Personalización” en la configuración de la tabla, de la siguiente manera:

.wpdt-c .wpatateablewrupper .wpdatatable-1 td.blue {sótano color: #0083c2! importante;}

.wpdt-c .wdatateSwrapper.

Como esto:
Donde el número 1 de .wpatatable-1 es su ID de tabla, por lo que deberá cambiarlo para su tabla para todas las demás columnas, establezca las mismas condiciones para establecer diferentes colores en función del valor en la tabla de temperatura máxima. Para la segunda Tabla “baja temperatura” Utilizamos el mismo enfoque que para la tabla “temperatura máxima”, excepto las condiciones en el formato condicional. Debido a que es un valor de temperatura más bajo, usamos estas condiciones.
Luego creamos esas clases en el campo “personalizado” en la pestaña “Personalización” en la configuración de la tabla, de la siguiente manera:

.wpdt-c .wdatateSwrapper.

.wpdt-c .wdatateSwrapper.

Donde el número 2 de .wpatatable2 es el ID de la tabla, por lo que deberá cambiarlo para la tabla. ¡Eso es todo! Ahora tiene un mapa térmico de tabla donde puede comparar fácilmente los valores de datos, sin demostrar que está leyendo la pequeña huella digital de un contrato. Si esta era una forma fácil e intuitiva de crear mapas térmicos en una mesa, consulte la siguiente parte. Ahora lo que debe hacer es mostrar sus páginas en el front-end. Como con cualquier otro complemento, utilizamos códigos cortos para mostrar tablas en las páginas o publicaciones de los usuarios. La adición de códigos cortos es muy fácil, especialmente si usa páginas populares como Elementor, WP Bakery o Gutenberg.
Ejemplos de mapas térmicos masivos La aplicación de participación de los empleados
Mapa termográfico de fuente de imagen
La fuente de la imagen de la plataforma de aprendizaje
La fuente de la inspiración de diseño de gráficos. Enciclopedia DataViz

La fuente de la imagen

El mapa de calor de la contaminación del aire La imagen de las temperaturas promedio de la imagen para ciertas ciudades de América del Norte

Predicciones de fuente de imagen Copa Mundial Femenina 2019

Fuente de la tabla de prevalencia
Devoluciones de stock de fuente de imagen

Fuente de la imagen estadística sobre los ingresos producidos

Tabla de equipo de fuente de imágenes

La fuente de la imagen Si le gustaba leer este artículo sobre cómo crear una tabla de mapa térmico WPDATATATABLE, debería verlo sobre cómo diseñar una tabla.

También escribí sobre algunos temas relacionados, como alternativas de datos de datos, bibliotecas de tabla de JavaScript, cómo crear una tabla de tabla y complementos para la tabla de precios de WordPress.