Gráficos de mapa

Esta página descreve como criar um mapa colorido usando a API de gráficos do Google. Ele é uma versão nova e aprimorada, que oferece suporte a um mapa maior e mais recursos do que o gráfico de mapa mais antigo (cht=t).

Sumário

Visão geral

Você pode criar um mapa com vários países ou estados destacados em cores personalizadas. Você pode permitir que o mapa aumente o zoom até o nível adequado para mostrar os países selecionados corretamente ou aumente ou diminua o zoom até um nível personalizado usando valores de latitude e longitude.

Parâmetros compatíveis

Os gráficos de mapa suportam os seguintes parâmetros:

Parâmetro Obrigatório ou opcional Descrição
cht=map<opt_zoom_and_center> Obrigatório

Especifica um gráfico de mapa.

opt_zoom_and_center - Uma string opcional que permite ampliar ou centralizar o gráfico em uma região específica. Veja detalhes.

chs Obrigatório Tamanho do mapa. As dimensões máximas de um mapa são de 600 pixels de largura, 600 pixels de altura ou 300.000 pixels no total.
chd=
 <first_country_value>,
 ...,
 <last_country_value>
Opcional Se usado, o valor dos dados vai indicar a cor do país correspondente, junto do gradiente de cor especificado por chco.
chld=
 <country_or_region_codes>|...|
Obrigatório

Uma lista separada por barras verticais de países ou estados que serão destacados nas cores especificadas por chco. O mapa vai aplicar zoom automaticamente para incluir todos os países especificados, a menos que você aplique zoom ou centralização personalizados. Os códigos precisam estar em letras maiúsculas. Esses são códigos ISO 3166-1-alpha-2: dois caracteres maiúsculos, opcionalmente seguidos por um traço e um segundo identificador para regiões ou cidades. Exemplos: GB (Grã-Bretanha), GB-LND (Londres), US-NJ (estado de Nova Jersey, nos Estados Unidos)

chco

  • Se chd não for usado:
    chco=
     <unselected_land_color>|
     <first_region_color>|
       ...|
     <last_region_color>
  • Se chd for usado:
    chco=
     <unselected_land_color>,
     <color_range_start>,
       ...,
     <color_range_end>
Opcional

Cores do gráfico. O formato dessa string depende de você usar chd. Em ambas as sintaxes, <unselected_land_color> é a cor de qualquer região não especificada em chld. Observe que os divisores são diferentes para as sintaxes distintas (vírgulas em uma, barras verticais na outra). Se não for usado, as regiões serão contornadas, mas não coloridas.

  • chd usado: a segunda e as cores posteriores descrevem um intervalo de cores. É necessário ter um valor chd para cada país do chld. O país correspondente será colorido no intervalo de <first_region_color> (valor mínimo do intervalo de dados) a <last_region_color> (valor máximo do intervalo de dados). Veja exemplos na tabela abaixo.
  • chd não usado: a segunda e as últimas cores são aplicadas às regiões correspondentes em chld, na ordem listada. Se houver mais países do que cores, a última cor será aplicada a todos os países que sobrarem na lista.
chtt, chts Opcional Título e estilo do gráfico
chm Opcional Marcadores do gráfico
chma Opcional Margens do gráfico
chf=bg... Opcional Preenchimentos sólidos (somente plano de fundo)
chdl Opcional Legendas do gráfico

 

Exemplos

Descrição Exemplo

Neste exemplo:

  • cht=map:fixed=-60,0,80,-35: a área de zoom do gráfico é de -60 a 80 de latitude e 0 de longitude a -35 de longitude
  • chld=CA-BC|CN|IT|GR|US-UT: as regiões destacadas são a Colúmbia Britânica, China, Itália, Grécia e Utah.
  • chm: marcadores para as sinalizações.
  • chma=0,110,0,0: a borda lateral direita aumentou para 110 pixels, para se ajustar à legenda.
  • chtt=Last+Five+Olympic+Hosts: título do gráfico, com "+" para indicar espaços.

Mapa dos cinco países sediados nas Olimpíadas, mostrando marcadores de bandeiras.
cht=map:fixed=-60,0,80,-35
chs=600x350
chld=CA-BC|CN|IT|GR|US-UT
chdl=Vancouver|Beijing|Torino|Athens|Salt+Lake+City
chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274
chtt=Last+Five+Olympic+Hosts
chm=f2010+Winter,000000,0,0,10
f2008+Summer,000000,0,1,10
f2008+Winter,000000,0,2,10,1,:-5:10
f2004+Summer,000000,0,3,10
f2004+Summer,000000,0,4,10
chma=0,110,0,0

Um mapa mostrando a França, com duas regiões em destaque:

  • chld=FR-D|FR-B|FR: três regiões são especificadas: Borgonha (ao leste), Aquitânia (ao sudoeste) e França.
  • chco=676767|FF4444|44FF44|4444FF: nenhum parâmetro chd foi especificado no mapa, então cada valor de cor após o primeiro é usado para especificar o país correspondente. Vermelho para Borgonha, verde para a Aquitânia, azul para a França. Observe que as cores posteriores não ocultam as anteriores.
Mapa da França com duas províncias em destaque.
chld=FR-D|FR-B|FR
chco=676767|FF4444|44FF44|4444FF

Este mapa demonstra como usar os gradientes de cor.

  • chd=t:0,50,100: o parâmetro chd indica um gradiente de cor. Aqui, a codificação de texto é especificada e tem um intervalo de 0 a 100.
  • chco=CCCCCC,FF0000,000000: a cor do plano de fundo é cinza claro (CCCCCC) e a faixa de cores vai de vermelho (FF0000) a preto (000000). O país do meio mostrado é uma cor intermediária nesse gradiente.
