Ícones dinâmicos

   

A página de referência Ícones dinâmicos dos infográficos descreve todos os tipos de marcadores dinâmicos disponíveis.

Nesta página, descrevemos como criar várias frases de destaque, balões, alfinetes e outras imagens que podem ser solicitadas pelo URL ou adicionadas como marcadores sobre outros gráficos.

Sumário

1. Introdução
   1. Ícones independentes
   2. Marcadores dinâmicos
2. Recursos comuns de ícones
   1. Strings de texto
   2. Sombras
3. Ícones contextuais

Introdução

A API de gráficos do Google permite que você crie 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. Você pode criar uma imagem de ícone dinâmico independente ou posicionar um ícone dinâmico na parte superior do gráfico como um tipo de marcador usando o parâmetro chem. Nesta página, descrevemos como criar ícones dinâmicos como imagens independentes ou marcadores em outro gráfico. A página de referência Ícones dinâmicos dos infográficos descreve todos os tipos de marcadores dinâmicos disponíveis.

A sintaxe para criar um ícone dinâmico depende se você quer um ícone independente ou um marcador dinâmico em outro gráfico.

Ícones independentes

É possível solicitar uma imagem de ícone dinâmico da mesma maneira que qualquer um dos outros gráficos. Um ícone dinâmico independente aceita um conjunto de parâmetros diferente dos outros gráficos:

Parâmetro	Obrigatório ou opcional	Descrição
chst=<icon_string_constant>	Obrigatório	Descreve qual tipo de ícone criar. icon_string_constant: uma constante de string que descreve o tipo de ícone a ser criado. Consulte a seleção de ícones abaixo para escolher um.
chld=<icon_data>	Obrigatório	Os dados específicos usados para descrever o tamanho, a rotação, o texto e outros dados do ícone. icon_data: um conjunto de valores delimitados por barras verticais apropriados para o ícone. A documentação nesta página descreve quais valores são exigidos por cada tipo de ícone.
cht	NÃO USADO	Os gráficos de ícones dinâmicos independentes não usam o parâmetro cht.
chs	NÃO USADO	Os gráficos de ícones dinâmicos independentes não usam o parâmetro chs.
chd	NÃO USADO	Use o parâmetro chld para transmitir dados a um ícone dinâmico independente.

Exemplo

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

Marcadores dinâmicos

Você pode incorporar um ícone dinâmico como um tipo de marcador em vários tipos diferentes de gráficos usando o parâmetro chem. Consulte a documentação do chem para saber como fazer isso.

Exemplo

https://chart.googleapis.com/chart?
  chs=300x140
  cht=lc&chco=FF9900,224499
  chd=t:75,74,66,30,10,5,3,1
  chls=1|1
  chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0
  chm=v,ccccFF,0,::.2,2

Recursos de ícone comuns

A maioria dos ícones pode ter strings de texto ou sombras associadas a eles.

Strings de texto

Todos os textos de exibição transmitidos para a API de gráficos do Google devem ser codificados em UTF-8 e, em seguida, codificados para URL. Isso afeta apenas os caracteres que não são seguros para URLs. Os caracteres seguros para URLs são, principalmente, as letras de A a Z (maiúsculas e minúsculas), além de um pequeno conjunto de pontuação. Por exemplo, o valor codificado em UTF-8 e URL para a letra "è" é "%C3%A8", e para o caractere chinês 駅 é "%E9%A7%85". A maioria dos navegadores permite o uso de um valor não codificado na string do URL (por exemplo, 駅) e o codifica em segundo plano. No entanto, é possível que alguém que visualize o URL do seu gráfico esteja usando um navegador que não faz isso. Portanto, normalmente é melhor codificar para UTF-8 e URL todos os caracteres não ASCII nas strings de texto. Isso se aplica apenas ao texto exibido em balões ou alfinetes, não para os caracteres &, | ou outros que fazem parte da sintaxe do URL.

Ao usar o parâmetro chem para especificar marcadores de ícones dinâmicos, também é necessário usar caracteres de escape específicos no texto, conforme descrito na documentação chem.

Sombras

