Esta página descreve como criar várias frases de destaque, balões, alfinetes e outros gráficos que podem ser solicitados por URL ou adicionados como marcadores sobre outros gráficos.
Índice
- Introdução
- Recursos comuns de ícones
- Tipos de ícone
- Balões
- Alfinetes
- Notas divertidas de estilo
- Notas de previsão do tempo
- Blocks Font Text Blocks (sem ícone)
- Blocks Font Text Blocks (ícone)
- Ícones contextuais
- Lista de imagens
Introdução
Com a API Chart, é possível criar várias 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 quais tipos de marcadores dinâmicos existem e como criá-los como imagens independentes ou como marcadores em outro gráfico.
A sintaxe para criar um ícone dinâmico depende do tipo de ícone, seja como independente, ou como um marcador dinâmico em outro gráfico.
Ícones independentes
É possível solicitar uma imagem de ícone dinâmico da mesma forma que você solicita qualquer um dos outros gráficos. Um ícone dinâmico independente oferece suporte a um conjunto diferente de parâmetros em comparação com outros gráficos:
| Parâmetro | Obrigatório ou opcional | Descrição |
|---|---|---|
chst=<icon_string_constant> |
Obrigatório | Descreve qual tipo de ícone criar.
|
chld=<icon_data> |
Obrigatório | Os dados específicos usados para descrever o tamanho, a rotação, o texto e outros dados obrigatórios do í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
É possível 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 de 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 comuns de ícones
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 URL (caracteres seguros de URL 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 em UTF-8 e URL para a 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 de 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, geralmente é melhor usar UTF-8 e codificar todos os caracteres não ASCII
em strings de texto. Isso se aplica apenas ao texto mostrado em balões
ou alfinetes, e não em &,
|, ou em outros caracteres que fazem parte da sintaxe do URL.
Ao usar o parâmetro chem para especificar marcadores de ícone dinâmicos, você também precisa evitar determinados caracteres no texto, conforme descrito na documentação de chem.
Sombras
Você pode adicionar sombras a muitos ícones ou até mesmo criar sombras para alguns ícones sem usar o í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 versão sem essa terminação. Você pode especificar um ícone com qualquer uma das terminações,
dependendo se quer sombra ou não.
Veja um exemplo de balão de texto médio e 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 desenham a sombra por conta própria. Isso pode ser feito 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 fica sobre outro ícone. Por exemplo, veja dois balões com sombra, Roberto desenhado primeiro e depois Alice:
Observe como a sombra de Alice cobre parcialmente o Robert. Para corrigir isso, primeiro desenhe a sombra de Alice antes do balão do Roberto e, depois, Alice sem uma sombra. Talvez não seja completamente realista em termos de iluminação e sombras, mas evita a escuridão de um balão com a sombra de outro:
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). Portanto, eles são desenhados na ordem listada, em cima dos elementos do gráfico (a linha do gráfico). Primeiro, a sombra de Alice é desenhada, depois o balão de Roberto
em cima disso e, por fim, o balão de Alice
sobre.
Consulte a documentação do seu tipo específico de ícone para saber se você pode desenhar a sombra sozinha.
Tipos de ícone
| Tipo | Exemplos |
|---|---|
| Balões: escolha balões de texto pequenos ou grandes, com ou sem ícones. | |
| Pins: os tipos de alfinetes podem ser simples, com estrela ou inclinado e podem ter um ícone, uma única letra ou strings de texto mais longas. | |
| Notas divertidas com texto e título opcional | |
| Notas de previsão do tempo com título, texto e ícone de clima | |
| Bloco de texto destacado de várias linhas, sem ícone | |
| Bloco de texto com uma única linha destacada com ícone | |
| Ícones contextuais |
Balões
Os balões aparecem em várias combinações de recursos: tamanho grande ou pequeno, com ou sem ícone, texto de linha única ou várias linhas. A tabela a seguir descreve os tipos de círculos e a sintaxe de cada um. A descrição de cada valor de parâmetro é descrita abaixo da tabela.
Mais algumas observações:
- Todos os balões são redimensionados para se ajustar à largura e altura do texto inserido.
- Ao usar o balão como um ícone dinâmico independente, use a constante de balão
chst. Ao usar o balão como um marcador de ícone dinâmico incorporado, use a constante de balãochem. - A constante do 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. - Ao usar o balão como um marcador de ícone dinâmico incorporado, a sintaxe da string
chldé a mesma, exceto que todos os delimitadores | são substituídos por , conforme descrito na documentação Marcadores de ícone dinâmico incorporados.
| Texto | Ícone | Valores chst (independente) e chem (marcador) |
Sintaxe de chld |
Somente sombra | Exemplo |
|---|---|---|---|---|---|
| Linha única | Não |
|
chld= |
chst= |
chst=d_bubble_text_small |
| Linha única | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_text_small |
| Linha única | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_text_big |
| Várias linhas | Não |
|
chld= |
chst= |
chst=d_bubble_texts_big |
| Várias linhas | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_texts_big |
Sintaxe
- <string_do_ícone>
- Uma string que especifica um dos ícones descritos no final deste documento.
- <frame_style>
- É a direção da cauda. Escolha as seguintes constantes de direção de cauda:
bb- Frame de balão, cauda no canto esquerdo de baixo
bbtl- Frame de balão, cauda no canto superior esquerdo
bbtr- Frame de balão, cauda no canto superior direito
bbbr- Frame de balão, cauda no canto inferior direito
bbT- Frame de balão, sem cauda
edge_bl- Frame da borda, cauda na borda inferior, lado esquerdo
edge_bc– Frame da borda, cauda na borda inferior, centralizado
edge_br- Frame da borda, cauda na borda inferior, direita
edge_tl– Frame da borda, cauda na borda superior, extremidade esquerda
edge_tc– Frame da borda, cauda na borda superior, centralizado
edge_tr- Frame da borda, cauda na borda superior, direita
edge_lt- Frame da borda, cauda na borda esquerda, extremidade superior
edge_lc– Frame de borda, cauda na borda esquerda, centralizada
edge_lb– Frame da borda, cauda na borda esquerda, final inferior
edge_rt- Frame da borda, cauda na borda direita, na parte superior
edge_rc– Frame da borda, cauda na borda direita, centralizada
edge_rb– Frame da borda, cauda na borda direita, extremidade inferior
- <cor_de_preenchimento>
- A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.
- <cor do texto>
- A cor do texto, como uma cor hexadecimal HTML de seis dígitos.
- <texto>
- Uma linha de texto dos balões para os de uma linha. Os espaços precisam ser "+".
- <texto_linha_1>|...|<texto_linha_n>
- Uma ou mais linhas de texto para balões de texto com várias linhas. Cada linha é separada por uma marca |. A primeira linha exibida será maior e em negrito. Os espaços precisam ser substituídos por +.
Somente sombra
Para os balões, também é possível desenhar a sombra independente usando a sintaxe mostrada na tabela acima. Exemplos:
chst= |
chst= |
chst= |
chst= |
chst= |
Pins
Você pode fazer diversos alfinetes com ícones e/ou strings de texto curtas. Veja os tipos de alfinetes disponíveis.
| Tipo de alfinete | Constante do balão | Exemplos |
|---|---|---|
| Alfinete simples com uma única letra ou ícone |
|
|
| Alfinete inclinado/com estrela |
|
|
| Pin escalonável, giratório e com várias linhas | chst=d_map_spin |
Pin simples
com uma letra ou ícone 
É um alfinete pequeno e vertical que pode conter um pequeno ícone ou uma letra.
Sintaxe da letra
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 único caractere de texto.
- <string_do_ícone>
- [Somente ícones de alfinete] Uma string que especifica um dos ícones descritos no final deste documento.
- <cor_de_preenchimento>
- A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.
- <cor do texto>
- [somente para alfinetes de 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 é necessário para uma sombra.
Exemplos
chst=d_map_pin_letter_withshadow |
chst=d_map_pin_letter |
chst=d_map_pin_icon |
chst=d_map_pin_shadow |
Pin 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 da letra
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:
pinpin_starpin_sleftpin_sright
- <string_do_ícone>
- [Alfinetes de ícone] Uma string que especifica um dos ícones descritos no final deste documento.
- <caractere>
- [Alfinetes de texto] Um único caractere de texto.
- <cor_de_preenchimento>
- A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.
- <cor do texto>
- [Pins de texto] é a cor do texto, como uma cor hexadecimal HTML de seis dígitos.
- <star_fill_color& g;
- [Pins de 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 |
chst=d_map_xpin_letter |
chst=d_map_xpin_icon |
chst=d_map_xpin_shadow |
Pin de texto com escalonamento 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>
- <escala_fator>
- Um fator de escalonamento para especificar o tamanho de um alfinete. Esse é um número de ponto flutuante positivo em que 0,5 é o tamanho de alfinetes não dimensionados. 0,25 é a metade desse tamanho, 1 é o dobro desse tamanho e assim por diante.
- <rotação_deg>
- A rotação do alfinete, em graus. São permitidos valores positivos e negativos. Especifique 0 para um alfinete vertical.
- <cor_de_preenchimento>
- A cor de preenchimento do balão, como uma cor hexadecimal HTML de seis dígitos.
- <fonte_tamanho>
- O tamanho da fonte do texto, em pixels.
- <fonte_estilo>
- Ou &(39;_' (sublinhado) para texto normal ou 'b' para texto em negrito.
- <texto_linha_1>...<texto_linha_n>
- Uma ou mais linhas de texto, delimitadas por | | caracteres.
Exemplos
chst=d_map_spin |
chst=d_map_spin |
chst=d_map_spin |
Notas de estilo divertidas
Você pode criar várias anotações de texto em modelos inovadores, como uma nota autoadesiva ou um balão de diálogo. Também é possível incluir uma linha de título na nota.
Essas anotações têm tamanho fixo. Elas não aumentarão nem diminuirão para acomodar o tamanho do seu 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_titlepara uma nota com um título oud_fnotepara uma nota sem título. Em uma nota com título, a primeira linha do texto é formatada como título (maior e em negrito). - <tipo_de_nota>
- É uma string que descreve a forma da nota. Escolha uma das strings do tipo de nota na tabela abaixo.
- <tamanho_da_nota>
- 1 (uma) para uma nota grande ou 2 para uma nota pequena. Os tamanhos dos modelos são fixos. Os modelos não crescem nem diminuem para se ajustar ao texto. Teste os dois tamanhos para ver qual deles tem melhor texto.
- <cor do texto>
- A cor do texto, como uma cor hexadecimal de seis dígitos. Valores alfa não são aceitos.
- <texto_alinhamento>
- O alinhamento para todo o texto, incluindo o cabeçalho. Escolha um dos seguintes valores:
- l - ('L') Alinhado à esquerda
- h - Centralizado
- r - Alinhado à direita
- <texto_linha_1>| ...|<texto_linha_n>
- O texto da anotação. Use o caractere | (barra vertical) para indicar uma nova linha. Quando
chst=d_fnote_title, a primeira linha do texto é formatada como título.
Modelos de tipo de nota
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 título: chst=d_fnote_title. A primeira
linha de texto é usada como título. O tamanho da nota é grande (1). |
chst=d_fnote_title |
Nota sem título: chst=d_fnote.o texto é centralizado. |
chst=d_fnote |
Modelo útil para contar uma piada. |
|
Notas da previsão do tempo
Você pode criar uma nota com um ícone de indicação do tempo. Layout semelhante às notas de estilo divertidas, mas a cor do texto é sempre preta, o texto é sempre alinhado à esquerda e você só pode ter de uma a três linhas de texto.
Essas anotações têm 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_weatherindica uma observação climática.- <tipo_de_nota>
- O modelo a ser usado nesta nota. Use uma das strings de anotação listadas na lista de notas de estilo divertido acima.
- <ícone_climático>
- Uma das strings de ícone de clima na tabela abaixo. Uma nota pode aceitar um único ícone de clima.
- <título>|<linha_2>|<linha_3>
- O título e até duas outras linhas de texto (essas linhas de texto extras são opcionais). O título é maior e em negrito.
Ícones de clima
Veja 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
| Descrição | Exemplo |
|---|---|
Uma observação sobre o clima com um título e duas linhas em um modelo de estilo taped_y. |
|
| Um desejo para o inverno. |
|
Blocos de texto com fonte destacadas (sem ícone)
Você pode criar um bloco de texto com fonte contornada e plano de fundo branco. Se você quiser um ícone, use a variedade de linha única, que é compatível com 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>
- <color_fill_color& g;
- É a cor de preenchimento do texto. Esta é uma cor hexadecimal de seis dígitos. Valores alfa não são aceitos.
- <fonte_tamanho>
- Um número que especifica o tamanho da fonte, em pixels.
- <texto_alinhamento>
- O alinhamento para todo o texto, incluindo o cabeçalho. Escolha um dos seguintes valores:
- l - ('L') Alinhado à esquerda
- h - Centralizado
- r - Alinhado à direita
- <color_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. Sublinhar ' _' para texto normal e 'b' para texto em negrito.
- <texto_linha_1>| ...|<texto_linha_n>
- O texto da anotação. Use o caractere | (barra vertical) para indicar uma nova linha. Quando
chst=d_fnote_title, a primeira linha do texto é formatada como título.
Exemplos
chst=d_text_outline |
chst=d_text_outline |
Blocos de texto de fonte
tracejados (ícone) 
É possível 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 de fonte contornado.
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 inferior da caixa:d_simple_text_icon_above- coloca o ícone na parte superior da caixa:d_simple_text_icon_left: posiciona o ícone à esquerda da caixa:d_simple_text_icon_right: posiciona o ícone à direita da caixa:
- <texto>
- O texto a ser exibido. Apenas uma linha. Use "+" para os espaços.
- <fonte_tamanho>
- 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.
- <nome_do_ícone>
- Um dos nomes de ícone listados no final deste documento.
- <tamanho_do_ícone>
- A altura do ícone, em pixels. Os seguintes valores são aceitos: 12, 16, 24.
- <icon_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.
Ícones contextuais (somente marcadores dinâmicos)
Você pode especificar um ícone que varia de cor, tamanho ou empilhamento de acordo com o ponto a que está atribuído. Esses tipos de ícone estão disponíveis apenas 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 de ds do parâmetro chem especifica a série na qual o ícone será renderizado, mas os valores para determinar o tamanho ou a cor do ícone são especificados nos parâmetros fornecidos 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. Veja alguns exemplos:
| Ícone renderizado na série de origem | Ícone renderizado em série não origem | Ícone que usa uma série oculta |
|---|---|---|
chem=
|
chem=
|
chd=t1:
|
Tipos de marcadores de contexto
| Tipo de marcador | Valor de chem s |
Exemplo |
|---|---|---|
| Variação de cor | s=cm_color |
|
| Variação de tamanho | s=cm_size |
|
| Cor e variação de tamanho | s=cm_color_size |
|
| Variação do empilhamento | s=cm_repeat |
|
| Empilhamento e variação de cor | s=cm_repeat_color |
Strings de alinhamento para ícones contextuais
Os ícones contextuais oferecem suporte a uma string de alinhamento opcional para especificar um alinhamento e um deslocamento do ícone no ponto de dados. Essa string tem a seguinte sintaxe:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- Alinhamento
- Duas letras que descrevem o alinhamento do ícone ao ponto. Alguns exemplos são
tl(canto superior esquerdo) erb(canto inferior direito). Consulte a descrição do parâmetro alignment_string do parâmetrochempara ver uma listagem e uma descrição completas. - h_anchor_offset
- [opcional] é o deslocamento horizontal do ponto de fixação em pixels. Os valores incluindo zero precisam ser precedidos por + ou -. Importante: é necessário codificar o URL + como %2B.
- v_anchor_offset
- [opcional] é o deslocamento vertical do ponto de fixação em pixels. Os valores incluindo zero precisam ser precedidos por + ou -. Importante:é preciso codificar o 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-0Parte central inferior horizontal Sem deslocamentos |
lb-0-0Canto inferior esquerdo Sem deslocamentos |
rb-0-0Canto direito de baixo Sem deslocamentos |
ht-0-0Parte superior horizontal Sem deslocamentos |
hb-20-0Parte central inferior horizontal -20 horizontal 0 vertical |
hb%2b20-0Parte central inferior horizontal +20 horizontal 0 vertical |
hb-0%2b10Parte central inferior horizontal 0 horizontal +10 vertical |
hb-0-20Parte central inferior horizontal 0 horizontal -20 vertical |
Variação de cores (cm_color)
Você pode alterar 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 código identificando uma das imagens listadas no final da página.
- <color_data_série>
- O índice baseado em zero da série de dados usada para variar a cor dos ícones.
- <baixa_cor>
- O valor de cor baixa no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao menor valor possível no intervalo de dados disponível.
- <cor_do_meio>
- O valor da cor do meio no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao valor do meio no intervalo de dados disponível.
- <altura_alta>
- O valor de cor alta no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao maior valor possível no intervalo de dados disponível.
- <tamanho_do_ícone>
- O tamanho do ícone, em pixels. Os valores a seguir são aceitos: 12, 16, 24.
- <color_color>
- A cor de contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca).
- <alinhamento>
- Uma string opcional que descreve o alinhamento e o deslocamento do ícone.
Exemplo
|
chem=y;s=cm_color; |
Variação de tamanho (cm_size)
Só 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>
- <tipo_de_ícone>
- A forma do ícone. Escolha um dos seguintes valores:
maps_pin,diskousquare. - <tamanho_dados_da_série>
- O índice da série de dados baseado em zero usado para variar o tamanho dos ícones.
- <tamanho_zero_valor>
- O tamanho base do ícone, no valor mínimo de dados para a série.
- <tamanho_multiplicado>
- 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 com o valor 0 de dados não será afetado por este multiplicador.
- <tamanho_mín.>
- O tamanho mínimo de qualquer ícone, em pixels.
- <color_color>
- A cor de contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca).
- <cor_de_preenchimento>
- A cor de preenchimento do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca).
- <alinhamento>
- Uma string opcional que descreve o alinhamento e o deslocamento do ícone.
Exemplos
| Um exemplo básico. O ícone com valor zero é renderizado com tamanho zero, que é 30 pixels. Os tamanhos aumentam com os dados. | chd=t:0,10,20,30,40,50,60,70 |
Neste exemplo, os ícones usam os dados de tamanho da linha amarela, mas são renderizados na linha azul.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
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 que preferir.
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>
- <tipo_de_ícone>
- A forma do ícone. Escolha um dos seguintes valores:
maps_pin,diskousquare. - <color_data_série>
- O índice baseado em zero da série de dados usada para variar a cor dos ícones.
- <baixa_cor>
- O valor de cor baixa no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao menor valor possível no intervalo de dados disponível.
- <cor_do_meio>
- O valor da cor do meio no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao valor do meio no intervalo de dados disponível.
- <altura_alta>
- O valor de cor alta no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao maior valor possível no intervalo de dados disponível.
- <tamanho_dados_da_série>
- O índice da série de dados baseado em zero usado para variar o tamanho dos ícones.
- <tamanho_zero_valor>
- O tamanho base do ícone, no valor mínimo de dados para a série.
- <tamanho_multiplicado>
- 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 com o valor 0 de dados não será afetado por este multiplicador.
- <tamanho_mín.>
- O tamanho mínimo de qualquer ícone, em pixels.
- <color_color>
- A cor de contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca).
- <alinhamento>
- 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 são renderizados, mas usam dados de tamanho da outra série.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
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 código identificando uma das imagens listadas no final da página.
- <índice_da_série_repetida>
- O índice da série de dados baseado em zero usado para calcular quantos ícones serão posicionados neste ponto.
- <escalonamento_de_escalonamento>
- 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 da pilha: "quot;h" (minúscula) para horizontal ou "V" (maiúscula) para vertical.
- <tamanho_do_ícone>
- O tamanho de cada marcador, em pixels. Os valores a seguir são suportados: 12, 16, 24.
- <cor_de_preenchimento>
- A cor de preenchimento do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca).
- <color_color>
- A cor de contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca).
- <espaçamento>
- Quanta posição é colocada entre cada marcador em uma pilha, em pixels.
- <alinhamento>
- Uma string opcional que descreve o alinhamento e o deslocamento do ícone.
Exemplo
Este exemplo usa uma segunda série de dados fictícia. Ela não é renderizada no gráfico, mas é usada como uma forma de espaçar todas as pilhas de maneira uniforme, começando pela parte inferior do gráfico.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Empilhamento e variação de cor (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 código identificando uma das imagens listadas no final da página.
- <índice_da_série_repetida>
- O índice da série de dados baseado em zero usado para calcular quantos ícones serão posicionados neste ponto.
- <escalonamento_de_escalonamento>
- 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 da pilha: "quot;h" (minúscula) para horizontal ou "V" (maiúscula) para vertical.
- <tamanho_do_ícone>
- O tamanho de cada marcador, em pixels. Os valores a seguir são suportados: 12, 16, 24.
- <color_data_série>
- O índice baseado em zero da série de dados usada para variar a cor dos ícones.
- <baixa_cor>
- O valor de cor baixa no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao menor valor possível no intervalo de dados disponível.
- <cor_do_meio>
- O valor da cor do meio no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao valor do meio no intervalo de dados disponível.
- <altura_alta>
- O valor de cor alta no intervalo, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca). Isso está associado ao maior valor possível no intervalo de dados disponível.
- <color_color>
- A cor de contorno do ícone, como uma cor hexadecimal HTML de três ou seis dígitos (sem # marca).
- <espaçamento>
- Quanta posição é colocada entre cada marcador em uma pilha, em pixels.
- <alinhamento>
- Uma string opcional que descreve o alinhamento e o deslocamento do ícone.
Exemplo
|
chem= |
Lista de imagens
As imagens a seguir podem ser usadas em ícones dinâmicos com o parâmetro adequado.
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
Esses ícones são de Joseph Wain / glyphish.com. Este trabalho está licenciado de acordo com a Licença Creative Attribution 3.0 Estados Unidos.