Mapa mostrando gradientes de cor.
chd=t:0,50,100
chco=CCCCCC,FF0000,000000
O mapa pode ser cortado dentro do tamanho de gráfico especificado. Isso ocorre porque não distorcemos um mapa para que ele caiba dentro de um tamanho de gráfico especificado, mas limitamos o mapa às regiões que você especifica em chld. Portanto, para evitar regiões cortadas dentro dos limites do gráfico, talvez seja necessário ajustar o tamanho do mapa manualmente.
Mapa quadrado de um país de formato alongado

cht=map
chs=300x300
chld=GB

A Inglaterra é naturalmente longa e fina, então especificar um mapa quadrado inclui uma área cortada no lado direito:

Mapa quadrado de um país de formato alongado

cht=map
chs=180x300
chld=GB

Ajuste a largura do gráfico para cortar o excesso. Observe como ainda há cortes na parte de baixo. Isso precisa ser corrigido reduzindo a altura do mapa.

Mapa quadrado de um país de formato alongado

cht=map
chs=180x300
chld=GB

A França tem um formato muito mais regular, por isso se encaixa mais naturalmente em um mapa quadrado.

Voltar ao início

Como aplicar zoom e centralizar

Por padrão, o gráfico é ampliado e centralizado para centralizar as regiões selecionadas e ajustá-las o máximo possível à área renderizada, dentro do tamanho definido do mapa. No entanto, é possível personalizar o nível de centralização e zoom do gráfico de duas maneiras diferentes:

Por pixel

Para ajustar as bordas pelo tamanho em pixels, use este formato:

cht=map:auto=<left_border>,<right_border>,<top_border>,<bottom_border>

O tamanho de cada borda é a borda adicional a ser exibida, em pixels, além do nível de zoom calculado automaticamente.

Só é possível diminuir o zoom (valores positivos). Não é possível aumentar o zoom (valores negativos) mais perto do que o nível de zoom padrão usando o zoom de pixels.

Exemplos:

Todos estes exemplos mostram Londres (latitude)

Sem zoom (padrão) Com zoom diminuído em 30 pixels por lado Com zoom diminuído e ajustado para a direita

Excesso de mapa vazio na parte de baixo.
cht=map

Mapa em excesso na parte inferior.
cht=map:auto=30,30,30,30
Área com zoom reenquadrada.
cht=map:auto=50,0,80,0

 

Por latitude e longitude

Use a sintaxe abaixo para especificar as bordas superior, inferior, esquerda e direita do mapa renderizado por latitude e longitude:

cht=map:fixed=<bottom_border_lat>,<left_border_long>,<top_border_lat>,<right_border_long>

Em que <bottom_border_lat> e <top_border_lat> especificam a latitude das bordas inferior e superior, e <left_border_long> e <right_border_long> especificam a longitude das bordas da esquerda e da direita.

Observação: devido à distorção da projeção de Mercator (basicamente, projetar um mapa curvo em uma imagem plana), o foco em uma faixa alta e estreita pode causar algumas diferenças inesperadas de tamanho no mapa.

Exemplos:

Os exemplos a seguir mostram Londres (destacada em azul), que tem 0,1° de longitude e 51,5° de latitude. O mapa é cortado porque está tentando mostrar apenas a Grã-Bretanha (conforme especificado) e preenche o gráfico designado sem distorção.

Centralizado Latitudes alteradas em +10* Zoom aumentado pela redução de todos os valores

cht=map:fixed=40,-10,60,10


cht=map:fixed=50,-10,70,10


cht=map:fixed=48,-3,54,3

O tamanho da imagem do meio é um pouco menor do que a primeira, mesmo que tenhamos movido o mesmo número de graus para cima. porque estamos projetando uma esfera 3D em uma imagem 2D. Você teria que aumentar a largura do segundo gráfico para deixá-lo do mesmo tamanho do primeiro.

Voltar ao início

Recursos padrão

Os demais recursos nesta página são recursos de gráficos padrão.

Título do gráfico chtt, chts [todos os gráficos]

É possível especificar o texto, a cor e o tamanho da fonte do título de um gráfico.

Sintaxe

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

 

chtt: especifica o título do gráfico.

<chart_title>
Título a ser exibido no gráfico. Não é possível especificar onde ele aparece, mas você pode especificar o tamanho e a cor da fonte. Use um sinal de + para indicar espaços e uma barra vertical ( | ) para indicar quebras de linha.

 

chts [opcional]: cores e tamanho da fonte do parâmetro chtt.

<color>
A cor do título, no formato hexadecimal RRGGBB. A cor padrão é preto.
<font_size>
Tamanho da fonte do título, em pontos.
<opt_alignment>
[Opcional] Alinhamento do título. Escolha um dos seguintes valores de string, diferenciando maiúsculas de minúsculas: "l" (à esquerda), "c" (centrado) e "r" (à direita). O padrão é "c".

 

Exemplos

Descrição Exemplo

Gráfico com título, que usa a cor e o tamanho da fonte padrão.

Especifique um espaço com um sinal de adição (+).

Use uma barra vertical (|) para forçar uma quebra de linha.

chts não está especificado aqui.

Gráfico de barras verticais com título
chtt=Site+visitors+by+month|
January+to+July

Um gráfico com um título azul de 20 pontos alinhado à direita.

Gráfico de barras verticais com título em azul e tamanho de 20 pixels
chtt=Site+visitors
chts=FF0000,20,r

Voltar ao início

Margens do gráfico chma [todos os gráficos]

Você pode especificar o tamanho das margens do gráfico, em pixels. As margens são calculadas a partir do tamanho de gráfico especificado (chs). Aumentar o tamanho da margem não aumenta o tamanho total do gráfico, mas reduz a área do gráfico, se necessário.