Você pode adicionar sombras a vários ícones ou até desenhar sombras para alguns ícones sem o ícone em si.

Í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 versão sem esse final. Você pode especificar um ícone com qualquer uma das extremidades, dependendo de querer ou não a sombra.

Veja um exemplo de balão médio de texto e de um 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 de pé

Alguns tipos de ícone permitem desenhar a sombra. Isso é recomendado se você estiver usando vários ícones sombreados sobrepostos em um gráfico e eles estiverem tão próximos que a sombra de um ícone cai sobre o outro. Por exemplo, aqui estão dois balões sombreados: Roberto primeiro e depois Alice:

Observe como a sombra de Alice cobre parcialmente Robert. Para corrigir isso, desenhe a sombra de Alice primeiro, depois o balão de Robert e, por fim, Alice sem a sombra. Talvez não seja totalmente realista em termos de iluminação e sombras, mas isso evita ocultar uma bolha com a sombra de outra:

chem=
  y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1          // Alice, no shadow
  y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
  y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1                 // Alice shadow

Todos os marcadores especificam a mesma ordem z de 1 (py=1). Por isso, eles são desenhados na ordem listada, sobre os elementos do gráfico (a linha do gráfico). Primeiro, a sombra da Alice é desenhada, depois o balão de Roberto e, por fim, o balão de Alice em cima.

Consulte a documentação do seu tipo específico de ícone para saber se é possível desenhar a sombra.

Ícones contextuais

Você pode especificar um ícone que varia de cor, tamanho ou empilhamento de acordo com o ponto a que é atribuído. Esses tipos de ícone estão disponíveis somente como marcadores de ícone dinâmicos (parâmetro chem), e não como ícones independentes.

Esses ícones podem ser renderizados em uma série diferente da que especifica as informações de cor, tamanho ou empilhamento. Isso significa que o valor ds do parâmetro chem especifica a série em que o ícone será renderizado, mas os valores para determinar o tamanho ou a cor dele são especificados nos parâmetros abaixo. Um bom uso disso é usar uma série de dados oculta para dados de ícone, mas renderizar os ícones em uma linha ou barra visível. Confira alguns exemplos:

Ícone renderizado na série de origem	Ícone renderizado em séries que não são de origem	Ícone usando séries ocultas
chem=   y;s=cm_size;ds=0;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=0: renderizar na série 0 (linha vermelha) d=maps_pin,0,... - Dados da série 0	chem=   y;s=cm_size;ds=1;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=1: renderização na série 1 (linha azul) d=maps_pin,0,... Dados da série 0	chd=t1:   10,20,30,5,10,60   10,20,30,70,60,5 chem=   y;s=cm_size;ds=0;dp=all;   d=disk,1,5,20,5,FFFF10,000 t1:: a primeira série é mostrada e usa dados de linha. Todas as séries posteriores estão ocultas. ds=0: marcadores renderizados na série 0. d=disk,1,...: os dados do disco são provenientes da série oculta 1.

Tipos de marcadores de contexto

Tipo de marcador	Valor de chems	Exemplo
Variação de cores	s=cm_color
Variação de tamanho	s=cm_size
Variação de cor e tamanho	s=cm_color_size
Variação de agrupamento	s=cm_repeat
Acúmulo e variação de cores	s=cm_repeat_color

Strings de alinhamento para ícones contextuais

Os ícones contextuais são compatíveis com uma string de alinhamento opcional para especificar o alinhamento e o deslocamento do ícone em relação ao ponto de dados. Essa string tem a seguinte sintaxe:

<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]

alignment

Duas letras que descrevem o alinhamento do ícone ao ponto. Por exemplo, tl (canto superior esquerdo) e rb (canto inferior direito). Consulte a descrição do parâmetro alignment_string do parâmetro chem para ver uma descrição e uma listagem completa.

h_anchor_offset

[Opcional] O deslocamento horizontal do ponto de fixação, em pixels. Valores incluindo zero precisam ser precedidos por + ou -. Importante:você precisa codificar para URL + como %2B.

v_anchor_offset

