Que tipo de tabela de mapa de calor podemos criar? Bem, algo como este exemplo abaixo:<\/p>\n
Sim, essa \u00e9 uma captura de tela muito longa. Voc\u00ea pode ver a tabela de mapa de calor din\u00e2mico aqui<\/a>.<\/p>\n Para criar uma tabela de mapa de calor para voc\u00ea ou seus visitantes compararem os valores dos dados com mais facilidade, voc\u00ea tem poucas op\u00e7\u00f5es, dependendo dos dados de origem.<\/p>\n Mas antes de ir para o tutorial, gostaria de informar que existem duas se\u00e7\u00f5es deste artigo para as quais voc\u00ea pode pular diretamente:<\/p>\n Se voc\u00ea n\u00e3o tiver uma fonte de dados, poder\u00e1 criar sua tabela de mapa de calor do zero com a op\u00e7\u00e3o “Criando tabelas manualmente"<\/a>, onde voc\u00ea inserir\u00e1 os valores dos dados manualmente.<\/p>\n Para come\u00e7ar a criar uma tabela de dados manualmente, abra o painel de administra\u00e7\u00e3o do WordPress, v\u00e1 para wpDataTables -> Create a Table<\/strong>, escolha a terceira op\u00e7\u00e3o \u00a0“Create a table manualmente”<\/strong> e clique em “Next”<\/strong>.<\/p>\n Ser\u00e1 mostrado o passo do assistente que o ajudar\u00e1 a criar a estrutura da tabela onde voc\u00ea criar\u00e1 14 colunas: Per\u00edodo, Ano, e todos os outros ser\u00e3o nomes dos meses (Jan, Fev\u2026). Para colunas de per\u00edodo, voc\u00ea deixar\u00e1 o tipo de coluna como "String de uma linha"<\/strong> e para todas as outras, definir\u00e1 o tipo de coluna "Inteiro" .<\/strong><\/p>\n Quando terminar de configurar a tabela, clique em “Create the table”<\/strong>. Um menu suspenso ser\u00e1 aberto com op\u00e7\u00f5es para “Abrir no editor padr\u00e3o” ou “Abrir no editor do tipo Excel” e pronto. A estrutura da tabela \u00e9 criada. Agora voc\u00ea inserir\u00e1 seus valores de dados num\u00e9ricos no editor padr\u00e3o\u00a0<\/a> ou em um editor semelhante ao Excel<\/a>.<\/p>\n Se voc\u00ea tiver dados em alguma fonte de dados como Excel, CSV, JSON, planilha do Google, XML, array serializado PHP, ou em uma tabela em um banco de dados (fonte SQL), voc\u00ea usar\u00e1 a segunda op\u00e7\u00e3o no assistente de tabela.<\/p>\n Para come\u00e7ar a criar uma tabela de dados vinculada a uma fonte de dados existente, abra o painel de administra\u00e7\u00e3o do WordPress, v\u00e1 para wpDataTables -> Criar uma tabela<\/strong>, escolha a segunda op\u00e7\u00e3o “Criar<\/strong> \u00a0uma tabela de dados vinculada a uma fonte de dados existente”.<\/strong> e clique em \u00a0“Avan\u00e7ar”<\/strong>.<\/p>\n Dependendo de qual fonte voc\u00ea tem, voc\u00ea seguir\u00e1 as instru\u00e7\u00f5es:<\/p>\n Para esta tabela, usamos CSV como fonte de dados que voc\u00ea pode baixar aqui<\/a>. Voc\u00ea escolher\u00e1 CSV como “Tipo de fonte de dados de entrada”<\/strong> e, em seguida, no bot\u00e3o Procurar, encontrar\u00e1 a fonte que voc\u00ea baixou e enviou anteriormente em seu servidor. Clique\u00a0 em Salvar altera\u00e7\u00f5es<\/strong>, para que wpDataTables leia o arquivo CSV que voc\u00ea carregou e a tabela ser\u00e1 criada.<\/p>\n Depois de criar a tabela, com qualquer uma das duas op\u00e7\u00f5es, voc\u00ea pode personalizar\u00a0<\/a> e configurar\u00a0<\/a> sua tabela WordPress como precisar.<\/p>\n No nosso caso, primeiro ativamos a op\u00e7\u00e3o “Mostrar filtros em um<\/strong> \u00a0formul\u00e1rio acima da tabela”\u00a0<\/strong> na guia ” Classifica\u00e7\u00e3o e filtragem<\/strong> ” nas configura\u00e7\u00f5es da tabela e, em seguida, configuramos os filtros avan\u00e7ados\u00a0<\/a> para cada coluna. Para a coluna Per\u00edodo, definimos ‘Filtro de caixa de sele\u00e7\u00e3o’ e ‘Filtro de n\u00famero’ para todas as outras colunas.<\/p>\n Em seguida, ativamos a op\u00e7\u00e3o “Responsividade”<\/strong> na\u00a0 guia “Exibir”<\/strong> nas configura\u00e7\u00f5es da tabela e ocultamos valores como as colunas “M\u00eas” para tablets e dispositivos m\u00f3veis em cada configura\u00e7\u00e3o de coluna\u00a0<\/a> ou mais rapidamente no bot\u00e3o Lista de colunas\u00a0<\/a> acima da tabela.<\/p>\n Para personalizar a paleta de cores dos dados da tabela de maneira f\u00e1cil e intuitiva, estamos usando a formata\u00e7\u00e3o condicional<\/a>. Para a primeira coluna, definimos a condi\u00e7\u00e3o de que, se a c\u00e9lula contiver 2, ent\u00e3o “Definir classe CSS da c\u00e9lula<\/strong> ” para “texto azul-branco” para que tenhamos uma cor de fonte branca sobre o fundo azul.<\/p>\n Em seguida, criamos essas classes no campo “CSS<\/strong> personalizado” na guia “Personalizar”<\/strong> nas configura\u00e7\u00f5es da tabela como esta:<\/p>\n Assim:<\/p>\n Onde o n\u00famero 1 em .wpDataTable-1 \u00e9 o ID da sua tabela, ent\u00e3o voc\u00ea precisar\u00e1 alter\u00e1-lo para sua tabela<\/p>\n Para todas as outras colunas, definimos as mesmas condi\u00e7\u00f5es para definir cores diferentes com base no valor na tabela de temperatura m\u00e1xima.<\/p>\n Para a segunda tabela “Low Temperature” usamos a mesma abordagem da tabela “Temperature Maximus”, exceto as condi\u00e7\u00f5es na formata\u00e7\u00e3o Condicional. Por ser um valor de temperatura mais baixo, usamos essas condi\u00e7\u00f5es.<\/p>\n Em seguida, criamos essas classes no campo “CSS<\/strong> personalizado” na guia “Personalizar”<\/strong> nas configura\u00e7\u00f5es da tabela como esta:<\/p>\n Onde o n\u00famero 2 em .wpDataTable2 \u00e9 o ID de sua tabela, ent\u00e3o voc\u00ea precisar\u00e1 alter\u00e1-lo para sua tabela.<\/p>\n \u00c9 isso!<\/p>\n Agora voc\u00ea tem um mapa de calor de tabela onde pode comparar valores de dados facilmente sem parecer que est\u00e1 lendo as letras mi\u00fadas de um contrato.<\/p>\n Se essa foi uma maneira f\u00e1cil e intuitiva de criar mapas de calor em uma tabela, confira a pr\u00f3xima parte.<\/p>\n Agora o que voc\u00ea precisa fazer \u00e9 aparecer em suas p\u00e1ginas no front-end. Como em qualquer outro plugin, usamos c\u00f3digos de acesso para mostrar tabelas nas p\u00e1ginas ou postagens dos usu\u00e1rios.\u00a0Adicionar<\/a> \u00a0c\u00f3digos\u00a0<\/a> de acesso \u00e9 muito f\u00e1cil, especialmente se voc\u00ea estiver usando construtores de p\u00e1ginas populares como Elementor, WP Bakery ou Gutenberg.<\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Origem da imagem<\/a><\/p>\n Se voc\u00ea gostou de ler este artigo sobre como criar uma tabela de mapa de calor com wpDataTables, confira este artigo sobre como criar uma tabela<\/a>.<\/p>\n Tamb\u00e9m escrevemos sobre alguns assuntos relacionados, como alternativas de DataTables<\/a>, bibliotecas de tabelas JavaScript<\/a>, como criar uma tabela de uma tabela de pesquisa<\/a> e plugins de tabela de pre\u00e7os do WordPress .<\/a><\/p>\n![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86807bd8a1.jpg\")
<\/a><\/p>\nComo criar uma tabela de mapa de calor com wpDataTables<\/h2>\n
1 Criando uma tabela do zero<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680925c5c.png\")
<\/a><\/p>\n![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680b280c6.png\")
<\/a><\/p>\n2 Criando um mapa de calor de tabela a partir de uma fonte de dados<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680ea4280.png\")
<\/a><\/p>\n\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868107aa5d.png\")
<\/a><\/p>\n![\"Exemplos](\"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![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868134e7ef.jpg\")
<\/a><\/p>\n![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868145dee1.png\")
<\/a><\/p>\n![\"Exemplos](\"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>\nExemplos de mapa de calor de tabela<\/h2>\n
Aplicativo de engajamento de funcion\u00e1rios<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86817cf2ce.jpg\")
<\/a><\/p>\nMapa de calor<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681906078.jpg\")
<\/a><\/p>\nPlataforma de aprendizagem<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681a5c4bd.jpg\")
<\/a><\/p>\nMapa de Calor da Polui\u00e7\u00e3o do Ar<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681b877d1.jpg\")
<\/a><\/p>\nTemperaturas m\u00e9dias para cidades selecionadas na Am\u00e9rica do Norte<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681caeb85.jpg\")
<\/a><\/p>\nProgn\u00f3sticos da Copa do Mundo Feminina 2019<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681dbe6da.jpg\")
<\/a><\/p>\nTabela de preval\u00eancia<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681ecb3cb.jpg\")
<\/a><\/p>\nDevolu\u00e7\u00f5es de a\u00e7\u00f5es<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681fcb83a.jpg\")
<\/a><\/p>\nEstat\u00edsticas de receita do produto<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682136f1f.jpg\")
<\/a><\/p>\nTabela de equipes<\/h3>\n
![\"Exemplos](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682270202.jpg\")
<\/a><\/p>\n