Support Centre

Pesquisa

Adicione um gráfico de estatísticas (stat) ao seu design acessível

Renée Meloche
Renée Meloche
  • Atualizado

Um  gráfico estatístico (estatística)  é uma ótima maneira de exibir  um ponto de dados simples  , como uma porcentagem ou um valor numérico, combinando esse número e uma representação visual como uma série de ícones ou gráficos simples como um donut, meio donut ou barra de progresso . 

Uma visão parcial de uma tela em branco no Venngage Editor atualizado. Na barra lateral esquerda, a ferramenta Gráficos é expandida em um painel que aparece parcialmente no quadro à esquerda, exibindo uma galeria de gráficos que um usuário pode adicionar à tela de design. Sob o título Stat, há quatro opções de gráfico: Donut Stat, Half-Donut Stat, Progress Bar Stat e Icon Stat. Um usuário clica em cada um desses gráficos na barra lateral esquerda, um de cada vez, adicionando-os à tela de design e redimensionando-os para que fiquem organizados em uma grade solta.

A Venngage facilita a adição de  gráficos estatísticos acessíveis  ao seu design!

Adicione um gráfico de estatísticas à tela de design

Crie um modelo acessível  no Editor atualizado.

Selecione ou clique em  Gráficos   na barra lateral esquerda. Sob o título "  Stat  ", escolha um tipo de gráfico:   donut  ,   half-donut  ,   barra de progresso   ou   ícone   stat. Clique no gráfico para adicioná-lo à tela.

No Venngage Editor atualizado, um slide de apresentação aparece na área da tela de design. O slide tem alguns elementos como uma borda decorativa na parte inferior e um pequeno parágrafo de texto à esquerda com o título 'Exemplo 3'. Um usuário clica em 'Gráficos' na barra lateral esquerda do Editor, expandindo o painel da galeria e empurrando a tela de design mais para a esquerda. Sob o título Gráficos estatísticos no painel, várias opções de gráfico estão visíveis; o usuário clica em Icon Stat e adiciona um gráfico de Icon Stat à tela. Ele aparece, por padrão, como um gráfico com a porcentagem de 67% no lado esquerdo e uma linha de 10 ícones em duas cores contrastantes: um azul escuro representando 67% e um azul claro representando os 53% restantes.

Personalize a aparência do gráfico

Os gráficos de estatísticas de ícones podem ser personalizados para se adequarem à sua marca ou tema de design, com ferramentas de cor, fonte, espaçamento e ícone. 

Use a ferramenta de seleção para redimensionar e reposicionar o gráfico de estatísticas em sua tela, com os controles da caixa delimitadora. 

No Venngage Editor atualizado, um slide de apresentação é parcialmente visível na área da tela de design. O slide tem um gráfico de estatísticas de ícone azul e alguns outros elementos, como uma borda decorativa na parte inferior e um pequeno parágrafo de texto à esquerda. O gráfico de estatísticas de ícones exibe a porcentagem de 67% no lado esquerdo e uma linha de 10 ícones (silhuetas simples de uma cabeça e ombros) em duas cores contrastantes: um azul escuro representando 67% e um azul claro representando os 53 restantes %. Um usuário clica no gráfico de estatísticas para reposicioná-lo na tela, à direita do parágrafo de texto e, em seguida, usa a caixa delimitadora para redimensioná-lo. Usando o nó central no lado direito da caixa, o usuário torna o gráfico mais estreito; isso resulta na reorganização dos ícones, de uma única linha de 10 para duas linhas.

Valor

Altere o   valor   do gráfico de estatísticas e como o gráfico ou os ícones são exibidos. Selecione o  valor numérico  (a porcentagem) no gráfico de estatísticas. Digite a porcentagem desejada no campo "  Valor  " na barra de ferramentas superior.

Total de Itens

Altere o  número de ícones  que aparecem em um  gráfico  de estatísticas de ícones  para representar o valor. Por exemplo, você pode exibir o valor "75%" com 4 ícones totais ou 50, alterando a escala do gráfico.