[Opcional] O deslocamento vertical do ponto de fixação, em pixels. Valores incluindo zero precisam ser precedidos por + ou -. Importante:você precisa codificar para URL + como %2B.

Também é possível usar o componente of do parâmetro chem para especificar deslocamentos horizontais e verticais. Se você especificar o componente of e os valores h_anchor_offset v_anchor_offset, todos os deslocamentos serão aplicados ao ícone.

Exemplos:

hb-0-0 Inferior central horizontal Sem deslocamentos	lb-0-0 Canto inferior esquerdo Sem deslocamento	rb-0-0 Canto inferior direito Sem deslocamento	ht-0-0 Superior horizontal Sem deslocamentos
hb-20-0 Inferior central horizontal -20 horizontais 0 vertical	hb%2b20-0 Inferior central horizontal +20 horizontal 0 vertical	hb-0%2b10 Inferior central horizontal 0 horizontal +10 vertical	hb-0-20 Parte inferior central horizontal 0 horizontal -20 vertical

Variação de cor (cm_color)

Você pode variar a cor de um marcador de gráfico contextual de acordo com o ponto que ele representa. Você precisa especificar um intervalo de cores, e o valor dos dados será dimensionado para uma cor correspondente dentro desse intervalo.

Sintaxe

chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ;
  d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>

<icon_shape>

O ícone a ser usado. Especifique uma string de ID que identifica uma das imagens listadas no fim da página.

<color_data_series>

O índice baseado em zero da série de dados usado para variar a cor dos ícones.

<low_color>

O valor de cor baixo no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Esse valor está associado ao menor valor possível no intervalo de dados disponível.

<middle_color>

O valor de cor do meio no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Está associado ao valor do meio no intervalo de dados disponível.

<high_color>

O valor de cor alto no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Esse valor está associado ao valor mais alto possível no intervalo de dados disponível.

<icon_size>

O tamanho do ícone, em pixels. Os seguintes valores são suportados: 12, 16, 24.

<outline_color>

A cor do contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #).

<alignment>

Uma string opcional que descreve o alinhamento e o deslocamento do ícone.

Exemplo

s=cm_color: ícone da variação de cor ds=0: renderize-os na série de dados 0 dp=all: coloca um ícone em todos os pontos. d: petrol: identificador de ícone 0: cor da série de dados 0 000,0FF,F55: definição da escala de cores 24: tamanho do ícone 000: contornos pretos hv: alinhe os ícones no centro com o ponto horizontal e verticalmente.

chem=y;s=cm_color;   ds=0;   dp=all;   d=petrol,0,000,0FF,F55,24,000,hv

Voltar ao início

 

 

---

Variação de tamanho (cm_size)

Você pode variar o tamanho de um marcador de gráfico contextual, de acordo com a série de dados que preferir.

Sintaxe

chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ;
  d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>

<icon_type>

O formato do ícone. Escolha um dos seguintes valores: maps_pin, disk ou square.

<size_data_series>

O índice baseado em zero da série de dados usado para variar o tamanho dos ícones.

<zero_value_size>

O tamanho base do ícone, com o valor mínimo de dados da série.

<size_multiplier>

Um fator de escalonamento de tamanho. Esse valor é multiplicado pela diferença entre o valor dos dados de cada ícone e o valor mínimo da série para calcular o tamanho final do ícone. Portanto, um ícone no valor de dados 0 não é afetado por esse multiplicador.

<min_size>

O tamanho mínimo de qualquer ícone, em pixels.

<outline_color>

A cor do contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #).

<fill_color>

A cor de preenchimento do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #).

<alignment>

Uma string opcional que descreve o alinhamento e o deslocamento do ícone.

Exemplos

Um exemplo básico. O ícone com valor zero é renderizado no tamanho de valor zero, que é 30 pixels. Os tamanhos aumentam com os dados.

chd=t:0,10,20,30,40,50,60,70 chem=y;s=cm_size;ds=0;dp=all;py=-1;d=maps_pin,0,30,100,10,8F8,000,hb

