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 ou diminua o zoom até o nível adequado para mostrar os países selecionados corretamente ou pode aumentar ou diminuir o zoom até um nível personalizado usando valores de latitude e longitude.

Parâmetros aceitos

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 aplicar zoom 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 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 aumentará automaticamente o zoom 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 códigos são 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 ou não chd. Em ambas as sintaxes, <unselected_land_color> é a cor de todas as regiões não especificadas em chld. Observe que os divisores são diferentes para as diferentes sintaxes (vírgulas em uma, barras verticais na outra). Se não forem usadas, as regiões serão contornadas, mas não coloridas.

  • chd usado: a segunda e a última cores descrevem um intervalo de cores. É preciso ter um valor chd para cada país em chld, e o país correspondente será colorido em um 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 not usado: a segunda cor e as posteriores 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 excedentes na lista.
chtt, chts Opcional Título e estilo do gráfico
chm Opcional Marcadores de 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 com zoom do gráfico varia de -60 a 80 de latitude e 0 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 do gráfico para as sinalizações.
  • chma=0,110,0,0: a borda do lado direito 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 sede das Olimpíadas com 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

Mapa mostrando a França, com duas regiões destacadas:

  • 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 é especificado neste mapa. Portanto, 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. É possível observar que as cores posteriores não ocultam as cores anteriores.
Mapa da França, destacando duas províncias.
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, com um intervalo de 0 a 100.
  • chco=CCCCCC,FF0000,000000: a cor de fundo é cinza-claro (CCCCCC) e o intervalo de cores é de vermelho (FF0000) a preto (000000). O país do meio mostrado é uma cor intermediária desse 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 em 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 estreita. Portanto, ao especificar um mapa quadrado, há 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á um corte na parte de baixo que precisa ser corrigido com a redução da 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

Zoom e centralização

Por padrão, o gráfico será ampliado e centralizado para centralizar as regiões selecionadas, fazendo com que se ajustem o máximo possível à área renderizada, dentro do tamanho do mapa definido. No entanto, você pode personalizar o nível de centralização e zoom do gráfico de duas maneiras:

Por pixel

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

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

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

Você só pode diminuir o zoom (valores positivos), e não aumentar o zoom (valores negativos) mais perto do nível de zoom padrão usando o zoom por 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

Mapa vazio em excesso na parte inferior.
cht=map

Mapa excedente 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

Você pode especificar as bordas exatas das partes superior, inferior, esquerda e direita do mapa renderizado por latitude e longitude usando a sintaxe mostrada a seguir:

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 esquerda e 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 está a 0,1° de longitude e 51,5° de latitude. O mapa é cortado porque está tentando exibir apenas a Grã-Bretanha (conforme especificado) e preencher o gráfico designado sem distorção.

Centralizado Latitudes alteradas em mais de 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

Observe como o tamanho da imagem do meio é um pouco menor que a primeira, mesmo que tenhamos movido o mesmo número de graus para cima. Isso acontece porque estamos projetando uma esfera 3D em uma imagem 2D. Você precisa aumentar a largura do segundo gráfico para que ele tenha o 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 é possível definir 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 para o 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" (centralizado) "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