Uma visão parcial de uma cana no Venngage Editor atualizado mostra um design com fundo branco e um gráfico de estatísticas de ícones na tela. O gráfico exibe o número 75% e 100 ícones de maçãs, em 8 linhas de 13 (a última linha com 9 ícones). Desses, 75 dos ícones de maçã são vermelhos; 25 dos ícones são verdes. Com o gráfico selecionado, o usuário clica no campo de texto Chart Value na barra de ferramentas superior, onde aparece o valor 75%. O usuário digita 50% no campo de texto e, em seguida, clica no campo de texto Total de itens ao lado dele na barra de ferramentas superior. Um menu suspenso aparece com seleções de números, mas o usuário digita no próprio campo de texto e altera o número 100 para 2. Na tela de design, o gráfico de estatísticas de ícones agora exibe o número 50% e dois ícones de maçã, um dos quais é vermelho, o outro verde. O usuário clica novamente no campo Valor do gráfico e o altera novamente para 75%, que aparece ao lado do gráfico na tela e faz com que os ícones da maçã mudem novamente; um é vermelho e o segundo agora é meio vermelho, meio verde. O usuário altera o número Total de itens para 4; quatro ícones de maçã agora aparecem no gráfico, os 3 primeiros são vermelhos e o quarto é verde. O usuário clica novamente em Chart Value e altera o número para 89%; esse novo número aparece ao lado do gráfico na tela. O usuário clica em Total de itens e escolhe o número '50' no menu suspenso que aparece ao clicar no campo de texto; os ícones de maçã no gráfico na tela mudam novamente, desta vez aparecendo em quatro linhas de 13 (a última linha com 11 ícones, os últimos 6 e meio dos quais são verdes). que aparece ao lado do gráfico na tela e faz com que os ícones da maçã mudem novamente; um é vermelho e o segundo agora é meio vermelho, meio verde. O usuário altera o número Total de itens para 4; quatro ícones de maçã agora aparecem no gráfico, os 3 primeiros são vermelhos e o quarto é verde. O usuário clica novamente em Chart Value e altera o número para 89%; esse novo número aparece ao lado do gráfico na tela. O usuário clica em Total de itens e escolhe o número '50' no menu suspenso que aparece ao clicar no campo de texto; os ícones de maçã no gráfico na tela mudam novamente, desta vez aparecendo em quatro linhas de 13 (a última linha com 11 ícones, os últimos 6 e meio dos quais são verdes). que aparece ao lado do gráfico na tela e faz com que os ícones da maçã mudem novamente; um é vermelho e o segundo agora é meio vermelho, meio verde. O usuário altera o número Total de itens para 4; quatro ícones de maçã agora aparecem no gráfico, os 3 primeiros são vermelhos e o quarto é verde. O usuário clica novamente em Chart Value e altera o número para 89%; esse novo número aparece ao lado do gráfico na tela. O usuário clica em Total de itens e escolhe o número '50' no menu suspenso que aparece ao clicar no campo de texto; os ícones de maçã no gráfico na tela mudam novamente, desta vez aparecendo em quatro linhas de 13 (a última linha com 11 ícones, os últimos 6 e meio dos quais são verdes). O usuário altera o número Total de itens para 4; quatro ícones de maçã agora aparecem no gráfico, os 3 primeiros são vermelhos e o quarto é verde. O usuário clica novamente em Chart Value e altera o número para 89%; esse novo número aparece ao lado do gráfico na tela. O usuário clica em Total de itens e escolhe o número '50' no menu suspenso que aparece ao clicar no campo de texto; os ícones de maçã no gráfico na tela mudam novamente, desta vez aparecendo em quatro linhas de 13 (a última linha com 11 ícones, os últimos 6 e meio dos quais são verdes). O usuário altera o número Total de itens para 4; quatro ícones de maçã agora aparecem no gráfico, os 3 primeiros são vermelhos e o quarto é verde. O usuário clica novamente em Chart Value e altera o número para 89%; esse novo número aparece ao lado do gráfico na tela. O usuário clica em Total de itens e escolhe o número '50' no menu suspenso que aparece ao clicar no campo de texto; os ícones de maçã no gráfico na tela mudam novamente, desta vez aparecendo em quatro linhas de 13 (a última linha com 11 ícones, os últimos 6 e meio dos quais são verdes). O usuário clica em Total de itens e escolhe o número '50' no menu suspenso que aparece ao clicar no campo de texto; os ícones de maçã no gráfico na tela mudam novamente, desta vez aparecendo em quatro linhas de 13 (a última linha com 11 ícones, os últimos 6 e meio dos quais são verdes). O usuário clica em Total de itens e escolhe o número '50' no menu suspenso que aparece ao clicar no campo de texto; os ícones de maçã no gráfico na tela mudam novamente, desta vez aparecendo em quatro linhas de 13 (a última linha com 11 ícones, os últimos 6 e meio dos quais são verdes).

Espaçamento, Arredondamento de Canto, Altura da Barra, Buraco do Donut

Diferentes gráficos têm diferentes opções de personalização. 

