Ícones dinâmicos

Importante:embora os gráficos do Google (em inglês) dinâmicos e interativos sejam mantidos ativamente, descontinuamos oficialmente o recurso em 2012. Ele foi desativado em 18 de março de 2019.

Esta página descreve como criar uma variedade de frases de destaque, balões, alfinetes e outros elementos gráficos que podem ser criados usando um URL.

https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

1. Introdução
2. Sintaxe
3. Tipos de ícone
4. Balões
5. Alfinetes
6. Notas divertidas
7. Observações da previsão do tempo
8. Blocos de texto com fonte contornada (somente texto)
9. Blocos de texto com fonte contornada (texto + ícone)
10. Lista de sinalizações e ícones disponíveis
11. Strings de texto
12. Sombras

Introdução

É possível criar uma variedade de frases de destaque, alfinetes ou balões interessantes que misturam texto e imagens. Esses itens são chamados de ícones dinâmicos.

Sintaxe

URL raiz: https://chart.googleapis.com/chart?

Os ícones dinâmicos suportam os seguintes parâmetros depois de ? no URL raiz:

Tipos de ícones

Tipo	Exemplos
Balões: escolha balões de texto pequenos ou grandes, com ou sem ícones.
Alfinetes: os tipos de alfinete podem ser simples, com estrela ou inclinados e ter um ícone, uma única letra ou strings de texto mais longas.
Notas divertidas com texto e título opcional
Notas da previsão do tempo com título, texto e ícone
Bloco de texto com várias linhas delineado, sem ícone
Bloco de texto contornado de linha única com ícone

Voltar ao início

Balões

Os balões têm várias combinações de recursos: tamanho grande ou pequeno, com ou sem ícone, texto com uma ou várias linhas. A tabela a seguir descreve os tipos de balão e a sintaxe de cada um. A descrição de cada valor de parâmetro está descrita abaixo da tabela.

Mais algumas observações:

• Todos os balões são redimensionados para se ajustarem à largura e à altura do texto que você inserir.
• A constante de balão é compatível com uma variação que termina em _withshadow. Se você usar a variação _withshadow, ela adicionará uma sombra abaixo do balão.

Texto	Icon	Sintaxe	Somente sombra	Exemplo
Linha única	Não	chst=   d_bubble_text_small[_withshadow] chld=   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_text_small_shadow chld=   <frame_style>|   <text>	chst=d_bubble_text_small chld=   bb|   Launch+site|   C6EF8C|   000000
Linha única	Sim	chst=   d_bubble_icon_text_small[_withshadow] chld=   <icon_string>|   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_icon_text_small_shadow chld=   <icon_string>|   <frame_style>|   <text>	chst=d_bubble_icon_text_small chld=   wc|   bb|   Pay+Toilets|   C6EF8C|   000000
Linha única	Sim	chst=   d_bubble_icon_text_big[_withshadow] chld=   <icon_string>|   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_icon_text_big_shadow chld=   <icon_string>|   <frame_style>|   <text>	chst=d_bubble_icon_text_big chld=   snack|   bb|   $2.99+!|   FFBB00|   000000
Várias linhas	Não	chst=   d_bubble_texts_big[_withshadow] chld=   <frame_style>|   <fill_color>|   <text_color>|   <text_line_1>    |...|   <text_line_n>	chst=   [d_]bubble_texts_big_shadow chld=   <frame_style>|   <text_line_1>    |...|   <text_line_n>	chst=d_bubble_texts_big chld=   bb|   FFB573|   000000|   Help+Wanted|   Hours:+Midnight+to+3:00+AM|   Good+pay,+interesting+work|   Contact+V.+Helsing
Várias linhas	Sim	chst=d_bubble_icon_texts_big[_withshadow] chld=   <icon_string>|   <frame_style>|   <fill_color>|   <text_color>|   <text_line_1>    |...|   <text_line_n>	chst=   [d_]bubble_icon_texts_big_shadow chld=   <icon_string>|   <frame_style>|   <text_line_1>    |...|   <text_line_n>	chst=d_bubble_icon_texts_big chld=   home|   bb|   FFB573|   000000|   Haunted+House|   Hours:+Midnight+to+3:00+AM|   Ghouls,+Goblins,+and+Vampires|   Bring+your+own+wooden+stake

