Ícones dinâmicos

   

Nesta página, descrevemos como criar uma variedade de frases de destaque, balões, alfinetes e outros elementos gráficos que podem ser solicitados pelo URL ou adicionados como marcadores sobre outros gráficos.

Sumário

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

Introdução

A API de gráficos do Google permite criar diversas 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 como marcadores em outro gráfico. A página de referência Ícones dinâmicos no infográfico 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

Você pode solicitar uma imagem de ícone dinâmico da mesma forma que solicita qualquer um dos outros gráficos. Um ícone dinâmico independente oferece suporte a 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 deles.
chld=<icon_data>	Obrigatório	Os dados específicos usados para descrever o tamanho, a rotação, o texto e outros dados necessários 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 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 ícones 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 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 do seu gráfico 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.

Ao usar o parâmetro chem para especificar marcadores de ícones dinâmicos, você também precisa inserir caracteres de escape para determinados caracteres no texto, conforme descrito na documentação de chem.

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 ícone cai sobre outro. Por exemplo, aqui está dois balões sombreados, Robert foi desenhado 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, em seguida, Alice sem 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), então são desenhados na ordem listada, por cima dos elementos do gráfico (a linha do gráfico). Primeiro, a sombra de Alice é desenhada, depois o balão de Roberto e, por fim, o balão de Alice.

Consulte a documentação do seu tipo de ícone específico para saber se você pode desenhar a sombra por conta própria.

Ícones contextuais

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

Esses ícones podem ser renderizados em uma série diferente da série que especifica sua cor, tamanho ou informações de 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 do ícone são especificados nos parâmetros abaixo. Um bom uso disso é usar uma série de dados escondidos para dados de ícones, 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: renderiza 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 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 é exibida e usa dados de linha. Todas as séries posteriores ficam ocultas. ds=0: marcadores renderizados na série 0. d=disk,1,...: os dados do disco vêm da série oculta 1.

Tipos de marcadores de contexto

Tipo de marcador	Valor de chems	Exemplo
Variação de cor	s=cm_color
Variação de tamanho	s=cm_size
Variação de cor e tamanho	s=cm_color_size
Variação de empilhamento	s=cm_repeat
Empilhamento e variação de cor	s=cm_repeat_color

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 final da página.

<color_data_series>

O índice da série de dados, começando com zero, que era 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 #). Ela está associada ao menor valor possível no intervalo de dados disponível.

middle_color

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

<high_color>

O alto valor de cor no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem sinal #). Ela é associada 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 aceitos: 12, 16, 24.

<outline_color>

A cor de 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 de variação de cor ds=0: renderizá-los na série de dados 0. dp=all: coloque 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 - Contorno preto 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 sozinho de um marcador de gráfico contextual, de acordo com a série de dados de sua escolha.

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>

A forma do ícone. Escolha um dos seguintes valores: maps_pin, disk ou square.

<size_data_series>

O índice da série de dados, começando com zero, que era usado para variar o tamanho dos ícones.

<zero_value_size>

O tamanho base do ícone, no 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 de dados de cada ícone e o valor mínimo da série para calcular o tamanho final do ícone. Portanto, um ícone com o valor de dados 0 não será afetado por esse multiplicador.

<min_size>

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

<outline_color>

A cor de 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 marca #).

<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 do valor zero, que é de 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 alfinete no mapa 0: dimensione 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 de baixo 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 do 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>

A forma do ícone. Escolha um dos seguintes valores: maps_pin, disk ou square.

<color_data_series>

O índice da série de dados, começando com zero, que era 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 #). Ela está associada ao menor valor possível no intervalo de dados disponível.

middle_color

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

<high_color>

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

<size_data_series>

O índice da série de dados, começando com zero, que era usado para variar o tamanho dos ícones.

<zero_value_size>

O tamanho base do ícone, no 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 de dados de cada ícone e o valor mínimo da série para calcular o tamanho final do ícone. Portanto, um ícone com o valor de dados 0 não será afetado por esse multiplicador.

<min_size>

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

<outline_color>

A cor de 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 cores da série em que são 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 pino. A segunda série é usada para a linha azul e para o tamanho do pino. chem=y: renderizar um ícone dinâmico s=cm_color_size: usa o ícone de contexto de 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: usa 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: usa 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: tamanho mínimo do pin de 10 pixels. 000: cor de contorno preta. hb: centralize os pinos horizontalmente na borda inferior em 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 final da página.

<repeat_series_index>

O índice da série de dados baseado em zero usado para calcular quantos ícones colocar neste 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. Valores parciais são truncados.

<stacking_direction>

Direção de empilhamento: "h" (minúsculo) 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 marca #).

<outline_color>

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

<spacing>

Espaço a ser colocado 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. Ele não é renderizado no gráfico, mas é usado para espaçar todas as pilhas de maneira uniforme, começando na 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, no 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 repetida. 9: use um fator de escalonamento de 6. V: empilhe verticalmente. 16: deixe cada marcador com 16 pixels de altura. F00: cor de preenchimento do ícone. 000: a cor do contorno do ícone. 2: dois pixels entre cada ícone na pilha. hb: centralize as pilhas na parte inferior

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

 




---

 

Empilhamento 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 final da página.

<repeat_series_index>

O índice da série de dados baseado em zero usado para calcular quantos ícones colocar neste 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. Valores parciais são truncados.

<stacking_direction>

Direção de empilhamento: "h" (minúsculo) 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 da série de dados, começando com zero, que era 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 #). Ela está associada ao menor valor possível no intervalo de dados disponível.

middle_color

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

<high_color>

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

<outline_color>

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

<spacing>

Espaço a ser colocado 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 cor. 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 repetida. 6: use um fator de escalonamento de 6. V: empilhe verticalmente. 12: deixe cada marcador com 12 pixels de altura. 0: usa a série 0 para especificar a cor. F00,0F0,00F: os valores de cor baixo, médio e alto. 000: a cor do contorno do ícone. 2: dois pixels entre cada ícone na pilha. hv: centralize 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