As margens são, por padrão, o espaço que sobra depois que o tamanho do gráfico é calculado. Seu valor padrão varia de acordo com o tipo de gráfico. As margens especificadas são um valor mínimo. Se a área do gráfico deixar espaço para margens, o tamanho delas será o que sobrar. Não é possível comprimir as margens menores do que o necessário para legendas e rótulos. Veja um diagrama que mostra as partes básicas de um gráfico:

Margem do gráfico, área da legenda e área do gráfico

As margens do gráfico incluem os rótulos do eixo e a área da legenda. A área da legenda é redimensionada automaticamente para se ajustar ao texto exatamente, a menos que você especifique uma largura maior usando chma. Nesse caso, ela aumentará o tamanho da margem, reduzindo a área do gráfico. Não é possível cortar uma legenda especificando um tamanho muito pequeno, mas você pode fazer com que ela ocupe mais espaço do que o necessário.

Dica: em um gráfico de barras, se as barras tiverem um tamanho fixo (o padrão), a largura da área do gráfico não poderá ser reduzida. Especifique um tamanho de barra menor ou redimensionável usando chbh.

 

Sintaxe

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
<left_margin>, <right_margin>, <top_margin>, <bottom_margin>.
Tamanho mínimo da margem ao redor da área do gráfico, em pixels. Aumente esse valor e inclua padding para evitar que os rótulos dos eixos encostem nas bordas do gráfico.
<opt_legend_width>, <opt_legend_height>
[Opcional] Largura da margem ao redor da legenda, em pixels. Use isso para evitar que a legenda encoste na área do gráfico ou nas bordas da imagem.

 

Exemplos

Descrição Exemplo

Neste exemplo, o gráfico tem uma margem mínima de 30 pixels em cada lado. Como a legenda do gráfico tem mais de 30 pixels de largura, a margem no lado direito é definida como a largura da legenda do gráfico e é diferente das outras margens.

Os rótulos dos eixos estão fora da área do gráfico e, portanto, são desenhados no espaço da margem.

Gráfico de linhas com plano de fundo em cinza e margens dos dois lados.
chma=30,30,30,30

Para adicionar uma margem ao redor da legenda, defina um valor para os parâmetros <opt_legend_width> e <opt_legend_height>.

Neste exemplo, a legenda tem largura de aproximadamente 60 pixels. Se você definir <opt_legend_width> como 80 pixels, a margem se estenderá por 20 pixels fora da legenda.

Gráfico de linhas com plano de fundo em cinza e margens dos dois lados.
chma=20,20,20,30|80,20

Voltar ao início

Preenchimento do plano de fundo chf [Todos os gráficos]

Você pode especificar cores de preenchimento e estilos para a área de dados e/ou todo o plano de fundo do gráfico. Os tipos de preenchimento incluem uniforme, listrado e gradiente. É possível especificar preenchimentos diferentes para áreas distintas, por exemplo, a área inteira do gráfico ou apenas a área de dados. O preenchimento da área do gráfico substitui o preenchimento do plano de fundo. Todos os preenchimentos são especificados usando o parâmetro chf, e é possível misturar diferentes tipos de preenchimento (sólidos, listras, gradientes) no mesmo gráfico, separando os valores com barra vertical ( | ). Os preenchimentos da área do gráfico substituem os preenchimentos do plano de fundo do gráfico.

Preenchimentos sólidos chf [todos os gráficos]

Você pode especificar um preenchimento sólido para o plano de fundo e/ou a área do gráfico ou atribuir um valor de transparência para o gráfico inteiro. Você pode especificar vários preenchimentos usando o caractere de barra vertical (|). (Maps: somente segundo plano).

Sintaxe

chf=<fill_type>,s,<color>|...
<fill_type>
A parte do gráfico que está sendo preenchida. Especifique um dos seguintes valores:
  • bg: preenchimento do plano de fundo
  • c: preenchimento da área do gráfico. Incompatível com gráficos de mapa.
  • a: torna o gráfico inteiro transparente, incluindo o plano de fundo. Os seis primeiros dígitos de <color> são ignorados e apenas os dois últimos (o valor de transparência) são aplicados ao gráfico inteiro e a todos os preenchimentos.
  • b<index>: preenchimento sólido de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchida com uma cor sólida. O efeito é semelhante à especificação de chco em um gráfico de barras. Consulte Cores das séries do gráfico de barras para ver um exemplo.
s
Indica um preenchimento sólido ou transparente.
<color>
A cor de preenchimento, no formato hexadecimal RRGGBB. Para transparências, os primeiros seis dígitos são ignorados, mas precisam ser incluídos mesmo assim.

 

Exemplos

Descrição Exemplo

Neste exemplo, o segundo plano do gráfico é preenchido com cinza claro (EFEFEF).

Gráfico de linha vermelha com preenchimento da área do gráfico em preto.

chf=bg,s,EFEFEF

Neste exemplo, o segundo plano do gráfico é preenchido com cinza claro (EFEFEF) e a área em preto (000000).

Gráfico de linha vermelha com área do gráfico em preto e plano de fundo em cinza claro.

chf=c,s,000000|
bg,s,EFEFEF

Neste exemplo, aplicamos uma transparência de 50% em todo o gráfico (80 em hexadecimal é 128, ou cerca de 50% de transparência). Observe o plano de fundo das células da tabela que aparece no gráfico.

Gráfico de dispersão com pontos em azul e transparência de 50%.

chf=a,s,00000080

Voltar ao início

Texto e estilo da legenda do gráfico chdl, chdlp, chdls [Todos os gráficos]

A legenda é uma seção lateral do gráfico que fornece uma pequena descrição de texto de cada série. É possível especificar o texto associado a cada série nessa legenda e especificar em que parte do gráfico ela deve aparecer.