Sintaxe

<icon_string>

Uma string que especifica um dos ícones descritos no final deste documento.

 

<frame_style>

A direção da cauda. Escolha uma das seguintes constantes de direção da cauda:

• bb: frame do balão, cauda no canto inferior esquerdo
  
  
• bbtl: frame do balão, cauda no canto superior esquerdo
  
  
• bbtr: frame do balão, cauda no canto superior direito
  
  
• bbbr: frame do balão, cauda no canto inferior direito
  
  
• bbT: frame do balão, sem cauda
  
  
• edge_bl: frame da aresta, cauda na aresta inferior, extremidade esquerda
  
  
• edge_bc: frame da aresta, cauda na aresta inferior, centralizada
  
  
• edge_br: frame da aresta, cauda na aresta inferior, à direita
  
  
• edge_tl: frame da aresta, cauda na aresta superior, extremidade esquerda
  
  
• edge_tc: frame da aresta, cauda na aresta superior, centralizada
  
  
• edge_tr: frame da aresta, cauda na aresta superior, à direita
  
  
• edge_lt: frame da aresta, cauda na aresta esquerda, superior
  
  
• edge_lc: frame da aresta, cauda na aresta esquerda, centralizada
  
  
• edge_lb: frame da aresta, cauda na aresta esquerda, inferior
  
  
• edge_rt: frame da aresta, cauda na aresta da direita, superior
  
  
• edge_rc: frame da aresta, cauda na aresta da direita, centralizada
  
  
• edge_rb: frame da aresta, cauda na aresta da direita, inferior

<fill_color>

A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.

<text_color>

A cor do texto, como uma cor hexadecimal HTML de seis dígitos.

<text>

Uma única linha de texto para os balões de uma linha. Os espaços devem ser + marcas.

<text_line_1>|...|<text_line_n>

Uma ou mais linhas de texto, para balões de texto com várias linhas. Cada linha é separada por uma | (barra vertical). A primeira linha exibida será maior e em negrito. Os espaços precisam ser substituídos por "+".

Somente sombra

No caso dos balões, você também pode desenhar a sombra independente usando a sintaxe mostrada na tabela acima. Por exemplo:

chst=   d_bubble_text_small_shadow chld=   bb|Launch+site

chst=   d_bubble_icon_text_small_shadow chld=   wc|bb|Pay+Toilets

chst=   d_bubble_icon_text_big_shadow chld=   snack|bb|$2.99+!

chst=   d_bubble_texts_big_shadow chld=   bb|Help+Wanted|   Hours:+Midnight+to+3:00+AM|   Good+pay,+interesting+work|   Contact+V.+Helsing

chst=   d_bubble_icon_texts_big_shadow chld=   home|bb|Haunted+House|   Hours:+Midnight+to+3:00+AM|   Ghouls,+Goblins,+and+Vampires|   Bring+your+own+wooden+stake

Voltar ao início

Alfinetes

Você pode fazer diversos alfinetes com ícones e/ou strings de texto curtas. Veja os tipos de alfinete disponíveis.

Tipo de alfinete	Constante do balão	Exemplos
Alfinete simples com uma letra ou ícone	chst=d_map_pin_letter[_withshadow] chst=d_map_pin_icon[_withshadow]
Alfinete inclinado/com estrela com uma letra ou ícone	chst=d_map_xpin_letter[_withshadow] chst=d_map_xpin_icon[_withshadow]
Alfinete escalonável, giratório e de várias linhas	chst=d_map_spin

Alfinete simples com uma letra ou ícone

É um alfinete pequeno e vertical que pode conter um pequeno ícone ou uma letra.

Sintaxe de letras

chst=d_map_pin_letter[_withshadow]
chld=<character>|<fill_color>|<text_color>

Sintaxe do ícone

chst=d_map_pin_icon[_withshadow]
chld=<icon_string>|<fill_color>

<caractere>

[Somente alfinetes de texto] Um caractere de texto.

<icon_string>

[Somente fixações de ícones] É uma string que especifica um dos ícones descritos no final deste documento.

<fill_color>

A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.

<text_color>

[Somente alfinetes com texto] A cor do texto, como uma cor hexadecimal HTML de seis dígitos.