Altere a disposição das  linhas e colunas  em um gráfico de estatísticas de ícones simplesmente redimensionando-o. A quantidade de ícones que aparecem em uma linha ou coluna dependerá do tamanho do gráfico, bem como do tamanho dos ícones, sem alterar seu Value ou Total Items  . Uma visão parcial de uma tela de design branca no Venngage Editor atualizado, com um gráfico de estatísticas de ícones na parte superior. O gráfico de estatísticas exibe a porcentagem de 34% e uma única linha de 10 ícones de maçã; as três primeiras maçãs são vermelhas; a quarta maçã é parcialmente vermelha e 3/4 verde, e os ícones restantes são verdes. Um usuário altera o valor do gráfico para 76% e o total de itens para 50 na barra de ferramentas superior; as alterações no gráfico são visíveis na tela. O gráfico agora aparece com 4 linhas de ícones de maçã; as três primeiras linhas têm 13 ícones e a linha inferior tem 11. Os ícones de maçã são vermelhos, até o último ícone de maçã na quarta linha, que é totalmente verde; e os 11 ícones de maçã na última linha são verdes. O usuário clica no gráfico para selecioná-lo e usa a caixa delimitadora para redimensionar o gráfico, resultando na alteração da disposição das linhas e colunas do gráfico. Quando o usuário termina, o gráfico tem 7 linhas, com 8 ícones em cada uma, exceto a última linha que tem 2. As maçãs verdes começam na 5ª linha, com as duas últimas maçãs agora verdes, e as duas últimas linhas feitas de maçãs inteiramente verdes.

 

Selecione um  gráfico de barra de progresso  e use o controle deslizante para calibrar o  espaçamento vertical  entre a barra e o texto do número.

Uma visão parcial de uma tela de design no Venngage Editor atualizado, onde vários gráficos de estatísticas são visíveis no canto superior esquerdo da página. Um usuário seleciona o gráfico de barra de progresso na parte inferior da página de design e, em seguida, seleciona a ferramenta Espaçamento vertical que fica disponível na barra de ferramentas superior. Através do controle deslizante que se abre em um widget quando o usuário clica na ferramenta, o usuário altera o espaçamento entre o texto que aparece sobre o gráfico de barras (neste caso, 38%) e o próprio gráfico de barras. O usuário então fecha a ferramenta e expande o gráfico, redimensionando-o para deixar o espaço mais visível.

Altere o   arredondamento dos cantos   para reto ou arredondado usando o controle deslizante nos gráficos  de rosca  ,  meia rosca   e   barra de progresso   . 

Uma visão parcial de uma tela de design no Venngage Editor atualizado, onde vários gráficos de estatísticas são visíveis no canto superior esquerdo da página. Um usuário seleciona o gráfico de barra de progresso na parte inferior da página de design e, em seguida, seleciona a ferramenta Arredondamento de canto na barra de ferramentas superior. Usando o controle deslizante que se abre em um widget quando o usuário clica na ferramenta, o usuário altera o arredondamento na parte mais escura da barra de progresso, tornando os cantos mais ou menos arredondados.

O tamanho do orifício do anel   determina a largura do  gráfico  de anel   ou   meio anel   conforme aparece no gráfico de estatísticas. Use o controle deslizante para aumentar ou diminuir a largura.

Uma visão parcial de uma tela de design no Venngage Editor atualizado, onde vários gráficos de estatísticas são visíveis no canto superior esquerdo da página. Um usuário seleciona o gráfico de meio anel no canto superior direito da página de design e, em seguida, seleciona a ferramenta Donut Hole na barra de ferramentas superior. Usando o controle deslizante que se abre em um widget quando o usuário clica na ferramenta, o usuário altera a largura do gráfico de meia rosca, tornando-o menor ou maior; ao mesmo tempo, o valor percentual é exibido em texto maior ou menor para compensar o tamanho do gráfico.

Use a ferramenta "  Altura da barra  " para aumentar ou diminuir a largura da barra em  gráficos de barra de progresso  da mesma maneira.

Um close-up da barra de ferramentas superior no Editor atualizado, onde a ferramenta Altura da barra está selecionada e o widget está aberto, exibindo um controle deslizante igual ao que aparece no widget da ferramenta Donut Hole para gráficos de estatísticas Donut e Half-Donut .

Alterar tipo de gráfico

Mude facilmente o tipo de gráfico na barra de ferramentas superior. 

Selecione o gráfico. Clique ou selecione o  menu  Tipo de gráfico   na barra de ferramentas superior; selecione um tipo de gráfico diferente no menu suspenso. O tipo de gráfico será atualizado na tela de design. 

