Entendendo os widgets gr\u00e1ficos no WordPress<\/h2>\n
Os sites (inclusive os que usam WordPress) utilizam dois tipos de widgets<\/a>: gr\u00e1ficos e baseados em texto. Os widgets de texto t\u00edpicos podem ser cativantes, mas os widgets gr\u00e1ficos exibem informa\u00e7\u00f5es em um formato mais atraente.<\/p>\n Esses widgets ter\u00e3o componentes din\u00e2micos que usam diferentes representa\u00e7\u00f5es visuais, como tabelas, gr\u00e1ficos, mapas e barras de progresso, para que voc\u00ea possa transmitir informa\u00e7\u00f5es complexas em um relance. Isso pode ajud\u00e1-lo a se comunicar melhor com seus leitores, o que, por sua vez, os ajuda a compreender e interpretar seus dados rapidamente. Isso tamb\u00e9m pode melhorar o engajamento e a reten\u00e7\u00e3o do usu\u00e1rio.<\/p>\n Embora existam diferentes maneiras de apresentar seus dados, os widgets gr\u00e1ficos t\u00eam alguns elementos em comum:<\/p>\n No entanto, os widgets gr\u00e1ficos n\u00e3o servem apenas para dar um toque visual ao seu site. Eles s\u00e3o uma grande parte da visualiza\u00e7\u00e3o e da intera\u00e7\u00e3o com seus dados brutos.<\/p>\n H\u00e1 muitos benef\u00edcios em usar gr\u00e1ficos para transmitir uma mensagem. De modo geral, o conte\u00fado visual \u00e9 um grande neg\u00f3cio, muito importante para o marketing on-line<\/a>.<\/p>\n Para voc\u00ea e seus dados, h\u00e1 muitos outros aspectos positivos a serem observados:<\/p>\n Informa\u00e7\u00f5es visuais geralmente t\u00eam vantagem sobre texto em qualquer campo, o que significa que voc\u00ea pode apresentar os principais pontos dos dados de uma forma que os fa\u00e7a “grudar”. Por isso, us\u00e1-los da maneira correta em seu site \u00e9 uma prioridade m\u00e1xima.<\/p>\n O excesso de uma coisa boa se tornar\u00e1 repetitivo, saturado. Isso significa que voc\u00ea deve usar os widgets gr\u00e1ficos com cuidado e aten\u00e7\u00e3o.<\/p>\n A boa not\u00edcia \u00e9 que h\u00e1 muitas situa\u00e7\u00f5es em que voc\u00ea pode usar widgets gr\u00e1ficos. O momento mais evidente para usar gr\u00e1ficos \u00e9 quando voc\u00ea precisa simplificar conceitos complexos para os seus leitores. No entanto, h\u00e1 outros casos de nicho:<\/p>\n Voc\u00ea pode at\u00e9 usar widgets gr\u00e1ficos quando precisar da intera\u00e7\u00e3o do usu\u00e1rio, como em relat\u00f3rios din\u00e2micos<\/a> ou outros pain\u00e9is. A chave \u00e9 decidir se a exibi\u00e7\u00e3o visual dos seus dados aumentar\u00e1 a compreens\u00e3o e o engajamento em rela\u00e7\u00e3o a outras abordagens.<\/p>\n Em suma, se o formato visual agregar valor e clareza aos seus dados, \u00e9 prov\u00e1vel que voc\u00ea se adapte bem a um widget gr\u00e1fico.<\/p>\n A visualiza\u00e7\u00e3o de dados em si vem em v\u00e1rias formas, e cada tipo de exibi\u00e7\u00e3o atender\u00e1 a diferentes necessidades de dados e apresenta\u00e7\u00e3o. N\u00e3o abordaremos aqui os detalhes de cada forma de apresenta\u00e7\u00e3o de dados, embora existam algumas op\u00e7\u00f5es t\u00edpicas e de destaque que voc\u00ea deve observar.<\/p>\n Gr\u00e1ficos t\u00edpicos, como gr\u00e1ficos de barras, de pizza, de linhas e de \u00e1rea, s\u00e3o sempre uma boa op\u00e7\u00e3o para a visualiza\u00e7\u00e3o de dados. Estes s\u00e3o os elementos b\u00e1sicos da abordagem:<\/p>\n Os gr\u00e1ficos de dispers\u00e3o s\u00e3o um pouco mais complexos, mas permitem que voc\u00ea mostre a rela\u00e7\u00e3o entre duas vari\u00e1veis:<\/p>\n Mapas<\/a> podem ser apresentados de v\u00e1rias formas. Mapas de calor<\/a> t\u00eam casos de uso espec\u00edficos, mas usam gradientes de cores para exibir a intensidade dos conjuntos de dados. Um mapa-m\u00fandi interativo pode ser bom quando voc\u00ea precisa de interatividade com base em locais:<\/p>\n Contadores e barras de progresso s\u00e3o mais adequados para o atingimento de metas. Aqui, voc\u00ea recorrer\u00e1 a contadores de n\u00fameros que usam contagem din\u00e2mica at\u00e9 um valor final. As barras de progresso circulares podem mostrar a porcentagem conclu\u00edda. Voc\u00ea tamb\u00e9m pode fazer isso com uma barra linear horizontal ou vertical:<\/p>\n At\u00e9 mesmo galerias de imagens<\/a>, lightboxes e controles deslizantes podem ajudar voc\u00ea a apresentar seus dados em v\u00e1rios slides, com sobreposi\u00e7\u00f5es ou quase como um evento orientado por uma narrativa. \u00c9 nesse ponto que as visualiza\u00e7\u00f5es de linha do tempo podem entrar em a\u00e7\u00e3o, assim como os fluxos de processo. Um tipo de visualiza\u00e7\u00e3o de dados que voc\u00ea ver\u00e1 muito em sites de tutoriais de fotografia \u00e9 a compara\u00e7\u00e3o “Antes\/Depois”.<\/p>\n Isso permite comparar duas vers\u00f5es de uma imagem usando um controle deslizante din\u00e2mico que se arrasta pela imagem, revelando a outra. Talvez voc\u00ea n\u00e3o veja muita utilidade para seus casos de uso, mas lembre-se: todo tipo de visualiza\u00e7\u00e3o tem uma aplica\u00e7\u00e3o ideal.<\/p>\n O tipo de visualiza\u00e7\u00e3o que voc\u00ea usa \u00e9 importante, mas como voc\u00ea o usa (e onde) tamb\u00e9m \u00e9. Ou seja, h\u00e1 diferentes aplica\u00e7\u00f5es em que o uso de widgets gr\u00e1ficos trar\u00e1 grandes benef\u00edcios.<\/p>\n Voc\u00ea perceber\u00e1 que, al\u00e9m dos casos de uso t\u00edpicos, h\u00e1 tamb\u00e9m aplicativos que voc\u00ea v\u00ea com frequ\u00eancia, mas n\u00e3o associa \u00e0 visualiza\u00e7\u00e3o de dados. Nas pr\u00f3ximas se\u00e7\u00f5es, abordaremos alguns desses usos.<\/p>\n Uma das implementa\u00e7\u00f5es mais comuns de widgets gr\u00e1ficos \u00e9 basicamente mostrar suas principais m\u00e9tricas. Para as empresas, esse \u00e9 um excelente recurso em termos de apresenta\u00e7\u00e3o dos dados de forma atraente. Um gr\u00e1fico de barras \u00e9 f\u00e1cil de ler, com os valores corretos nos eixos, e ajuda a visualizar as tend\u00eancias de vendas ao longo do tempo ou a comparar diferentes produtos ou servi\u00e7os.<\/p>\n A Target<\/a> \u00e9 uma das milh\u00f5es de empresas que provavelmente usam isso para mostrar o crescimento da receita anual:<\/p>\n Isso tamb\u00e9m mostra como essas apresenta\u00e7\u00f5es simples podem ilustrar a rela\u00e7\u00e3o entre diferentes m\u00e9tricas, como o custo de aquisi\u00e7\u00e3o de clientes ou o valor da vida \u00fatil. Os gr\u00e1ficos de barras empilhadas tamb\u00e9m podem exibir esse tipo de compara\u00e7\u00e3o. O WordPress usa essa abordagem no Diret\u00f3rio de Plugins<\/a> para exibir o detalhamento da vers\u00e3o de um plugin que os usu\u00e1rios instalam:<\/p>\n Os gr\u00e1ficos de pizza e de rosca s\u00e3o \u00f3timos se uma empresa quiser mostrar dados sobre a sua base de clientes. Muitas vezes, isso ser\u00e1 segmentado por idade, local ou outro fator relevante. O Elementor<\/a> usa uma visualiza\u00e7\u00e3o de part\u00edculas interessante e exclusiva para destacar suas maiores bases de usu\u00e1rios:<\/p>\n Em outros casos, voc\u00ea pode optar por mostrar os marcos da empresa ou a progress\u00e3o do projeto. O Flourish<\/a> usa uma linha do tempo para mostrar sua hist\u00f3ria, o que pode ter um impacto na fidelidade \u00e0 marca:<\/p>\n Na verdade, o eCommerce \u00e9 executado paralelamente aos aplicativos de neg\u00f3cios em geral, ent\u00e3o tudo o que est\u00e1 aqui tamb\u00e9m pode ser aplicado a uma loja. Mesmo assim, h\u00e1 tamb\u00e9m maneiras espec\u00edficas como esse setor pode visualizar dados.<\/p>\n Decis\u00f5es de compra geralmente envolvem alguns segundos de delibera\u00e7\u00e3o<\/a>, e assim, \u00e9 fundamental que voc\u00ea forne\u00e7a as informa\u00e7\u00f5es corretas aos clientes rapidamente. As compara\u00e7\u00f5es de produtos usando gr\u00e1ficos de barras ou gr\u00e1ficos de radar ajudam voc\u00ea a comparar recursos ou especifica\u00e7\u00f5es de diferentes produtos, mas isso \u00e9 apenas o come\u00e7o.<\/p>\n Por exemplo, a SRFACE<\/a> usa um guia de estilo<\/a> interativo para explicar as especifica\u00e7\u00f5es de suas roupas de mergulho e visualizar o visual de cada variante:<\/p>\n Isso se aproxima de um aplicativo comercial, mas voc\u00ea tamb\u00e9m pode usar tabelas e gr\u00e1ficos para ajudar os visitantes a entender tend\u00eancias na ado\u00e7\u00e3o de produtos. O Diret\u00f3rio de Temas WordPress<\/a>\u00a0faz isso usando gr\u00e1ficos de barras:<\/p>\n Voc\u00ea pode instalar widgets gr\u00e1ficos em qualquer lugar onde, de outra forma, usaria texto. Por exemplo, muitas lojas de eCommerce usam texto simples e contrastante para c\u00e1lculos de estoque<\/a>. No entanto, as barras de progresso podem ser mais adequadas aqui, pois tamb\u00e9m podem aumentar a urg\u00eancia de uma venda.<\/p>\n As visualiza\u00e7\u00f5es em tempo real t\u00eam uma sensa\u00e7\u00e3o empolgante porque voc\u00ea v\u00ea uma progress\u00e3o ao vivo da m\u00e9trica rastreada. Institui\u00e7\u00f5es de caridade e organiza\u00e7\u00f5es sem fins lucrativos<\/a> usam esses tipos de widgets gr\u00e1ficos com frequ\u00eancia<\/span>.<\/p>\n A GoFundMe<\/a> \u00e9 a maior plataforma de crowdfunding do planeta, e todo arrecadador de fundos recebe um term\u00f4metro ou uma barra de rastreamento de progresso que se enche \u00e0 medida que a meta se aproxima:<\/p>\n Contadores animados ou infogr\u00e1ficos podem ajudar a mostrar o impacto em tempo real dos seus produtos e servi\u00e7os. Por exemplo, o site principal do WordPress.org<\/a> tem uma p\u00e1gina dedicada a exibir o n\u00famero de downloads da plataforma principal que \u00e9 atualizada a cada minuto:<\/p>\n A Kinsta<\/a> usa at\u00e9 mesmo um gr\u00e1fico de contagem para ajudar voc\u00ea a monitorar o tempo de atividade do seu site em nossos diferentes servi\u00e7os:<\/p>\n Essa estrat\u00e9gia de atualiza\u00e7\u00e3o “ao vivo” pode ter outras aplica\u00e7\u00f5es pr\u00e1ticas al\u00e9m da simples ostenta\u00e7\u00e3o e do estilo. Em alguns casos, voc\u00ea precisar\u00e1 ter conhecimento atualizado de determinadas m\u00e9tricas.<\/p>\n O monitoramento do desempenho tem um escopo amplo. Pode ser uma linha de frente, uma estrat\u00e9gia de medi\u00e7\u00e3o de KPI ou uma vis\u00e3o geral personalizada de uma determinada m\u00e9trica. O Google Analytics<\/a> \u00e9 um bom exemplo de exibi\u00e7\u00e3o de uma grande quantidade de dados de sites de nicho de uma forma cativante:<\/p>\n O aplicativo de auditoria do Google Lighthouse<\/a>, DeploymentHawk<\/a>, usa v\u00e1rios quadros, gr\u00e1ficos, contadores e outros para analisar os n\u00fameros e visualizar os resultados de um relat\u00f3rio:<\/p>\n A ferramenta APM (Application Performance Monitoring) da Kinsta<\/a>\u00a0e o painel MyKinsta<\/a> tamb\u00e9m fazem isso, usando v\u00e1rios tipos diferentes de visualiza\u00e7\u00e3o de dados, dependendo das m\u00e9tricas que voc\u00ea precisa ver:<\/p>\n A gamifica\u00e7\u00e3o sempre pode ajudar se voc\u00ea tiver metas de conclus\u00e3o a cumprir. O Todoist<\/a> faz isso usando gr\u00e1ficos b\u00e1sicos de barras e linhas junto com seu sistema de pontos de “karma”:<\/p>\n Por fim, algumas organiza\u00e7\u00f5es sem fins lucrativos divulgar\u00e3o suas descobertas internas. Isso cria uma dicotomia \u00fanica entre a apresenta\u00e7\u00e3o para o p\u00fablico e o uso de dados como um bar\u00f4metro interno. Por exemplo, a Funda\u00e7\u00e3o Gates<\/a> utiliza sua filosofia e vis\u00e3o internas, aplica-as ao futuro e, por sua vez, cria um excelente exemplo de estat\u00edstica preditiva:<\/p>\n Com essa flexibilidade de tipos de visualiza\u00e7\u00e3o e aplica\u00e7\u00e3o, voc\u00ea tamb\u00e9m pode aproveitar a adaptabilidade dos widgets gr\u00e1ficos. O restante deste artigo mostrar\u00e1 como voc\u00ea pode fazer isso no WordPress.<\/p>\n Obviamente, para implementar widgets gr\u00e1ficos no WordPress, voc\u00ea usar\u00e1 um plugin<\/a>. Nas pr\u00f3ximas se\u00e7\u00f5es, veremos algumas das melhores op\u00e7\u00f5es que voc\u00ea tem, sem nenhuma ordem espec\u00edfica.<\/p>\n O Visualizer<\/a> da ThemeIsle \u00e9 uma op\u00e7\u00e3o s\u00f3lida para plugins de widgets gr\u00e1ficos gratuitos. Oferece suporte a v\u00e1rios tipos de gr\u00e1ficos e \u00e9 f\u00e1cil de usar, assim como seus outros temas e plugins.<\/p>\n Ele oferece quatro tipos diferentes de gr\u00e1ficos, um editor de dados com uma interface semelhante a uma planilha e muitas op\u00e7\u00f5es de personaliza\u00e7\u00e3o. O plugin tamb\u00e9m se integra ao Google Charts<\/a> (e a outras APIs do Google). No entanto, embora esse plugin tenha funcionalidade completa, voc\u00ea precisa pagar pela vers\u00e3o premium (US$ 199 por ano) para acessar mais tipos de gr\u00e1ficos e edi\u00e7\u00e3o.<\/p>\n No entanto, a vers\u00e3o gratuita \u00e9 adequada para a maioria dos usu\u00e1rios, especialmente para a visualiza\u00e7\u00e3o de dados b\u00e1sica, que \u00e9 excelente.<\/p>\n \u00c0 primeira vista, o Data Tables Generator<\/a> n\u00e3o parece se encaixar nesta lista de plugins de widgets gr\u00e1ficos para WordPress. Afinal, como o pr\u00f3prio nome sugere, voc\u00ea s\u00f3 pode criar tabelas de dados de texto. Isso \u00e9 verdade para a vers\u00e3o gratuita, mas a edi\u00e7\u00e3o premium inclui muito mais funcionalidades, inclusive tabelas e gr\u00e1ficos.<\/p>\n A boa not\u00edcia \u00e9 que suas cria\u00e7\u00f5es podem ter um visual fant\u00e1stico e pronto para uso. Voc\u00ea tem todos os tipos de op\u00e7\u00f5es de visualiza\u00e7\u00e3o, como gr\u00e1ficos de barras e linhas, gr\u00e1ficos de rosca, gr\u00e1ficos de bolhas e outros. Tamb\u00e9m achamos que as op\u00e7\u00f5es de classifica\u00e7\u00e3o e filtragem s\u00e3o as melhores do setor.<\/p>\n Isso significa que o plugin ser\u00e1 uma \u00f3tima op\u00e7\u00e3o para sites que precisam de um alto n\u00edvel de interatividade, especialmente se tamb\u00e9m precisarem de tabelas de dados e representa\u00e7\u00f5es de dados mais visuais.<\/p>\n Apesar disso, n\u00e3o h\u00e1 tabelas ou gr\u00e1ficos dispon\u00edveis na vers\u00e3o gratuita. No entanto, com uma licen\u00e7a vital\u00edcia que custa US$ 89, o Data Tables Generator \u00e9 uma pechincha pela funcionalidade que voc\u00ea obt\u00e9m.<\/p>\n O plugin amCharts<\/a> \u00e9 \u00fanico, pois se conecta a um CDN (Content Delivery Network)<\/a> externo para fornecer sua biblioteca. Dessa forma, o plugin s\u00f3 ajuda voc\u00ea a conectar as bibliotecas JavaScript<\/a> ao WordPress, em vez de criar os gr\u00e1ficos diretamente.<\/p>\n A funcionalidade do amCharts \u00e9 extensa e vem com um alto n\u00edvel de personaliza\u00e7\u00e3o. No entanto, voc\u00ea precisa usar a interface do amCharts para criar seus widgets gr\u00e1ficos, o que significa alternar entre duas plataformas.<\/p>\n Se voc\u00ea precisa de um conjunto diversificado de tipos de gr\u00e1ficos e n\u00e3o se importa em usar a interface de terceiros, o amCharts pode ser ideal para voc\u00ea. Contudo, n\u00e3o h\u00e1 um plano gratuito para acessar tabelas ou gr\u00e1ficos, portanto voc\u00ea precisar\u00e1 de uma licen\u00e7a premium que custa a partir de US$ 80 por ano.<\/p>\n Se voc\u00ea usa o Elementor<\/a>, j\u00e1 tem algumas op\u00e7\u00f5es de widgets gr\u00e1ficos no construtor de p\u00e1ginas. No entanto, o Graphina<\/a> refor\u00e7a isso com muitos gr\u00e1ficos de qualidade, tabelas e outros tipos de visualiza\u00e7\u00e3o.<\/p>\n Esse plugin tem o maior n\u00famero de tipos e designs de gr\u00e1ficos em um plugin de widget gr\u00e1fico gratuito e tem profunda integra\u00e7\u00e3o com o Elementor e o Divi<\/a>. Voc\u00ea tamb\u00e9m tem algumas das op\u00e7\u00f5es de personaliza\u00e7\u00e3o mais abrangentes dispon\u00edveis em qualquer plugin, gratuito ou n\u00e3o.<\/p>\n Parece inacredit\u00e1vel, mas a vers\u00e3o premium amplia ainda mais a funcionalidade, tornando o Graphina o plugin de widget gr\u00e1fico mais detalhado para WordPress. \u00c9 claro que voc\u00ea precisar\u00e1 do Elementor (ou Divi) para aproveitar o conjunto de recursos, o que pode ser um obst\u00e1culo. No entanto, por US$ 49, pode valer a pena migrar para um desses construtores de p\u00e1ginas populares.<\/p>\n Assim como o Data Tables Generator, o wpDataTables<\/a> n\u00e3o tem como foco principal tabelas e gr\u00e1ficos. No entanto, voc\u00ea pode fazer isso com o plugin, e os resultados s\u00e3o de qualidade. Os sites que lidam com conjuntos de dados grandes e complexos devem dar uma olhada nesse plugin.<\/p>\n Como era de esperar, h\u00e1 mais op\u00e7\u00f5es para criar tabelas aqui, mas h\u00e1 integra\u00e7\u00e3o com o Google Charts e o Charts.js<\/a> para que voc\u00ea tenha 15 tipos diferentes de visualiza\u00e7\u00e3o. Pode lidar com grandes conjuntos de dados, e as op\u00e7\u00f5es de importa\u00e7\u00e3o de fontes s\u00e3o fant\u00e1sticas. Voc\u00ea pode trazer dados do Excel<\/a>, XML<\/a>, arquivos CSV, JSON e at\u00e9 mesmo arrays PHP se tiver experi\u00eancia em desenvolvimento.<\/p>\n Entretanto, devido ao foco secund\u00e1rio em gr\u00e1ficos, n\u00e3o \u00e9 t\u00e3o simples cri\u00e1-los com o wpDataTables. Essa curva de aprendizado, al\u00e9m da quantidade de funcionalidades ocultas por tr\u00e1s da edi\u00e7\u00e3o premium (a partir de US$ 39 por ano), pode fazer com que voc\u00ea procure outra op\u00e7\u00e3o.<\/p>\n O \u00faltimo plugin da nossa lista \u00e9 totalmente gratuito, sem nenhum n\u00edvel de pre\u00e7o premium. O Ninja Charts<\/a> pode ser a solu\u00e7\u00e3o certa se voc\u00ea for iniciante na visualiza\u00e7\u00e3o de dados, mas oferece a funcionalidade necess\u00e1ria para competir com os melhores.<\/p>\n Ele oferece uma grande variedade de tipos de gr\u00e1ficos e permite que voc\u00ea os personalize de acordo com suas necessidades. A interface \u00e9 simples e oferece profunda integra\u00e7\u00e3o com outro plugin do mesmo desenvolvedor, o Ninja Tables.<\/p>\n Mesmo assim, h\u00e1 limita\u00e7\u00f5es. Outros usu\u00e1rios reclamam<\/a> da falta de funcionalidades b\u00e1sicas, como a agrega\u00e7\u00e3o de dados, por exemplo. No entanto, voc\u00ea n\u00e3o consegue superar o pre\u00e7o, e ainda acreditamos que ele pode se adequar a muitos sites diferentes com o que oferece.<\/p>\n Vamos examinar rapidamente o processo de adi\u00e7\u00e3o de um widget gr\u00e1fico ao seu site WordPress. Usaremos o Visualizer, j\u00e1 que gostamos dele o suficiente para torn\u00e1-lo o nosso favorito.<\/p>\n Entretanto, este n\u00e3o \u00e9 um tutorial do Visualizer. Por isso, as etapas que seguimos aqui podem ser diferentes das da solu\u00e7\u00e3o que voc\u00ea escolheu. Com isso em mente, instale e ative<\/a> o plugin de sua prefer\u00eancia e crie um novo gr\u00e1fico ou diagrama.<\/p>\n No Visualizer, voc\u00ea tem essa op\u00e7\u00e3o na instala\u00e7\u00e3o:<\/p>\n Provavelmente, haver\u00e1 um bot\u00e3o Adicionar Novo Gr\u00e1fico <\/strong>em algum lugar do painel de administra\u00e7\u00e3o do plugin:<\/p>\n Depois de clicar no bot\u00e3o e selecionar o tipo de gr\u00e1fico, voc\u00ea precisar\u00e1 inserir seus dados. A vers\u00e3o gratuita do Visualizer s\u00f3 oferece suporte \u00e0 edi\u00e7\u00e3o manual, mas seu plugin pode oferecer integra\u00e7\u00f5es e op\u00e7\u00f5es de importa\u00e7\u00e3o para uma variedade de ferramentas<\/a>:<\/p>\n Em seguida, verifique as op\u00e7\u00f5es de personaliza\u00e7\u00e3o dispon\u00edveis para voc\u00ea. O Visualizer inclui essas op\u00e7\u00f5es na tela de cria\u00e7\u00e3o de gr\u00e1ficos. Voc\u00ea tem configura\u00e7\u00f5es para todos os tipos de aspectos, como a posi\u00e7\u00e3o do t\u00edtulo, r\u00f3tulos de eixo, linhas de grade, tamanho e posicionamento do gr\u00e1fico e muito mais:<\/p>\n A etapa final \u00e9 incorporar o gr\u00e1fico ao seu site. Muitos plugins usam shortcodes para isso, o que significa que voc\u00ea pode simplesmente copiar e colar na publica\u00e7\u00e3o ou na p\u00e1gina desejada:<\/p>\n O Visualizer tamb\u00e9m fornece um Bloco para isso, o que \u00e9 \u00fatil e em harmonia com o design moderno do WordPress.<\/p>\n \u00c9 importante considerar alguns aspectos ao apresentar seus gr\u00e1ficos e diagramas. Em resumo, trate-os como o conte\u00fado importante e impactante que s\u00e3o e procure limitar o n\u00famero de widgets que voc\u00ea exibe. Para se aprofundar mais, por\u00e9m, considere o seguinte:<\/p>\n Quando se trata de desempenho, voc\u00ea deve estar atento. H\u00e1 muitas facetas que podem afetar a velocidade do seu site, o que faz sentido, considerando a carga dos gr\u00e1ficos adicionais. Nossa recomenda\u00e7\u00e3o \u00e9 usar SVGs<\/a> sempre que poss\u00edvel. Eles s\u00e3o mais eficientes do que as imagens rasterizadas para gr\u00e1ficos e \u00edcones simples, com melhor escalabilidade.<\/p>\n O lazy loading<\/a> e o armazenamento em cache<\/a> tamb\u00e9m podem ajudar aqui, pois ambos restringem a forma como os gr\u00e1ficos s\u00e3o carregados de maneiras diferentes. Se voc\u00ea optar por extrair dados de fontes externas, certifique-se de escolher conex\u00f5es eficientes para minimizar o n\u00famero de solicita\u00e7\u00f5es HTTP<\/a> que voc\u00ea atende. A melhor e mais otimizada abordagem \u00e9 hospedar esses dados no servidor do seu site, embora voc\u00ea talvez n\u00e3o tenha controle sobre essa decis\u00e3o.<\/p>\n Os widgets gr\u00e1ficos para WordPress permitem visualizar dados t\u00edpicos de texto no seu site. Esse m\u00e9todo de apresenta\u00e7\u00e3o e visualiza\u00e7\u00e3o de dados pode transformar informa\u00e7\u00f5es complexas em um formato mais diger\u00edvel. Voc\u00ea pode exibir esses dados usando tabelas, gr\u00e1ficos, mapas interativos e outros.<\/p>\n O plugin certo para o trabalho \u00e9 crucial, e abordamos muitos deles neste artigo. O Visualizer \u00e9 uma \u00f3tima op\u00e7\u00e3o, assim como o Graphina. No entanto, a ferramenta correta para o trabalho depende das suas pr\u00f3prias necessidades. Sem d\u00favida, pode ter um impacto enorme e positivo em seu site e no engajamento.<\/p>\n Os widgets gr\u00e1ficos para WordPress s\u00e3o importantes o suficiente para que voc\u00ea os implemente? Gostar\u00edamos muito de saber o que voc\u00ea pensa na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":" Em muitas situa\u00e7\u00f5es, apresentar dados em um formato atraente e f\u00e1cil de digerir pode oferecer muitos benef\u00edcios. Os widgets gr\u00e1ficos para WordPress permitem que voc\u00ea transforme …<\/p>\n","protected":false},"author":199,"featured_media":69639,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1037,1033],"class_list":["post-69638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-dicas-wordpress","topic-plugins-wordpress"],"yoast_head":"\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/graphical-widget.png\")
\n
Por que os widgets gr\u00e1ficos podem ajudar na apresenta\u00e7\u00e3o de dados no site<\/h2>\n
\n
Quando usar widgets gr\u00e1ficos no seu site WordPress<\/h2>\n
\n
Os diferentes tipos de widgets gr\u00e1ficos para WordPress<\/h2>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/bar-chart.png\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/scatter-graph.png\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/wordcamp-map.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/wordpress-github.png\")
![\"Duas](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/before-after.png\")
Onde voc\u00ea usaria widgets gr\u00e1ficos (incluindo exemplos)<\/h2>\n
Aplicativos de neg\u00f3cios<\/h3>\n
![\"Infogr\u00e1fico](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/target-bar-charts.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/wordpress-bar-line-graph.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/elementor-motion.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/flourish-timeline.png\")
M\u00e9tricas de eCommerce<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/interactive-guide.gif\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/wordpress-theme-graph.png\")
Rastreamento de m\u00e9tricas em tempo real<\/h3>\n
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/gofundme-thermometer.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/wordpress-counter.gif\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/kinsta-tally-chart.png\")
An\u00e1lise interna<\/h3>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/google-analytics.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/deployment-counters.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/mykinsta-dashboard.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/todoist-gamification.png\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/gates-foundation-bar.png\")
Plugins que ajudam a exibir widgets gr\u00e1ficos para o WordPress<\/h2>\n
1. Visualizer: Gr\u00e1ficos e diagramas<\/h4>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/visualizer-header.png\")
2. Data Tables Generator da Supsystic<\/h4>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/data-tables-generator.png\")
3. amCharts: Gr\u00e1ficos e mapas<\/h4>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/amcharts-header.png\")
4. Graphina \u2014 Gr\u00e1ficos e tabelas do Elementor<\/h4>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/graphina-header.png\")
5. wpDataTables<\/h4>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/wp-data-tables.png\")
6. Ninja Charts<\/h4>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/ninja-charts.png\")
Como adicionar widgets gr\u00e1ficos ao WordPress usando o plugin Visualizer<\/h2>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/visualizer-wizard.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/add-new-chart.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/edit-data-chart.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/design-settings.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/chart-shortcode.png\")
Pr\u00e1ticas t\u00edpicas para a exibi\u00e7\u00e3o dos seus widgets gr\u00e1ficos<\/h3>\n
\n
Resumo<\/h2>\n