Neste exemplo, os ícones usam os dados de tamanho da linha amarela, mas são renderizados na linha azul. chem=y: marcador dinâmico s=cm_size: variação de tamanho ds=1: renderizado na série de dados 1 (a linha azul). dp=all: renderizado em todos os pontos. d= maps_pin: usar um ícone de fixação no mapa 0: dimensiona o tamanho de acordo com a série de dados 0 (a linha amarela). 10: tamanho do alfinete no valor 0 90: multiplicador de tamanho 10: tamanho mínimo 8F8: cor de preenchimento 000: cor do contorno hb: centralize-os horizontalmente na parte inferior do alfinete.

chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb

Voltar ao início

 

 

---

Variação de cor e tamanho (cm_color_size)

Você pode variar a cor e o tamanho de um marcador de gráfico contextual, de acordo com a série de dados de sua escolha.

Sintaxe

chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ;
  d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>

<icon_type>

O formato do ícone. Escolha um dos seguintes valores: maps_pin, disk ou square.

<color_data_series>

O índice baseado em zero da série de dados usado para variar a cor dos ícones.

<low_color>

O valor de cor baixo no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Esse valor está associado ao menor valor possível no intervalo de dados disponível.

<middle_color>

O valor de cor do meio no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Está associado ao valor do meio no intervalo de dados disponível.

<high_color>

O valor de cor alto no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Esse valor está associado ao valor mais alto possível no intervalo de dados disponível.

<size_data_series>

O índice baseado em zero da série de dados usado para variar o tamanho dos ícones.

<zero_value_size>

O tamanho base do ícone, com o valor mínimo de dados da série.

<size_multiplier>

Um fator de escalonamento de tamanho. Esse valor é multiplicado pela diferença entre o valor dos dados de cada ícone e o valor mínimo da série para calcular o tamanho final do ícone. Portanto, um ícone no valor de dados 0 não é afetado por esse multiplicador.

<min_size>

O tamanho mínimo de qualquer ícone, em pixels.

<outline_color>

A cor do contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #).

<alignment>

Uma string opcional que descreve o alinhamento e o deslocamento do ícone.

Exemplos

Este exemplo usa duas linhas. Os alfinetes usam dados de cor da série em que foram renderizados, mas usam dados de tamanho da outra série. chd=s:0akAZtnkmi,nbMPJOKXXS: a primeira série é usada para traçar a linha amarela e determinar a cor do alfinete. A segunda série é usada para a linha azul e o tamanho do alfinete. chem=y: renderizar um ícone dinâmico s=cm_color_size: use o ícone de contexto da variação de cor e tamanho. ds=1: renderiza os itens na série de dados 1, a linha azul. dp=all: coloca o ícone em todos os pontos. d= maps_pin: use o símbolo de alfinete do mapa. 1: usa a série de dados 1 para a cor do alfinete. 000,0FF,F55: as cores baixa, média e alta. 0: use a série de dados 0 para o tamanho do alfinete. 10: o pin tem 10 pixels no valor 0. 90: um multiplicador de tamanho de 90. 10: o tamanho mínimo do alfinete é de 10 pixels. 000: cor do contorno preto. hb: centralize os pinos horizontalmente ao longo da borda inferior de cada ponto de dados.

chd=s:0akAZtnkmi,nbMPJOKXXS chem=y;s=cm_color_size;ds=1;dp=all;d=maps_pin,1,000,0FF,F55,0,10,90,10,000,hb

Voltar ao início

 

 

---

Variação de empilhamento (cm_repeat)

Você pode variar a altura de uma pilha de ícones de acordo com o valor dos dados em um ponto específico.

Sintaxe

chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ;
  d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>

<icon_shape>

O ícone a ser usado. Especifique uma string de ID que identifica uma das imagens listadas no fim da página.

<repeat_series_index>

O índice baseado em zero da série de dados usada para calcular quantos ícones colocar nesse ponto.

<scaling_factor>

O valor da série de dados de origem é dimensionado para um valor de 0 a 1 e multiplicado por esse valor para determinar quantos marcadores colocar nesse ponto. Os valores parciais são truncados.

<stacking_direction>.

Direção de empilhamento: "h" (minúscula) para horizontal ou "V" (maiúscula) para vertical.

<icon_size>