Somente sombra

Para desenhar somente a sombra neste tipo de alfinete, use a seguinte sintaxe:

chst=d_map_pin_shadow

O parâmetro chld não é obrigatório para apenas uma sombra.

Exemplos

chst=d_map_pin_letter_withshadow chld=A|FF0000|0000FF

chst=d_map_pin_letter chld=%E5%8D%B1|FF0000|000000

chst=d_map_pin_icon chld=camping|ADDE63

chst=d_map_pin_shadow

Voltar ao início

Alfinete inclinado/com estrela com uma única letra ou ícone

Este é um alfinete pequeno que pode ser inclinado para a esquerda ou direita ou pode ter uma estrela sobreposta. O conteúdo do alfinete pode ser um caractere simples ou um ícone pequeno.

Sintaxe de letras

chst=d_map_xpin_letter[_withshadow]
chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>

Sintaxe do ícone

chst=d_map_xpin_icon[_withshadow]
chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>

<pin_style>

O estilo do alfinete. Escolha uma das seguintes constantes:

• pin
• pin_star
• pin_sleft
• pin_sright

<icon_string>

[Alfinetes de ícone] É uma string que especifica um dos ícones descritos no final deste documento.

<caractere>

[Alfinetes de texto] Um único caractere de texto.

<fill_color>

A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.

<text_color>

[Alfinetes de texto] A cor do texto, como uma cor hexadecimal HTML de seis dígitos.

<star_fill_color>

[Alfinetes com estrela] A cor de preenchimento da estrela, como uma cor hexadecimal HTML de seis dígitos.

Somente sombra

Para desenhar somente a sombra neste tipo de alfinete, use a seguinte sintaxe:

chst=d_map_xpin_shadow

chld=<pin_style>

Exemplos

chst=d_map_xpin_letter chld=pin_star|A|FF0000|000000

chst=d_map_xpin_letter chld=pin_sleft|A|FF0000|000000

chst=d_map_xpin_icon chld=pin_sleft|bank-dollar|52B552

chst=d_map_xpin_shadow chld=pin_sleft

Voltar ao início

Alfinete de texto com dimensionamento e rotação

Este é um alfinete que você pode dimensionar manualmente para incluir strings de texto maiores. Você pode também girar o alfinete em um grau personalizado, além de controlar o tamanho e cor da fonte.

Sintaxe

chst=d_map_spin
chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>

<scale_factor>

Um fator de escalonamento para especificar o tamanho do alfinete. Esse é um número positivo de ponto flutuante, em que 0,5 é o tamanho dos alfinetes não dimensionados. 0,25 seria metade desse tamanho, 1 seria o dobro desse tamanho e assim por diante.

<rotation_deg>

A rotação do pino, em graus. São permitidos valores positivos e negativos. Especifique 0 para um alfinete vertical.

<fill_color>

A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.

<font_size>

O tamanho da fonte do texto, em pixels.

<font_style>

"_" (sublinhado) para texto normal ou "b" para texto em negrito.

<text_line_1>...<text_line_n>

Uma ou mais linhas de texto, delimitadas por caracteres |.

Exemplos

chst=d_map_spin chld=1.7|180|C6E7DE|11|_|Raindrop

chst=d_map_spin chld=2.1|0|FFFF42|13|b|Kumquats

chst=d_map_spin chld=3|45|FFFF42|11|_|First+line|Second+line

Voltar ao início

Notas divertidas

Você pode criar uma variedade de notas de texto em modelos inovadores, como uma nota adesiva ou um balão de pensamento. Também é possível incluir uma linha de título na nota.

Essas notas têm um tamanho fixo. Elas não aumentarão nem diminuirão para acomodar o tamanho do texto.

Sintaxe

chst=d_fnote_title OR chst=d_fnote
chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>

chst

Especifique d_fnote_title para uma nota com título ou d_fnote para uma nota sem título. Em uma nota com título, a primeira linha de texto será formatada como um título (maior e em negrito).

<note_type>

Uma string que descreve a forma da nota. Escolha uma das strings de tipo de observação na tabela abaixo.

<note_size>