Consulte também chma, para saber como definir as margens ao redor da legenda.

Uma observação sobre os valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Você encontra um codificador de URL na documentação de visualização do Google.

Sintaxe

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

 

chdl: o texto de cada série a ser exibido na legenda.

<data_series_label>
O texto das entradas de legenda. Cada rótulo se aplica à série correspondente na matriz chd. Use um sinal de + em um espaço. Se você não especificar esse parâmetro, o gráfico não receberá uma legenda. Não há como especificar uma quebra de linha em um rótulo. A legenda normalmente se expandirá para conter o texto dela, e a área do gráfico será reduzida para acomodar a legenda.

chdlp : [opcional] a posição da legenda e a ordem das entradas da legenda. É possível especificar <position> e/ou <label_order>. Se você especificar ambos, separe-os com um caractere de barra. Adicione um "s" a qualquer valor se quiser que as entradas de legenda vazias em chdl sejam ignoradas na legenda. Exemplos: chdlp=bv, chdlp=r, chdlp=bv|r e chdlp=bvs|r.

<opt_position>
[Opcional] Especifica a posição da legenda no gráfico. Para especificar mais padding entre a legenda e a área do gráfico ou a borda da imagem, use o parâmetro chma. Escolha um dos seguintes valores:
  • b: legenda na parte inferior do gráfico, entradas de legenda em uma linha horizontal.
  • bv: legenda na parte inferior do gráfico, entradas de legenda em uma coluna vertical.
  • t: legenda na parte superior do gráfico, entradas de legenda em uma linha horizontal.
  • tv: legenda na parte superior do gráfico, entradas de legenda em uma coluna vertical.
  • r - [Padrão] Legenda à direita do gráfico, entradas de legenda em uma coluna vertical.
  • l: legenda à esquerda do gráfico, entradas de legenda em uma coluna vertical.
<opt_label_order>
[Opcional] A ordem em que os rótulos são mostrados na legenda. Escolha uma destas opções:
  • l - [Padrão para legendas verticais] Exibe os rótulos na ordem informada para chdl.
  • r: mostra os rótulos na ordem inversa, conforme informado ao chdl. Isso é útil em gráficos de barras empilhadas para mostrar a legenda
    na mesma ordem em que as barras aparecem.
  • a - [Padrão para legendas horizontais] Ordem automática: basicamente, significa classificar por comprimento, o mais curto primeiro, conforme medido em blocos de 10 pixels. Quando dois elementos tiverem o mesmo comprimento (divididos em blocos de 10 pixels), o que estiver listado primeiro aparecerá primeiro.
  • 0,1,2...: ordem de rótulos personalizada. Trata-se de uma lista de índices de rótulos baseados em zero de chdl, separados por vírgulas.

chdls: [opcional] especifica a cor e o tamanho da fonte do texto da legenda.

<color>
A cor do texto da legenda, no formato hexadecimal RRGGBB.
<size>
O tamanho do ponto do texto da legenda.

 

Exemplos

Descrição Exemplo

Dois exemplos de legendas. Especifique o texto da legenda na mesma ordem da série de dados.

Gráfico de linhas em vermelho, azul e verde, com as respectivas legendas

chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF

Diagrama de Venn com dois círculos menores contidos em um círculo maior


chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

O primeiro gráfico demonstra entradas de legenda horizontais (chdlp=t, o layout padrão é horizontal) e o segundo demonstra entradas de legenda verticais na parte inferior (chdlp=bv).

Diagrama de Venn com dois círculos menores contidos em um círculo maior
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


Diagrama de Venn com dois círculos menores contidos em um círculo maior
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

Este exemplo demonstra a alteração do tamanho da fonte.

Diagrama de Venn com dois círculos menores contidos em um círculo maior
chdls=0000CC,14

Voltar ao início

Marcadores de forma chm [barras, linhas, radar, dispersão]

Você pode especificar marcadores gráficos para todos ou alguns pontos de dados em um gráfico. Se dois ou mais marcadores ocuparem o mesmo ponto, eles serão desenhados na ordem em que aparecerem no parâmetro chm. Você também pode criar marcadores de texto em pontos de dados, o que é abordado em Marcadores de pontos de dados.

Você pode combinar marcadores de forma com quaisquer outros parâmetros chm usando uma barra vertical ( | ) para separar os parâmetros chm.

Sintaxe

Especifique um conjunto com os parâmetros a seguir para cada série a ser marcada. Para marcar várias séries, crie conjuntos de parâmetros adicionais, delimitados por uma barra vertical. Não é necessário marcar todas as séries. Se você não atribuir marcadores a uma série de dados, ela não receberá marcadores.

Os marcadores de forma se comportam de maneira um pouco diferente nos gráficos de dispersão. Consulte a documentação para mais informações.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[Opcional] Se você usar o caractere opcional "@" antes do tipo de marcador, os <opt_which_points> precisam usar o formato x:y.
<marker_type>
O tipo de marcador que será usado. Especifique um dos seguintes tipos:
  • a: seta
  • c - Cruzado
  • C: retângulo. Se for um marcador de retângulo, você precisa ter pelo menos duas séries de dados, em que a série 0 especifica a borda inferior e a série 1 especifica a borda superior. <size> especifica a largura do retângulo em pixels.
  • d: losango
  • E: marcador da barra de erro ( ). Esse marcador requer a criação de duas séries de dados, um valor para a parte inferior e o ponto correspondente na segunda série para a parte superior. Ele também expõe uma sintaxe <size> estendida: line_thickness[:top_and_bottom_width], em que top_and_bottom_width é opcional. Veja os exemplos a seguir.
  • h: linha horizontal do gráfico a uma altura especificada. O único formato válido para o parâmetro <opt_which_points> é n.d..
  • H: linha horizontal que atravessa o marcador de dados especificado. É compatível com uma sintaxe <size> estendida que permite especificar um comprimento de linha exato: line_thickness[:length], em que :length é opcional, e o padrão é a largura total da área do gráfico.
  • o: círculo
  • s: quadrado
  • v: linha vertical do eixo x até o ponto dos dados
  • V: linha vertical de comprimento ajustável. É compatível com uma sintaxe estendida do valor <size>, que permite especificar um comprimento de linha exato: line_thickness[:length], em que :length é opcional, e o padrão é a altura completa da área do gráfico. O marcador é centralizado no ponto de dados.
  • x: um X