Uma visão parcial de uma tela branca no Venngage Editor atualizado mostra um design com fundo branco e três gráficos estatísticos agrupados no lado esquerdo da página. Um usuário seleciona o gráfico inferior, um gráfico de barras de progresso que aparece nas cores padrão azul escuro e azul claro, com o número 38%. Na barra de ferramentas superior, um menu suspenso para Tipo de gráfico é exibido e o usuário clica nele, selecionando Gráfico de ícone. Na tela, o gráfico de barras de progresso muda para um gráfico de ícones, com uma única linha de ícones de silhueta simples (cabeça e ombros) e a mesma porcentagem. O usuário clica novamente no menu suspenso Tipo de gráfico no menu superior e seleciona Gráfico de meio anel, alterando o gráfico na tela de design para meio anel e os mesmos 38%. O usuário clica no gráfico do menu superior novamente e altera o gráfico de volta para uma barra de progresso.

Edite a cor, o texto ou o ícone do gráfico

Cor

Altere a cor dos ícones ou do texto que aparece no gráfico de estatísticas clicando (ou Tab-Barra de espaço para selecionar) nessa parte do gráfico.

As   cores de preenchimento   são as cores no gráfico ou nos ícones do gráfico.  A cor de preenchimento 1   sempre representa a  porcentagem de valor do gráfico  . 

Clique em   Cor de preenchimento   ou   Cor da fonte   para abrir o widget Ferramenta de cores. Selecione as cores do projeto ou do kit de marca clicando nos círculos de amostra de cores abaixo ou use o seletor de cores na parte inferior do widget para selecionar uma cor personalizada. 

A parte inferior do widget indicará se suas opções de cores atendem  aos padrões de contraste  . 

No Venngage Editor atualizado, um slide de apresentação é parcialmente visível na área da tela de design. O slide tem um gráfico de estatísticas de ícone azul e alguns outros elementos, como uma borda decorativa na parte inferior e um pequeno parágrafo de texto à esquerda. O gráfico de estatísticas de ícones exibe a porcentagem de 63% e duas linhas de ícones (silhuetas simples de uma cabeça e ombros). A linha superior tem 6 ícones e a linha inferior tem 4; os ícones aparecem em duas cores contrastantes: um azul escuro representando os 63% e um azul claro representando os 57% restantes. Na linha inferior, o primeiro ícone é parcialmente azul escuro. O gráfico é selecionado e as ferramentas aparecem na barra de ferramentas superior acima da tela, incluindo uma ferramenta Cor da fonte. O usuário clica em Cor da fonte na barra de ferramentas superior e escolhe uma cor verde-escuro nos ladrilhos que aparecem sob o título Cores do projeto. O usuário então clica nos ícones do gráfico na tela e um conjunto diferente de ferramentas aparece na barra de ferramentas superior. O usuário clica no primeiro ladrilho de cor, Cor de preenchimento 1, que aparece com o mesmo azul escuro dos ícones no gráfico. Nos ladrilhos Project Color no widget Color Tool que é aberto, o usuário seleciona um azul-petróleo médio e, em seguida, fecha a ferramenta Fill Color 1 clicando no ladrilho Fill Color 2 próximo a ele na barra de ferramentas superior. O usuário seleciona cores vermelhas brilhantes nos blocos em Cores do projeto que aparecem no widget Ferramenta de cores. O usuário fecha a ferramenta Color e clica Nos ladrilhos Project Color no widget Color Tool que é aberto, o usuário seleciona um azul-petróleo médio e, em seguida, fecha a ferramenta Fill Color 1 clicando no ladrilho Fill Color 2 próximo a ele na barra de ferramentas superior. O usuário seleciona cores vermelhas brilhantes nos blocos em Cores do projeto que aparecem no widget Ferramenta de cores. O usuário fecha a ferramenta Color e clica Nos ladrilhos Project Color no widget Color Tool que é aberto, o usuário seleciona um azul-petróleo médio e, em seguida, fecha a ferramenta Fill Color 1 clicando no ladrilho Fill Color 2 próximo a ele na barra de ferramentas superior. O usuário seleciona cores vermelhas brilhantes nos blocos em Cores do projeto que aparecem no widget Ferramenta de cores. O usuário fecha a ferramenta Color e clica

Fonte

Clique na porcentagem de valor do gráfico (ou use Tab-Barra de espaço para selecionar) como aparece, dependendo do tipo de gráfico. 