1 (uma) para nota grande ou 2 para nota pequena. Os tamanhos dos modelos são fixos. Eles não aumentam nem encolhem para caber no texto. Teste os dois tamanhos para ver qual mantém melhor o texto.

<text_color>

A cor do texto, como uma cor hexadecimal de seis dígitos. Valores alfa não são aceitos.

<text_alignment>

O alinhamento de todo o texto, incluindo o cabeçalho. Escolha um dos seguintes valores:

• l - ("L") Alinhado à esquerda
• h - Centralizado
• r - Alinhado à direita

<text_line_1>| ...|<text_line_n>

O texto da nota. Use o caractere | (barra vertical) para indicar uma nova linha. Quando chst=d_fnote_title, a primeira linha do texto é formatada como um título.

Modelos de tipo de notas

Os seguintes modelos são suportados como modelos de notas. A string note_type de cada um é mostrada abaixo do modelo.

Observação:as strings de texto diferenciam maiúsculas de minúsculas.

arrow_d

balloon

pinned_c

sticky_y

taped_y

thought

Exemplos

Descrição	Exemplo
Nota com um título: chst=d_fnote_title. A primeira linha do texto é usada como título. O tamanho da nota é grande (1).	chst=d_fnote_title chld=pinned_c|1|004400|l|Joe's|Today+2-for-1+!|555-1234
Nota sem título: chst=d_fnote.O texto é centralizado.	chst=d_fnote chld=thought|1|0088FF|h|Why+am+I+here?
Modelo útil para contar uma piada.	chst=d_fnote chld=arrow_d|1|000000|h|Your|shoe's|untied

Voltar ao início

Observações da previsão do tempo

Você pode criar uma nota com um ícone de indicação do tempo. O layout é semelhante ao das notas de estilo divertidas, mas a cor do texto é sempre preta, o texto fica sempre alinhado à esquerda e você só pode ter de uma a três linhas de texto.

Essas notas têm um tamanho fixo. Elas não aumentarão nem diminuirão para acomodar o tamanho do texto.

Sintaxe

chst=d_weather
chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>

chst

d_weather indica uma nota meteorológica.

<note_type>

O modelo que será usado para a nota. Use uma das strings de observação listadas na lista de notas de estilo divertido acima.

<weather_icon>

Uma das strings do ícone de clima na tabela abaixo. Uma nota pode usar um único ícone de clima.

<título>|<line_2>|<line_3>

O título e até mais duas linhas de texto (essas linhas de texto extras são opcionais). O título é maior e em negrito.

Ícones de clima

Aqui está uma lista de ícones de clima compatíveis, mostrando a string weather_icon para cada um.

Observação:as strings de texto diferenciam maiúsculas de minúsculas.

clear-night-moon	cloudy-heavy	cloudy-sunny	cloudy	rain
rainy-sunny	snow	snowflake	snowy-sunny	sunny-cloudy
sunny	thermometer-cold	thermometer-hot	thunder	windy

Exemplos

Voltar ao início

Blocos de texto com fonte contornada (somente texto)

Você pode criar um bloco de texto com fonte contornada e plano de fundo branco. Caso você queira um texto + ícone, use a variedade de linha única, que aceita um ícone.

Sintaxe

chst=d_text_outline
chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>

<text_fill_color>

A cor de preenchimento do texto. Esta é uma cor hexadecimal de seis dígitos. Valores alfa não são aceitos.

<font_size>

Um número que especifica o tamanho da fonte, em pixels.

<text_alignment>

O alinhamento de todo o texto, incluindo o cabeçalho. Escolha um dos seguintes valores:

• l - ("L") Alinhado à esquerda
• h - Centralizado
• r - Alinhado à direita

<outline_color>

A cor do contorno do texto. Esta é uma cor hexadecimal de seis dígitos. Valores alfa não são aceitos.

<font_weight>

Texto normal ou em negrito. Sublinhado "_" para texto normal e "b" para texto em negrito.

<text_line_1>| ...|<text_line_n>

O texto da nota. Use o caractere | (barra vertical) para indicar uma nova linha. Quando chst=d_fnote_title, a primeira linha do texto é formatada como um título.

Exemplos

chst=d_text_outline chld=FFCC33|16|h|FF0000|b|Mad+Scientist|Boo

chst=d_text_outline chld=FF65BB|20|h|00FF00|_|Freshly+Made+Pie