<color>
A cor dos marcadores dessa série, no formato hexadecimal RRGGBB.
<series_index>
O índice da série de dados em que os marcadores serão desenhados, começando no zero. Ignorado para marcadores h e marcadores que especificam a localização pela posição x/y (começa com o caractere @). Você pode usar séries de dados ocultas como uma fonte para marcadores. Consulte Gráficos compostos para mais informações. Os gráficos de barras verticais agrupadas são compatíveis com uma sintaxe estendida especial para alinhar marcadores com barras específicas.
<opt_which_points>
[Opcional] Em quais pontos desenhar marcadores. O padrão é todos os marcadores. Use um dos seguintes valores:
  • n.d: onde o marcador deve ser desenhado. O significado depende do tipo de marcador:
    • Todos os tipos, exceto h: em qual ponto de dados o marcador deve ser desenhado, em que n.d é o índice da série baseado em zero. Se você especificar um valor não inteiro, a fração indicará um ponto intermediário calculado. Por exemplo, 3,5 significa meio caminho entre os pontos 3 e os pontos 4.
    • h - um número de 0,0 a 1,0, em que 0,0 é a parte inferior do gráfico e 1,0 é o topo do gráfico.
  • -1: desenha um marcador em todos os pontos de dados. Você também pode deixar esse parâmetro vazio para desenhar em todos os pontos de dados.
  • -n: desenha um marcador a cada no ponto de dados. Valor de ponto flutuante. Se n for menor que 1, o gráfico calculará pontos intermediários adicionais para você. Por exemplo, -0,5 colocará o dobro de marcadores do que pontos de dados.
  • start:end:n: desenhe um marcador em cada no ponto de dados em um intervalo, de valores de índice de start a end, inclusive. Todos os parâmetros são opcionais (podem estar ausentes). Portanto, 3::1 seria do quarto elemento para o último, etapa 1, e a omissão desse parâmetro usaria o padrão first:last:1 por padrão. Todos os valores podem ser números de ponto flutuante. start e end podem ser negativos, para contar de trás para frente a partir do último valor. Se start e end forem negativos, verifique se estão listados em ordem crescente de valor (por exemplo, -6:-1:1). Se o valor da etapa n for menor que 1, serão calculados pontos de dados adicionais por meio da interpolação dos valores de dados fornecidos. Os valores padrão são first:last:1
  • x:y: desenhe um marcador em um ponto x/y específico no gráfico. Este ponto não precisa estar em uma linha. Adicione o caractere @ antes do tipo de marcador para usar essa opção. Especifique as coordenadas como valores de ponto flutuante, em que 0:0 é o canto inferior esquerdo e 1:1 é o canto superior direito. Por exemplo, para adicionar um losango vermelho de 15 pixels ao centro de um gráfico, use @d,FF0000,0,0.5:0.5,15.
<size>
O tamanho do marcador, em pixels. A maioria usa um único valor numérico para esse parâmetro. Os marcadores V, H e S são compatíveis com a sintaxe <size>[:width], em que a segunda parte opcional especifica o comprimento da linha ou do marcador.
<opt_z_order>
[Opcional] A camada em que o marcador será desenhado, em comparação com outros marcadores e com todos os outros elementos do gráfico. Esse é um número de ponto flutuante de -1,0 a 1,0, inclusive, em que -1,0 é o mínimo e 1,0 é o topo. Os elementos do gráfico (linhas e barras) ficam logo abaixo de zero. Se dois marcadores tiverem o mesmo valor, eles serão desenhados na ordem informada pelo URL. O valor padrão é 0.0 (logo acima dos elementos do gráfico).
<opt_offset>
[Opcional] Permite especificar deslocamentos horizontais e verticais do local especificado. Esta é a sintaxe, que usa um delimitador : (reserved:<horizontal_offset>:<vertical_offset>). Se especificado, você pode incluir um valor vazio na string de parâmetro chm para <opt_z_order>. Exemplos: o,FF9900,0,4,12,,:10 o,FF9900,0,4,12.0,,:-10:20 o,FF9900,0,4,12,1,::20
  • reservado: deixe em branco.
  • <horizontal_offset>: um número positivo ou negativo que especifica o deslocamento horizontal, em pixels. Opcional. Deixe em branco se não for usado.
  • <vertical_offset>: um número positivo ou negativo que especifica o deslocamento vertical, em pixels. Opcional. Deixe em branco se não for usado.

 

Exemplos

Descrição Exemplo