Use a barra de ferramentas superior para personalizar a aparência do texto:

  • Clique ou selecione  Cor da fonte   para abrir o widget Ferramenta de cores e altere a cor do texto, independentemente do restante do gráfico
  • Clique ou selecione  Família de fonte  para abrir o menu suspenso e selecione uma face de fonte diferente
  • Use os  botões  +  e  -  ou digite o tamanho da fonte no campo  Tamanho do texto  para alterá-lo (  NOTA  : No momento, o tamanho do texto é personalizável apenas nos gráficos  Progresso  e  Estatísticas de ícones  ; o tamanho do texto nos gráficos  Donut  e  Half-donut  mudará proporcionalmente ao redimensionar o gráfico usando a caixa delimitadora).
  • Estilize a fonte com   Negrito  ,  Itálico  e  Sublinhado  

Em uma visão parcial de uma tela de design branca no Venngage Editor atualizado, três gráficos de estatísticas são visíveis. O gráfico inferior exibe 38% em texto grande sobre um gráfico de barras, em azul claro e escuro padrão. Um usuário clica na parte '38%' do gráfico de progresso. Um conjunto de ferramentas para personalizar o texto aparece na barra de ferramentas superior. O usuário clica no ícone Font Color na barra de ferramentas superior e altera a cor do texto para um verde brilhante. O usuário então clica no menu suspenso Família da fonte e seleciona a face da fonte Cabin, alterando a aparência da porcentagem. Usando o botão menos à esquerda do tamanho do texto, o usuário altera o tamanho do texto de 91 para 88px. Em seguida, o usuário clica em Negrito, Itálico e Sublinhado para estilizar o texto.

Ícones

Altere o ícone em um   gráfico de estatísticas de ícones  trocando-o por qualquer ícone monocromático em nossa galeria. 

Clique duas vezes nos ícones no Icon Stat Chart na tela de design ou selecione o Icon Stat Chart e clique em "  Replace  " na barra de ferramentas superior para abrir o painel  Icon Replace  na barra lateral esquerda.

Clique em um pacote de ícones para navegar pelas miniaturas dos ícones ou insira um termo de pesquisa específico na barra de pesquisa superior. Selecione um ícone da galeria e ele mudará no gráfico na tela. 

No Venngage Editor atualizado, um slide de apresentação aparece na área da tela de design. O slide tem alguns elementos como uma borda decorativa na parte inferior e um pequeno parágrafo de texto à esquerda com o título 'Exemplo 3'. À direita do slide há um gráfico de estatísticas de ícones, com 7 linhas de seis ícones (silhuetas simples de pessoas mostrando apenas cabeças e ombros). As primeiras cinco linhas de ícones são azul-petróleo médio, com a sexta linha exibindo o primeiro ícone em azul-petróleo médio, depois o segundo ícone meio azul-petróleo, meio vermelho brilhante e o restante dos ícones em vermelho brilhante. Um usuário clica no gráfico de ícones para selecioná-lo e, em seguida, clica em Substituir na barra de ferramentas superior, abrindo o painel Substituir ícone na barra lateral esquerda. Um pacote de ícones monocoloridos é exibido em miniaturas no painel; o usuário digita 'exame' na barra de pesquisa na parte superior do painel e retorna os resultados, incluindo ícones de papéis, marcas de seleção, tampas de diploma, etc. O usuário seleciona a partir dos ícones na galeria; quando o usuário clica em um ícone da galeria no painel Icon Replace, ele substitui os ícones no gráfico de estatísticas na tela de design.

Adicionar texto alternativo ao seu gráfico 

Descreva gráficos estatísticos que aparecem em sua tela de design para  usuários com deficiência visual ou leitores com outras necessidades de acessibilidade  .

Selecione o gráfico  . Clique em "  Alt Text  " na barra de ferramentas superior; adicione seu texto descritivo. Uma descrição simples, para que o usuário saiba como o gráfico aparece e a estatística que ele representa, é perfeita. aqui estão alguns exemplos: 

  • Um gráfico de ícones estatísticos, com o valor '63%' e uma grade de 9 linhas e 6 colunas de ícones representando limites de diploma. Começando no canto superior esquerdo e continuando da esquerda para a direita e para baixo, 63% dos ícones são verdes. Os 37% restantes dos ícones, continuando da metade até a penúltima linha, são vermelhos. 
  • Um gráfico estatístico de meia rosca com o valor de 55%. A primeira parte da meia rosquinha é roxa escura, representando 55%; o restante do donut é roxo claro. 
  • Um gráfico de barra de progresso estatístico com o valor de 90%, onde a porcentagem é escrita em letras marrons grandes e escuras. Abaixo dele, o gráfico de barras é quase todo vermelho; a extremidade esquerda da barra é rosa pálido. 

Esse artigo foi útil?

Usuários que acharam isso útil: 0 de 0

Tem mais dúvidas? Envie uma solicitação