Gráfico com título azul, alinhado à direita e de 20 pontos.

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 internamente a partir do tamanho especificado do gráfico (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. Você não pode apertar 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 ajustar o texto exatamente, a menos que você especifique uma largura maior usando chma. Nesse caso, a margem vai aumentar mais, apertando 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 para incluir 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 esse método para evitar que a legenda fique perto da área do gráfico ou das bordas da imagem.

 

Exemplos

Descrição Exemplo

Nesse 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 do 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 de plano de fundo chf [Todos os gráficos]

Você pode especificar cores e estilos de preenchimento para a área de dados do gráfico e/ou para todo o plano de fundo do gráfico. Os tipos de preenchimento incluem uniforme, listrado e gradiente. É possível especificar diferentes preenchimentos para diferentes áreas (por exemplo, toda a área 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 você pode misturar diferentes tipos de preenchimento (sólidos, listras, gradientes) no mesmo gráfico, separando valores com barra vertical ( | ). Os preenchimentos da área do gráfico substituem os preenchimentos do plano de fundo do gráfico.

Preenchimento sólido chf [Todos os gráficos]

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

Sintaxe

chf=<fill_type>,s,<color>|...
<fill_type>
A parte do gráfico que está sendo preenchida. Especifique um destes valores:
  • bg: preenchimento do plano de fundo
  • c: preenchimento da área do gráfico. Incompatível com gráficos de mapa.
  • a: deixa 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 aos 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 da série do gráfico de barras para conferir um exemplo.
s
Indica um preenchimento sólido ou transparente.
<color>
A cor de preenchimento, no formato hexadecimal RRGGBB. Para transparências, os seis primeiros dígitos são ignorados, mas precisam ser incluídos mesmo assim.

 

Exemplos

Descrição Exemplo

Neste exemplo, o plano de fundo 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

Este exemplo preenche o plano de fundo do gráfico com cinza claro (EFEFEF) e preenche a área do gráfico 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

Esse exemplo aplica uma transparência de 50% ao gráfico inteiro (80 em hexadecimal é 128, ou cerca de 50% de transparência). Observe o plano de fundo das células da tabela aparecendo 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 textual de cada série. Você pode especificar o texto associado a cada série nessa legenda e especificar onde ela deve aparecer no gráfico.

Consulte também chma para aprender a definir as margens ao redor da legenda.

Observação sobre os valores de string:somente caracteres seguros de URL são permitidos nas strings de rótulo. Por questões de segurança, codifique para uso em URL todas as strings que contenham caracteres que não façam parte do 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 adição (+) no 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 expande para conter o texto da legenda, e a área do gráfico será reduzida para acomodar a legenda.

chdlp : [opcional] a posição da legenda e a ordem das entradas de 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 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 destes 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 um destes valores:
  • l - [Padrão para legendas verticais] Exibe rótulos na ordem informada para chdl.
  • r: mostra rótulos na ordem inversa, conforme fornecido para 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: aproximadamente, significa classificar por comprimento, 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 dos rótulos personalizados. Esta é uma lista de índices de rótulos baseados em zero do 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 que sua 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 inferiores (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 mudança 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 [barra, linha, radar, dispersão]

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

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

Sintaxe

Especifique um conjunto dos parâmetros a seguir para cada série a ser marcada. Para marcar diversas séries, crie outros conjuntos de parâmetros, delimitados por barra vertical. Não é necessário marcar todas as séries. Quando uma série de dados não é atribuída, nenhum marcador é atribuído a ela.

Os marcadores de forma se comportam de maneira um pouco diferente nos gráficos de dispersão. Consulte a respectiva 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ê colocar o caractere @ opcional antes do tipo de marcador, <opt_which_points>, usar o formato x:y.
<marker_type>
O tipo de marcador a ser usado. Especifique um dos tipos a seguir:
  • a: seta
  • c - Cruz
  • C: retângulo. Se um marcador de retângulo é usado, é preciso ter pelo menos duas séries de dados, em que a série 0 especifica a borda de baixo e a série 1 especifica a borda de cima. <size> especifica a largura do retângulo, em pixels.
  • d: diamante
  • E: marcador de barra de erro ( ). Esse marcador precisa de duas séries de dados para criar, 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 no gráfico com uma altura especificada. O único formato válido para o parâmetro <opt_which_points> é n.d.
  • H: linha horizontal pelo 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 completa da área do gráfico.
  • o: círculo
  • s: quadrado
  • v: linha vertical do eixo x até o ponto de dados
  • V: linha vertical de comprimento ajustável. É compatível com uma sintaxe de valor <size> estendida 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 desta série, no formato hexadecimal RRGGBB.
<series_index>.
: o índice da série de dados em que os marcadores vão ser desenhados, com base em zero. Ignorado para marcadores h e 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> (em inglês)
[Opcional] Em quais pontos desenhar marcadores. O padrão é todos os marcadores. Use um destes valores:
  • n.d: onde desenhar o marcador. O significado depende do tipo de marcador:
    • Todos os tipos, exceto h: em qual ponto de dados o marcador será desenhado, em que n.d é o índice da série a partir de zero. Se você especificar um valor não inteiro, a fração indicará um ponto intermediário calculado. Por exemplo, 3,5 significa metade do caminho entre os pontos 3 e 4.
    • h: um número de 0,0 a 1,0, em que 0,0 é a parte inferior do gráfico e 1,0 é a parte superior dele.
  • -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: desenhe um marcador em 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 coloca o dobro de marcadores que pontos de dados.
  • start:end:n: desenha um marcador em cada no ponto de dados de um intervalo, incluindo os valores de índice start e end. 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 inteiramente usaria first:last:1. Todos os valores podem ser números de ponto flutuante, ou seja, start e end podem ser negativos, para contar de maneira retroativa a partir do último valor. Se start e end forem negativos, verifique se estão listados em valor crescente (por exemplo, -6:-1:1). Se o valor da etapa n for menor que 1, ele calculará pontos de dados adicionais, interpolando os 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 do 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 do gráfico e 1:1 é o canto superior direito dele. 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 é a parte inferior e 1,0 é a parte superior. 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 a partir 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

Veja um exemplo de 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 e 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 parte inferior 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 amarela horizontal com a 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.

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. Portanto, ele é desenhado primeiro. O losango é especificado e desenhado em segundo lugar, o que faz com que ele seja desenhado sobre o 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 a cada dois pontos de dados (-2 significa a cada dois pontos).

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 é um gráfico de linhas com o dobro de marcadores que os pontos de dados (-0,5 significa a 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 da 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 ao 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
Neste exemplo, uma seta e um marcador de texto são adicionados 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 fixada a 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, barras superiores e inferiores 20 pixels. A parte inferior está ancorada no ponto 8 da série 0, e a 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 3 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%
chm=
  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 [barra, linha, radar, dispersão]

Você pode rotular pontos específicos no gráfico com texto personalizado ou com versões formatadas dos dados.

É possível combinar qualquer marcador chm usando uma barra vertical ( |) para separar os conjuntos de parâmetros chm.

Observação sobre os valores de string:somente caracteres seguros de URL são permitidos nas strings de rótulo. Por questões de segurança, codifique para uso em URL todas as strings que contenham caracteres que não façam parte do 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 dos parâmetros a seguir para cada série a ser marcada. Para marcar diversas séries, crie outros conjuntos de parâmetros, delimitados por 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.

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 a ser usado. Você pode escolher um dos seguintes tipos:
  • f<text>: uma sinalização contendo texto. Especifique o caractere "f", seguido de texto personalizado codificado para URL. Para adicionar vírgulas em marcadores de texto, coloque um sinal de \ antes da vírgula. Exemplo: fHello\,+World!
  • t<text>: um marcador de texto simples. Especifique o caractere "t" seguido de texto personalizado codificado para URL. Para adicionar vírgulas em marcadores de texto, coloque um sinal de \ antes da vírgula. Exemplo: tHello\,+World!
  • A<text>: um marcador de anotação. Ele é semelhante a um marcador de sinalização, mas os marcadores coordenam a própria posição para que não se sobreponham. O único formato válido para <opt_which_points> é n.d para indicar o índice de um ponto da 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. Veja um exemplo de chds com marcadores numéricos abaixo. Com esse tipo de marcador em um gráfico de barras empilhadas, se você especificar -1 para <series_index>, receberá um marcador que mostra a soma de todos os valores nessa barra empilhada. 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. Veja o significado de cada elemento:
    • <preceding_text>: texto que precede cada valor.
    • *...*: um bloco opcional entre asteriscos literais, em que você pode especificar detalhes de formatação para números. Os valores a seguir são aceitos e são opcionais:
      • <number_type>: o formato de número, para valores numéricos. Escolha uma das seguintes opções:
        • f: [padrão] formato de ponto flutuante. Especifique também 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. Você pode 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 devem ser exibidas. O valor é arredondado (não truncado) para esse comprimento. O padrão é 2.
      • z: mostra zeros à direita. O padrão é não.
      • s: exibe separadores de grupos. O padrão é não.
      • x ou y: mostra 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 o gráfico para determinar o que significa. O padrão é "y".
    • <following_text>: texto a ser seguido de cada valor.
<color>
A cor dos marcadores deste conjunto, no formato hexadecimal RRGGBB.
<series_index>.
: o índice da série de dados em que os marcadores vão ser desenhados, com base em 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 abaixo um exemplo.
<opt_which_points> (em inglês)
[Opcional] Em quais pontos desenhar marcadores. O padrão é todos os marcadores. Use um dos seguintes valores:
  • n.d: em qual ponto de dados desenhar o marcador, em que n.d é o índice da série, começando com zero. Se você especificar um valor não inteiro, a fração vai indicar um ponto intermediário calculado. Por exemplo, 3,5 significa metade do 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: desenhe um marcador em cada no ponto de dados.
  • start:end:n: desenha um marcador em cada n-ésimo ponto de dados de um intervalo, incluindo os valores de índice start e end. 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 inteiramente usaria first:last:1. Todos os valores podem ser números de ponto flutuante, ou seja, start e end podem ser negativos, para contar de maneira retroativa a partir do último valor. Se start e end forem negativos, verifique se estão listados em valor crescente (por exemplo, -6:-1:1). Se o valor de grau n for menor que 1, ele calculará pontos de dados adicionais, interpolando os valores de dados fornecidos. Os valores padrão são first:last:1
  • x:y: [incompatí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. Portanto, se o intervalo de dados for de 0 a 100 e <size> for 30, um valor de dados de 100 teria 30 pixels de largura, um valor de dados de 50 teria 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 é a parte inferior e 1,0 é a parte superior. 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] São detalhes adicionais do canal que descrevem onde colocar este marcador em relação ao ponto de dados. É possível 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, é possível 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. É possível escolher um justificador horizontal e/ou vertical da seguinte lista:
  • Posicionamento horizontal: "l", "h" ou "r": ancorado à esquerda, no centro ou à direita, horizontalmente. O padrão é "l".
  • Posicionamento vertical: "b", "v", "t": ancorado na parte de baixo, no meio ou na parte de cima da tela, verticalmente. O padrão é "b".
  • Posicionamento relativo à barra [somente gráficos de barras]: "s", "c", "e": base, centro ou parte de cima de uma barra. Para gráficos empilhados, isso está relacionado à seção da barra de cada série, não à barra inteira. Se o índice de série fornecido for -1 (total da pilha), isso está em relação à barra inteira. Pode ser combinado com valores de posicionamento verticais, por exemplo, "be" ou "vs". O valor padrão é "e".
horizontal_offset
Um deslocamento horizontal para o marcador, em pixels. O padrão é 0.
vertical_offset
Um deslocamento vertical para o marcador, em pixels. Padrão do gráfico que não é de barras: 15. Padrão do gráfico de barras: 2.

Descrição Exemplo

Veja 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 em 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 cima em duas casas decimais.

O segundo gráfico (N*cEUR1*) mostra os mesmos valores formatados como valores em euros, 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

É possível usar o parâmetro chds para dimensionar o valor numérico exibido. Você pode 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 de marcador personalizada de 0 a 1. Portanto, os valores dos marcadores são dimensionados para esse intervalo, mas a altura das barras não é afetada. Se fossem dados em 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 para séries individuais, além do total da série. Para mostrar os valores das séries empilhadas, é preciso 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 de â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, 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, fixado com 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 dos rótulos para que eles não se sobreponham. O primeiro valor de chm é para o preenchimento da 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