Este é um exemplo com vários marcadores de forma e linha.

  • a,990066,0,0.0,9.0: seta roxa, primeira série, primeiro ponto, tamanho 9.
  • c,FF0000,0,1.0,20.0: cruz vermelha, primeira série, segundo ponto, tamanho 9.
  • d,80C65A,0,2,20.0: losango verde, primeira série, terceiro ponto, tamanho 9.
  • H,000000,0,3,1:40: linha horizontal preta, primeira série, ponto de dados 3, um pixel de largura, 40 pixels de comprimento.
  • o,FF9900,0,4.0,12.0: círculo laranja, primeira série, quinto ponto, tamanho 12.
  • s,3399CC,0,5.0,11.0: quadrado azul, primeira série, sexto ponto, tamanho 11.
  • v,BBCCED,0,6.0,1.0: linha vertical até o ponto, primeira série, sétimo ponto, um pixel de largura.
  • V,3399CC,0,7.0,1.0: linha vertical da base ao topo do gráfico, primeira série, oitavo ponto, um pixel de largura.
  • x,FFCC33,0,8.0,20.0: "X" amarelo, primeira série, nono ponto, tamanho 20.
  • H,FFFF00,0,9,2: linha horizontal amarela da largura do gráfico no ponto de dados 9.
  • h,FF0000,0,0.5,1: linha horizontal vermelha na altura designada, primeira série, na metade do gráfico, um pixel de largura.
Gráfico de linhas com marcadores
chm=
  a,990066,0,0.0,9.0|
  c,FF0000,0,1.0,20|
  d,80C65A,0,2.0,20.0|
  H,000000,0,3,1:40|
  o,FF9900,0,4.0,12.0|
  s,3399CC,0,5.0,11.0|
  v,BBCCED,0,6,1.0|
  V,3399CC,0,7,1.0|
  x,FFCC33,0,8,20|
  H,FFFF00,0,9,2|
  h,FF0000,0,0.5,1

Este é um exemplo que usa losangos para uma série de dados e círculos para a outra série de dados.

Se dois ou mais marcadores ocuparem o mesmo ponto, eles serão desenhados na ordem em que aparecem no parâmetro chm. Aqui, o círculo é o primeiro marcador especificado com chm, então ele é desenhado primeiro. O losango é especificado e desenhado em segundo lugar, o que resulta em ele sendo desenhado no topo do círculo.

Gráfico de linhas, uma com círculos de 15 pixels em cada ponto de dados e a outra com losangos de 10 pixels. Um losango é desenhado no ponto de interseção das duas linhas
chm=
  o,FF9900,0,-1,15.0|
  d,FF0000,1,-1,10.0

Este é um gráfico de linhas com um marcador em cada segundo ponto de dados (-2 significa um ponto em outro).

Gráfico de linhas com um marcador a cada dois pontos
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-2,6
Este gráfico de linhas tem o dobro de marcadores em comparação com pontos de dados (-0,5 significa cada meio ponto). Gráfico de linhas com um marcador a cada dois pontos
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-.5,6
Este exemplo mostra como usar os marcadores h e v para criar linhas de grade com cores e espessura personalizadas. O valor da ordem z (o último valor) é definido como -1 para que as linhas de grade sejam desenhadas abaixo da linha de dados.
Gráfico de linhas com um marcador a cada dois pontos
chm=
  h,76A4FB,0,0:1:.2,2,-1|
  V,76A4FB,0,::2,0.5,-1

Este gráfico adiciona linhas de preenchimento verticais a um gráfico de linhas:

  • v: linhas verticais no gráfico
  • FF0000: linhas vermelhas
  • 0: índice da série
  • : :.5: especificador de intervalo: do início ao fim, a cada 0,5 ponto.
  • 2: espessura de 2 pixels.
Gráfico de linhas com um marcador a cada dois pontos
chm=
  v,FF0000,0,::.5,2
Este exemplo adiciona uma seta e um marcador de texto ao gráfico usando coordenadas exatas. O primeiro marcador D é a linha traçada abaixo das barras. O segundo marcador é a seta, e o terceiro é o texto da seta.
chm=
  D,003971,1,0,3|
  @a,000000,0,.25:.75,7|
  @tExpected,000000,0,.35:.85,10
Uma linha horizontal fixa em um ponto de dados específico (H) pode ser útil para mostrar valores relativos ou enfatizar a altura de um valor de dados em um gráfico.
chm=H,FF0000,0,18,1

Este gráfico demonstra os marcadores que podem especificar a espessura e o comprimento da linha no parâmetro <size>.

  • E,000000,0,6,1:20: barra de erro preta com linhas de 1 pixel de largura e barras de cima e de baixo de 20 pixels de comprimento. A parte inferior está ancorada no ponto 8 da série 0 e a parte superior está ancorada no ponto 8 da série 1.
  • H,990066,1,2,5:50: linha horizontal roxa com cinco pixels de largura e 50 pixels de comprimento, centralizada no ponto de dados 2.
  • V,3399CC,0,8,3:50- linha vertical azul com largura de três pixels e comprimento de 50 pixels, centralizada no ponto de dados 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50%7,1,2,5:50%CEchm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

Voltar ao início

Marcadores de texto e valor de dados chm [barras, linhas, radar, dispersão]

Rotule pontos específicos no gráfico com texto personalizado ou com versões formatadas dos dados de um determinado momento.

Você pode combinar qualquer marcador chm usando uma barra vertical ( |) para separar os conjuntos de parâmetros chm.

Uma observação sobre os valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Você encontra um codificador de URL na documentação de visualização do Google.

Sintaxe

Especifique um conjunto com os parâmetros a seguir para cada série a ser marcada. Para marcar várias séries, crie outros conjuntos de parâmetros, delimitados por uma barra vertical. Não é necessário marcar todas as séries. Se você não atribuir marcadores a uma série de dados, ela não receberá nenhum marcador.

