\u00bfQu\u00e9 tipo de tabla de mapa de calor podemos crear? Bueno, algo como este ejemplo a continuaci\u00f3n:<\/p>\n
S\u00ed, esa es una captura de pantalla muy larga. Puede ver la tabla de mapas de calor din\u00e1micos aqu\u00ed<\/a>.<\/p>\n Para crear una tabla de mapa de calor para que usted o sus visitantes comparen valores de datos m\u00e1s f\u00e1cilmente, tiene pocas opciones dependiendo de sus datos de origen.<\/p>\n Pero antes de dirigirme al tutorial, quer\u00eda informarle que hay dos secciones de este art\u00edculo a las que puede acceder directamente:<\/p>\n Si no tienes una fuente de datos puedes crear tu tabla de mapa de calor desde cero con la opci\u00f3n \u00abCrear tablas manualmente"<\/a> donde insertar\u00e1s valores de datos manualmente.<\/p>\n Para comenzar a crear una tabla de datos manualmente, abra su panel de administraci\u00f3n de WordPress, vaya a wpDataTables -> Crear una tabla<\/strong>, elija la tercera opci\u00f3n \u00a0"Crear una tabla manualmente"<\/strong> y haga clic en "Siguiente"<\/strong>.<\/p>\n Se le mostrar\u00e1 el paso del asistente que lo ayudar\u00e1 a crear la estructura de la tabla donde crear\u00e1 14 columnas: Per\u00edodo, A\u00f1o y todos los dem\u00e1s ser\u00e1n nombres de los meses (enero, febrero…). Para las columnas de Per\u00edodo, dejar\u00e1 el tipo de columna como "Cadena de una l\u00ednea"<\/strong> y para todos los dem\u00e1s, establecer\u00e1\u00a0 el tipo de columna "Entero" .<\/strong><\/p>\n Cuando haya terminado de configurar la tabla, haga clic en "Crear la tabla"<\/strong>. Se abrir\u00e1 un men\u00fa desplegable con opciones para "Abrir en un editor est\u00e1ndar" o "Abrir en un editor similar a Excel" y eso es todo. Se crea la estructura de la tabla. Ahora insertar\u00e1 sus valores de datos num\u00e9ricos en el editor est\u00e1ndar\u00a0<\/a> o en un editor similar a Excel<\/a>.<\/p>\n Si tiene datos en alguna fuente de datos como Excel, CSV, JSON, hoja de c\u00e1lculo de Google, XML, matriz serializada de PHP o en una tabla en una base de datos (fuente SQL), utilizar\u00e1 la segunda opci\u00f3n en el asistente de tablas.<\/p>\n Para comenzar a crear una tabla de datos vinculada a una fuente de datos existente, abra su panel de administraci\u00f3n de WordPress, vaya a wpDataTables -> Create a Table<\/strong>, elija la segunda opci\u00f3n "Crear<\/strong> \u00a0una tabla de datos vinculada a una fuente de datos existente".<\/strong> y haga clic en \u00a0"Siguiente"<\/strong>.<\/p>\n Dependiendo de la fuente que tenga, seguir\u00e1 las instrucciones:<\/p>\n Para esta tabla, usamos CSV como fuente de datos que puede descargar desde aqu\u00ed<\/a>. Elegir\u00e1 CSV como "Tipo de fuente de datos de entrada"<\/strong> y luego, sobre el bot\u00f3n Examinar, busque la fuente que descarg\u00f3 y carg\u00f3 previamente en su servidor. Haga clic\u00a0 en Guardar cambios<\/strong> para que wpDataTables lea el archivo CSV que carg\u00f3 y se cree la tabla.<\/p>\n Despu\u00e9s de crear la tabla, con cualquiera de las dos opciones, puedes personalizar\u00a0<\/a> y configurar\u00a0<\/a> tu tabla de WordPress como necesites.<\/p>\n En nuestro caso, primero activamos la opci\u00f3n "Mostrar filtros en un<\/strong> \u00a0formulario encima de la tabla"\u00a0<\/strong> en la pesta\u00f1a " Ordenar y filtrar<\/strong> " en la configuraci\u00f3n de la tabla y luego configuramos los filtros avanzados\u00a0<\/a> para cada columna. Para la columna Per\u00edodo, configuramos ‘Filtro de cuadro de selecci\u00f3n’ y ‘Filtro de n\u00famero’ para todas las dem\u00e1s columnas.<\/p>\n Luego, activamos la opci\u00f3n "Capacidad de respuesta"<\/strong> en la\u00a0 pesta\u00f1a "Mostrar"<\/strong> en la configuraci\u00f3n de la tabla y ocultamos valores como las columnas "Mes" para tabletas y dispositivos m\u00f3viles en\u00a0 la configuraci\u00f3n de cada columna\u00a0<\/a> o m\u00e1s r\u00e1pido en el bot\u00f3n de lista de columnas\u00a0<\/a> sobre la tabla.<\/p>\n Para personalizar la paleta de colores de datos de la tabla de una manera f\u00e1cil e intuitiva, usamos el formato condicional<\/a>. Para la primera columna, establecemos la condici\u00f3n de que si la celda contiene 2, entonces "Establecer clase CSS de celda<\/strong> " en "texto azul-blanco" para que tengamos un color de fuente blanco sobre el fondo azul.<\/p>\n Luego creamos esas clases en el campo "CSS personalizado"<\/strong> en la pesta\u00f1a " Personalizar" en la configuraci\u00f3n de la tabla como esta:<\/strong><\/p>\n Como esto:<\/p>\n Donde el n\u00famero 1 en .wpDataTable-1 es el ID de su tabla, por lo que deber\u00e1 cambiarlo para su tabla<\/p>\n Para todas las dem\u00e1s columnas, establecemos las mismas condiciones para establecer diferentes colores en funci\u00f3n del valor de la tabla de temperatura m\u00e1xima.<\/p>\n Para la segunda tabla "Temperatura baja" usamos el mismo enfoque que para la tabla "Temperatura m\u00e1xima", excepto las condiciones en el formato Condicional. Debido a que es un valor de temperatura m\u00e1s bajo, usamos estas condiciones.<\/p>\n Luego creamos esas clases en el campo "CSS personalizado"<\/strong> en la pesta\u00f1a " Personalizar" en la configuraci\u00f3n de la tabla como esta:<\/strong><\/p>\n Donde el n\u00famero 2 en .wpDataTable2 es el ID de su tabla, por lo que deber\u00e1 cambiarlo para su tabla.<\/p>\n \u00a1Eso es todo!<\/p>\n Ahora tiene un mapa de calor de tabla donde puede comparar valores de datos f\u00e1cilmente sin que parezca que est\u00e1 leyendo la letra peque\u00f1a de un contrato.<\/p>\n Si esa fue una forma f\u00e1cil e intuitiva de crear mapas de calor en una tabla, consulte la siguiente parte.<\/p>\n Ahora lo que debe hacer es aparecer en sus p\u00e1ginas en el front-end. Al igual que con cualquier otro complemento, usamos c\u00f3digos abreviados para mostrar tablas en las p\u00e1ginas o publicaciones de los usuarios.\u00a0Agregar<\/a> \u00a0c\u00f3digos abreviados\u00a0<\/a> es muy f\u00e1cil, especialmente si est\u00e1 utilizando creadores de p\u00e1ginas populares como Elementor, WP Bakery o Gutenberg.<\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Fuente de imagen<\/a><\/p>\n Si disfrut\u00f3 leyendo este art\u00edculo sobre c\u00f3mo crear una tabla de mapa de calor con wpDataTables, debe consultar este sobre c\u00f3mo dise\u00f1ar una tabla<\/a>.<\/p>\n Tambi\u00e9n escribimos sobre algunos temas relacionados, como las alternativas de DataTables<\/a>, las bibliotecas de tablas de JavaScript<\/a>, c\u00f3mo crear una tabla, una tabla de encuestas<\/a> y\u00a0 los complementos de la tabla de precios de WordPress .<\/a><\/p>\n![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86807bd8a1.jpg\")
<\/a><\/p>\nC\u00f3mo crear una tabla de mapa de calor con wpDataTables<\/h2>\n
1 Creando una tabla desde cero<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680925c5c.png\")
<\/a><\/p>\n![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680b280c6.png\")
<\/a><\/p>\n2 Creaci\u00f3n de un mapa de calor de tabla a partir de una fuente de datos<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680ea4280.png\")
<\/a><\/p>\n\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868107aa5d.png\")
<\/a><\/p>\n![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681182f8d.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}\n\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}\n<\/code><\/pre>\n![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868134e7ef.jpg\")
<\/a><\/p>\n![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868145dee1.png\")
<\/a><\/p>\n![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681655e4e.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}\n\n.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}\n<\/code><\/pre>\nEjemplos de mapas de calor de tablas<\/h2>\n
Aplicaci\u00f3n de compromiso de los empleados<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86817cf2ce.jpg\")
<\/a><\/p>\nMapa de calor<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681906078.jpg\")
<\/a><\/p>\nplataforma de aprendizaje<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681a5c4bd.jpg\")
<\/a><\/p>\nMapa de calor de la contaminaci\u00f3n del aire<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681b877d1.jpg\")
<\/a><\/p>\nTemperaturas medias para ciudades seleccionadas en Am\u00e9rica del Norte<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681caeb85.jpg\")
<\/a><\/p>\nPredicciones de la Copa Mundial Femenina 2019<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681dbe6da.jpg\")
<\/a><\/p>\nTabla de prevalencia<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681ecb3cb.jpg\")
<\/a><\/p>\nRendimientos de las acciones<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681fcb83a.jpg\")
<\/a><\/p>\nEstad\u00edsticas de ingresos del producto<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682136f1f.jpg\")
<\/a><\/p>\nMesa de equipos<\/h3>\n
![\"Ejemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682270202.jpg\")
<\/a><\/p>\n