O tamanho de cada marcador, em pixels. Os valores a seguir são suportados: 12, 16, 24.

<fill_color>

A cor de preenchimento do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #).

<outline_color>

A cor do contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #).

<spacing>

Espaço para colocar entre cada marcador em uma pilha, em pixels.

<alignment>

Uma string opcional que descreve o alinhamento e o deslocamento do ícone.

Exemplo

Este exemplo usa uma segunda série de dados fictícia. Esse recurso não é renderizado no gráfico, mas é usado para espaçar todas as pilhas de maneira uniforme, começando pela parte inferior do gráfico. chd=s1:0akAZtnkmi,AAAAAAAAAA: a primeira série é usada para traçar a linha e determinar a altura da pilha. O segundo é usado para especificar a base de cada pilha de ícones, com o valor 0. chem=y: renderizar um ícone dinâmico s=cm_repeat: usa o ícone de contexto de variação empilhado. ds=1: renderiza os itens na série de dados 1. dp=all: coloca o ícone em todos os pontos. d= d=petrol: use o símbolo de combustível. 0: usa a série de dados 0 para a contagem de repetições. 9: use um fator de escalonamento de 6. V: empilhar verticalmente. 16: faça cada marcador com 16 pixels de altura. F00: cor de preenchimento do ícone. 000: cor de contorno do ícone. 2: dois pixels entre cada ícone na pilha. hb: centraliza as pilhas na parte de baixo

chd=s1:0akAZtnkmi,AAAAAAAAAA chem=   y;s=cm_repeat;ds=1;dp=all;   d=petrol,0,9,V,16,F00,000,2,hb

Voltar ao início

 




---

 

Acúmulo e variação de cores (cm_repeat_color)

Você pode variar a altura e a cor de uma pilha de ícones, de acordo com o valor dos dados em um ponto específico.

Sintaxe

chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ;
  d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>

<icon_shape>

O ícone a ser usado. Especifique uma string de ID que identifica uma das imagens listadas no fim da página.

<repeat_series_index>

O índice baseado em zero da série de dados usada para calcular quantos ícones colocar nesse ponto.

<scaling_factor>

O valor da série de dados de origem é dimensionado para um valor de 0 a 1 e multiplicado por esse valor para determinar quantos marcadores colocar nesse ponto. Os valores parciais são truncados.

<stacking_direction>.

Direção de empilhamento: "h" (minúscula) para horizontal ou "V" (maiúscula) para vertical.

<icon_size>

O tamanho de cada marcador, em pixels. Os valores a seguir são suportados: 12, 16, 24.

<color_data_series>

O índice baseado em zero da série de dados usado para variar a cor dos ícones.

<low_color>

O valor de cor baixo no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Esse valor está associado ao menor valor possível no intervalo de dados disponível.

<middle_color>

O valor de cor do meio no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Está associado ao valor do meio no intervalo de dados disponível.

<high_color>

O valor de cor alto no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Esse valor está associado ao valor mais alto possível no intervalo de dados disponível.

<outline_color>

A cor do contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #).

<spacing>

Espaço para colocar entre cada marcador em uma pilha, em pixels.

<alignment>

Uma string opcional que descreve o alinhamento e o deslocamento do ícone.

Exemplo

chem=y: renderizar um ícone dinâmico s=cm_repeat_color: use o ícone de contexto de empilhamento e variação de cores. ds=0: renderiza os itens na série de dados 0. dp=all: coloca o ícone em todos os pontos. d= petrol: use o símbolo de combustível. 0: usa a série de dados 0 para a contagem de repetições. 6: use um fator de escalonamento de 6. V: empilhar verticalmente. 12: faça cada marcador com 12 pixels de altura. 0: use a série 0 para especificar a cor. F00,0F0,00F: os valores de cor baixo, médio e alto. 000: cor de contorno do ícone. 2: dois pixels entre cada ícone na pilha. hv: centraliza as pilhas vertical e horizontalmente em cada ponto de dados.

chem=   y;s=cm_repeat_color;ds=0;dp=all;   d=petrol,0,6,V,12,0,F00,0F0,00F,000,2,hv

Voltar ao início