chm=
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
    |...|
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<marker_type>
O tipo de marcador que será usado. É possível escolher entre os seguintes tipos:
  • f<text>: uma sinalização que contém texto. Especifique o caractere "f", seguido por texto codificado para URL personalizado. Para fazer o escape de vírgulas nos marcadores de texto, coloque um \ antes da vírgula. Exemplo: fHello\,+World!
  • t<text>: um marcador de texto simples. Especifique o caractere "t" seguido por texto codificado para URL personalizado. Para fazer o escape de vírgulas nos marcadores de texto, coloque um \ antes da vírgula. Exemplo: tHello\,+World!
  • A<text>: um marcador de anotação. É semelhante a um marcador de sinalização, mas os marcadores coordenam a posição de modo que não se sobreponham. O único formato válido para <opt_which_points> é n.d, que indica o índice de um ponto na série.
  • N<formatting_string>: o valor dos dados nesse ponto, com formatação opcional. Se você não usar o parâmetro chds (escalonamento personalizado), ele fornecerá o valor codificado exato. Se você usar esse parâmetro com qualquer tipo de formato, o valor será dimensionado para o intervalo que você especificar. Confira abaixo um exemplo de chds com marcadores numéricos. Com esse tipo de marcador em um gráfico de barras empilhadas, se você especificar -1 para <series_index>, será exibido um marcador que mostra a soma de todos os valores nessa barra. A sintaxe da string de formatação é a seguinte:
           <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>.
    Todos esses elementos são opcionais. Confira o significado de cada elemento:
    • <preceding_text>: texto que precede cada valor.
    • *...*: um bloco opcional entre asteriscos literais, em que é possível especificar detalhes de formatação para números. Os seguintes valores são aceitos e todos opcionais:
      • <number_type>: o formato numérico, para valores numéricos. Escolha uma das opções a seguir:
        • f: formato de ponto flutuante [Padrão]. Considere também especificar a precisão com o valor <decimal_places>.
        • p: formato de porcentagem. O sinal de % é acrescentado automaticamente. Observação:ao usar esse formato, os valores de dados de 0,0 a 1,0 são mapeados para 0 a 100% (por exemplo, 0,43 será mostrado como 43%).
        • e: formato de notação científica.
        • c<CUR>: formata o número na moeda especificada, com o marcador de moeda apropriado. Substitua <CUR> por um código de moeda de três letras. Exemplo: cEUR para euros. É possível encontrar uma lista de códigos no site da ISO, embora nem todos os símbolos sejam compatíveis.
      • <decimal_places>: um número inteiro que especifica quantas casas decimais serão mostradas. O valor é arredondado (não truncado) para esse comprimento. O padrão é 2.
      • z: exibe zeros à direita. O padrão é não.
      • s: exibe separadores de grupo. O padrão é não.
      • x ou y: exibe os dados da coordenada x ou y, conforme especificado. O significado dos dados x varia de acordo com o tipo de gráfico: experimente com seu gráfico para determinar o que significa. O padrão é 'y'.
    • <following_text>: texto que vem depois de cada valor.
<color>
A cor dos marcadores para esse conjunto, no formato hexadecimal RRGGBB.
<series_index>
O índice da série de dados em que os marcadores serão desenhados, começando no zero. Se for um gráfico de barras empilhadas e o tipo de marcador for N (valores de pontos de dados), você poderá especificar -1 para criar um marcador de valor somado para cada pilha de barras. Veja um exemplo abaixo.
<opt_which_points>
[Opcional] Em quais pontos desenhar marcadores. O padrão é todos os marcadores. Use um dos seguintes valores:
  • n.d: em qual ponto de dados o marcador será desenhado, em que n.d é o índice da série baseado em zero. Se você especificar um valor não inteiro, a fração indicará um ponto intermediário calculado. Por exemplo, 3,5 significa meio caminho entre os pontos 3 e 4.
  • -1: desenha um marcador em todos os pontos de dados. Você também pode deixar esse parâmetro vazio para desenhar em todos os pontos de dados.
  • -n: desenha um marcador a cada no ponto de dados.
  • start:end:n: desenhe um marcador em cada no ponto de dados de um intervalo, de valores de índice start a end, inclusive. Todos os parâmetros são opcionais (podem estar ausentes). Portanto, 3::1 estaria do quarto elemento para o último, etapa 1, e a omissão desse parâmetro usaria o padrão first:last:1 por padrão. Todos os valores podem ser números de ponto flutuante. start e end podem ser negativos, para contar de trás para frente a partir do último valor. Se start e end forem negativos, verifique se estão listados em ordem crescente de valor (por exemplo, -6:-1:1). Se o valor da etapa n for menor que 1, pontos de dados adicionais serão calculados por meio da interpolação dos valores de dados fornecidos. Os valores padrão são first:last:1
  • x:y - [Não compatível com marcadores do tipo N] Desenhe um marcador em um ponto x/y específico no gráfico. Esse ponto não precisa estar em uma linha. Adicione o caractere arroba (@) antes do tipo de marcador para usar essa opção. Especifique as coordenadas como valores de ponto flutuante, em que 0:0 é o canto inferior esquerdo, 0.5:0.5 é o centro e 1:1 é o canto superior direito. Por exemplo, para adicionar um losango vermelho de 15 pixels ao centro de um gráfico, use @d,FF0000,0,0.5:0.5,15.