Voltar ao início

Blocos de texto com fonte contornada (texto + ícone)

Você pode criar uma única linha de texto contornado e um ícone na parte superior, esquerda, inferior ou direita do bloco. Se você não precisar de um ícone, use o bloco de texto com fonte contornada.

Sintaxe

chst=<icon_position_string>
chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>

<icon_position_string>

Especifica onde o ícone aparece na caixa de texto. Escolha um dos seguintes valores:

• d_simple_text_icon_below: coloca o ícone na parte de baixo da caixa: .
• d_simple_text_icon_above: coloca o ícone na parte superior da caixa: .
• d_simple_text_icon_left: coloca o ícone à esquerda da caixa: .
• d_simple_text_icon_right: coloca o ícone à direita da caixa:

<text>

O texto a ser exibido. Somente uma linha. Use + para espaços.

<font_size>

Um número que especifica o tamanho da fonte, em pixels.

<font_fill_color>

A cor de preenchimento do texto, como uma string de seis dígitos. Não são suportados valores alfa.

<icon_name>

Um dos nomes de ícone listados no final deste documento.

<icon_size>

A altura do ícone, em pixels. Os seguintes valores são aceitos: 12, 16, 24.

<icon_fill_coloricon_fill_color>

A cor do ícone, como uma string de seis dígitos. Não são suportados valores alfa.

<icon_and_text_border_color>

A cor da borda ao redor do ícone e do texto, como uma string de seis dígitos. Não são suportados valores alfa.

Voltar ao início

Lista de sinalizações e ícones disponíveis

As imagens a seguir podem ser usadas em ícones dinâmicos com o parâmetro apropriado.

Observação:as strings de texto diferenciam maiúsculas de minúsculas

Observação:os ícones estão disponíveis apenas nos seguintes tamanhos: 12, 16, 24.

Ícones básicos

Ícones do Glyphish.com

Estes ícones são de Joseph Wain / glyphish.com. Esta obra está licenciada de acordo com a Licença Creative Commons Atribuição 3.0 dos Estados Unidos.

Sinalizações

Veja abaixo bandeiras de alguns países e territórios.

Voltar ao início

Strings de texto

Todo texto de exibição enviado na solicitação precisa ser codificado em UTF-8 e para URL. Isso afeta somente caracteres não seguros para o URL. Esses caracteres são principalmente as letras de "a" a "z" em letras maiúsculas e minúsculas, além de um pequeno conjunto de pontuação. Por exemplo, o valor codificado para URL e UTF-8 da letra "è" é "%C3%A8" e, para o caractere chinês, 駅 é "%E9%A7%85". A maioria dos navegadores permite que você use um valor não codificado na string do URL (por exemplo, 駅) e o codifica para você em segundo plano. No entanto, é possível que alguém que visualize o URL da imagem esteja usando um navegador que não faz isso. Por isso, geralmente é melhor codificar em UTF-8 e codificar para URL todos os caracteres não ASCII nas strings de texto. Isso se aplica apenas ao texto mostrado em balões ou alfinetes, não para caracteres "&", | ou outros que fazem parte da sintaxe do URL.

Sombras

Você pode adicionar sombras a muitos ícones ou até mesmo desenhar sombras para alguns ícones sem o próprio ícone.

Ícones ocultos

Muitos desses ícones podem ser desenhados com ou sem sombras. Se o sombreamento for uma opção, o nome do ícone terá uma versão que termina em _withshadow e outra sem esse final. Você pode especificar um ícone com uma das duas finais, dependendo se quer usar a sombra ou não.

Veja um exemplo de balão de texto médio e de alfinete com e sem sombras:

chst=d_bubble_icon_text_big	chst=d_bubble_icon_text_big_withshadow
chst=d_map_pin_icon	chst=d_map_pin_icon_withshadow

Sombras independentes

Alguns tipos de ícone permitem que você desenhe a sombra por conta própria. Faça isso se você estiver usando vários ícones sombreados sobrepostos em uma imagem e eles estiverem tão próximos que a sombra de um deles cai sobre outro gráfico. Consulte a documentação do seu tipo de ícone específico para saber se você pode desenhar a sombra por conta própria.

Voltar ao início