<size>
: o tamanho do marcador em pixels. Se for um gráfico de dispersão com uma terceira série de dados (usada para especificar tamanhos de pontos), esse valor será dimensionado pelo intervalo de dados. Então, se o intervalo de dados for de 0 a 100 e <size> for 30, um valor de dados de 100 será de 30 pixels de largura, um valor de dados de 50 será de 15 pixels de largura e assim por diante.
<opt_z_order>
[Opcional] A camada em que o marcador será desenhado, em comparação com outros marcadores e com todos os outros elementos do gráfico. Esse é um número de ponto flutuante de -1,0 a 1,0, inclusive, em que -1,0 é o mínimo e 1,0 é o topo. Os elementos do gráfico (linhas e barras) ficam logo abaixo de zero. Se dois marcadores tiverem o mesmo valor, eles serão desenhados na ordem informada pelo URL. O valor padrão é 0,0 (logo acima dos elementos do gráfico).
<opt_placement>
[Opcional] Outros detalhes do posicionamento que descrevem onde colocar esse marcador em relação ao ponto de dados. Você pode especificar o posicionamento relativo horizontal e/ou vertical, bem como deslocamentos. A sintaxe de posicionamento é uma string com delimitadores : conforme mostrado aqui. Todos os elementos são opcionais: <horizontal_and_vertical_justification>:<horizontal_offset>:<vertical_offset>. Se especificado, você pode incluir um valor vazio na string de parâmetro chm para <opt_z_order>. Exemplos: N,000000,0,1,10,,b, N,000000,0,1,10,,lv e N,000000,0,1,10,,r::10.
horizontal_and_vertical_justification
O ponto de fixação do marcador. Esse comportamento é oposto à justificativa. Portanto, uma âncora à esquerda coloca o marcador à direita do ponto de dados. Você pode escolher um justificador horizontal e/ou vertical na lista a seguir:
  • Posicionamento horizontal: "l", "h" ou "r": ancorado à esquerda, ao centro ou à direita, horizontalmente. O padrão é "l".
  • Posicionamento vertical: "b", "v", "t": ancorado na parte inferior, no meio ou na parte superior, verticalmente. O padrão é "b".
  • Posicionamento relativo às barras [somente para gráficos de barras]: "s", "c", "e": base, centro ou parte de cima de uma barra. Para gráficos empilhados, isso se refere à seção da barra em cada série, não à barra inteira. Se o índice da série fornecido for -1 (total da pilha), ele será em relação à barra inteira. Pode ser combinado com valores de posicionamento vertical, por exemplo, "be" ou "vs". O valor padrão é "e".
horizontal_offset
Deslocamento horizontal para o marcador, em pixels. O padrão é 0.
vertical_offset
Deslocamento vertical do marcador, em pixels. Padrão para gráficos que não sejam de barras: 15; padrão para gráficos de barras: 2.

Descrição Exemplo

Este é um exemplo de rótulos de valor em um gráfico de barras.

O primeiro gráfico (N*p0*) especifica um marcador de valor de dados, com valores mostrados como porcentagem, arredondados para zero casas decimais, em preto, em todos os valores, em texto de 11 pontos. Observe que os valores de dados estão todos entre 0,0 e 1,0, que, no formato de porcentagem, são movidos para duas casas decimais.

O segundo gráfico (N*cEUR1*) mostra os mesmos valores formatados como valores em euro, com uma casa decimal, em preto, em todos os valores, em texto de 11 pontos.

Gráfico de barras com rótulos de percentuais acima de cada barra
chm=
  N*p0*,000000,0,-1,11
chd=t:
  0.4356,0.3562,0.4834,0.575,0.673,0.6091


Gráfico de barras com rótulos em euro acima de cada barra


chm=
  N*cEUR1*,000000,0,-1,11

Use o parâmetro chds para dimensionar o valor numérico exibido. É possível usar chds para todos os formatos de dados, incluindo codificação simples e estendida. Isso não afeta o tamanho da barra nem os rótulos do eixo, apenas o valor do marcador de dados.

Este exemplo mostra um gráfico com valores de codificação simples de 46, 39, 29, 30, 43, 41. O intervalo da codificação simples é de 0 a 61. O parâmetro chds define uma escala personalizada de 0 a 1 para que os valores sejam dimensionados para esse intervalo, mas a altura das barras não é afetada. Se fossem dados de formato de texto, as barras também seriam dimensionadas.


chd=s:underp
chm=N,000000,0,-1,11
chds=0,1

Veja um exemplo de gráfico com um rótulo de texto no ponto mínimo e um rótulo de sinalização no ponto máximo.

Gráfico de linhas com rótulo em texto azul de 10 pontos e bandeira de texto em vermelho com 15 pontos, desenhados nos pontos de dados de uma linha verde tracejada.
chm=
  tMin,0000FF,0,1,10|
  fMax,FF0000,0,3,15

Este exemplo mostra um gráfico empilhado com valores de séries individuais, mais o total da série. Para mostrar os valores das séries empilhadas, precisamos usar a opção de posicionamento "c". Caso contrário, o valor da barra superior se sobrepõe ao valor da soma no topo de cada barra.
chm=
  N,FF0000,-1,,12|
  N,000000,0,,12,,c|
  N,000000,1,,12,,c|
  N,ffffff,2,,12,,c
Mais algumas demonstrações de como o posicionamento vertical e horizontal funcionam. Este exemplo demonstra várias combinações de valores âncora para gráficos de barras (que usam s, c e e para posicionamento vertical). Observe como uma âncora à direita move um marcador para a esquerda e uma âncora superior move um marcador para baixo e vice-versa. Os pontos em vermelho mostram a base, centro e topo de cada barra. O número é o valor dos dados, fixo usando diferentes valores de âncora para cada barra.
chm=
  N,000000,0,0,10,,rs
  N,000000,0,1,10,,ls
  N,000000,0,2,10,,c
  N,000000,0,3,10,,e
  N,000000,0,4,10,,e::15
  N,000000,0,5,10,,e::-12
Os marcadores de anotação ajustam automaticamente a posição do rótulo para que não se sobreponham. O primeiro valor chm é para o preenchimento de linha. Os valores a seguir são todos marcadores de anotação.
chm=B,C5D4B5BB,0,0,0
  AA,666666,0,3,15
  AB,666666,0,5,15
  AC,666666,0,24,15
  AD,666666,0,25,15
  AE,666666,0,26,15
  AF,666666,0,51,15
  AG,666666,0,60,15
  AH,666666,0,73,15
  AI,666666,0,80,15
  AJ,666666,0,99,15
Outro exemplo de marcador de anotação demonstra as altitudes das cidades da Suíça.

Voltar ao início