Gráficos de barras

   

Este documento descreve os vários tipos de gráficos de barras que você pode criar usando a API de gráficos do Google.

Sumário

Recursos específicos para gráficos Visão geral Tipos de gráfico (cht) Cores da série (chco) Marcadores de barra Largura e espaçamento das barras (chbh) Linha zero (chp) Gráficos compostos Marcadores em barras específicas

Recursos padrão Título do gráfico (chtt, chts) Texto e estilo da legenda do gráfico (chdl, chdlp, chdls) Margens do gráfico (chma) Estilos e rótulos dos eixos Eixos visíveis (chxt) Intervalo do eixo (chxr) Rótulos de eixos personalizados (chxl) Posição dos rótulos dos eixos (chxp) Estilos dos rótulos dos eixos (chxs) Marcas de escala dos eixos (chxtc) Preenchimento do plano de fundo (chf) Preenchimentos sólidos (chf) Preenchimento gradiente (chf) Preenchimento listrado (chf) Linhas de grade (chg) Marcadores dinâmicos (chem) Marcadores de forma (chm) Marcadores de texto e valor de dados (chm) Marcadores de intervalo (chm=r|R) Marcadores de vela (chm=F) Marcadores de linha (chm=D) Funções de dados (chfd)

Visão geral

É possível criar vários gráficos de barras, como as versões vertical, horizontal, agrupadas, empilhadas e sobrepostas de cada um.

Gráficos de barras são bons para comparação lado a lado e detecção de tendências em um pequeno número de pontos de dados discretos. Eles são uma boa alternativa aos gráficos de linhas quando você tem apenas alguns pontos de dados em uma série.

De modo geral, há três maneiras de exibir séries múltiplas em um gráfico de barras:

Agrupado	Empilhado	Sobrepostas
cht=bvg chd=t:5,5,5|10,10,10|15,15,15	cht=bvs chd=t:5,5,5|10,10,10|15,15,15	cht=bvo chd=t:5,5,5|10,10,10|15,15,15

É possível controlar a largura e o espaçamento das barras usando o parâmetro chbh. Se você não especificar chbh, algumas barras poderão ser cortadas.

Por padrão, todas as séries são exibidas na mesma cor. Se você não especificar cores diferentes para séries diferentes, será difícil distinguir que há várias séries no seu gráfico. Consulte Cores da série para mais detalhes.

Os gráficos de barras exibem pelo menos um eixo por padrão. Para ocultar algum eixo padrão, use o parâmetro chxs e especifique um sublinhado para o valor <axis_or_tick>.

Se você usar o formato de texto simples em gráficos empilhados, lembre-se de que o gráfico cortará qualquer coisa acima de 100 como a altura total da pilha, a menos que você adicione dimensionamento personalizado, conforme mostrado aqui:

Sem dimensionamento, as três barras do meio excedem 100 e são cortadas em um gráfico simples de dados formatados de texto.	cht=bhs chco=4D89F9,C6D9FD chd=t:10,50,60,80,40|   50,60,100,40,20
Se quisermos mostrar o comprimento completo das barras empilhadas, é necessário usar um esquema de codificação diferente ou utilizar a formatação de texto com dimensionamento personalizado. O valor máximo da escala deve ser relativo à altura total das barras empilhadas. Este exemplo vai até 160 (o valor máximo somado).	cht=bhs chco=4D89F9,C6D9FD chd=t:10,50,60,80,40|   50,60,100,40,20 chds=0,160

Tipos de gráfico (cht)

Há diversos tipos de gráficos de barras que você pode fazer. Especifique um gráfico de barras com a seguinte sintaxe:

Sintaxe

cht=<chart_type>

Em que <chart_type> é um dos seguintes tipos:

Tipo de gráfico	Descrição	Exemplo
bhs	Gráfico de barras horizontais com barras empilhadas. O primeiro exemplo (todas as barras em azul escuro) possui uma série de dados. O segundo exemplo (barras em azul escuro e claro) possui duas séries Ele também é dimensionado para mostrar o valor das barras somadas, que excede 100. Como se pode ver, as séries estão empilhadas. Se você não especificar cores de séries diferentes, todas as cores serão iguais (e as barras não parecerão empilhadas). Você também pode especificar uma cor para cada barra de uma única série.	cht=bhs chco=4D89F9 cht=bhs chco=4D89F9,C6D9FD chd=t:10,50,60,80,40|   50,60,100,40,20 chds=0,160
bvs	Gráfico de barras verticais com barras empilhadas. Este exemplo tem duas séries e usa o formato de texto com dimensionamento personalizado para garantir que todos os valores empilhados fiquem totalmente visíveis. Se você mover a linha zero em um gráfico bvs usando o parâmetro chp, se uma barra for menor que esse valor, ela será exibida abaixo da linha zero. Caso seja maior que esse valor, ela será exibida acima da linha zero.	cht=bvs chco=4D89F9,C6D9FD chd=t:10,50,60,80,40|   50,60,100,40,20 chds=0,160
bvo	Gráfico de barras verticais em que as barras são empilhadas na frente umas das outras, em vez de umas sobre as outras. A altura de cada barra é o valor individual, não o valor somado. As barras são classificadas por altura para que todas fiquem visíveis.	cht=bvo chd=t:   10,50,60,80,40   50,60,100,40,20   30,30,75,20,60
bhg	Gráfico de barras horizontais com barras agrupadas. O gráfico superior usa os valores de espaçamento padrão dos grupos. O gráfico da parte inferior usa o parâmetro chbh para modificar a largura da barra padrão e o espaçamento dos grupos de modo a tornar os grupos mais óbvios.	cht=bhg chco=4D89D9,C6D9FD cht=bhg chco=4D89D9,C6D9FD chbh=15,4,15
bvg	Gráfico de barras verticais com barras agrupadas.	cht=bvg chco=4D89F9,C6D9FD chbh=15,4,15

Voltar ao início

Cores da série chco

Você pode especificar as cores de barras individuais, séries individuais ou várias séries usando o parâmetro chco. Se você não especificar uma cor diferente para cada série, todas elas terão a mesma cor.

Sintaxe

chco=<series_1_color>, ..., <series_n_color>

    or

chco=<series_1_bar_1>|<series_1_bar_2>|...|<series_1_bar_n>,<series_2>,...,<series_n>

<color>

Um número hexadecimal no formato RRGGBB a ser aplicado a uma série ou barra individual. Para aplicar a cor à série inteira, use a separação por vírgulas. Para aplicar a cor a uma barra individual, ela deve ser delimitada por barras verticais. Também é possível misturar esses dois formatos. Consulte a tabela abaixo para ver exemplos. Sempre que você tiver menos valores de cor do que pontos de dados ou séries, as cores vão se repetir pela lista novamente, começando pela primeira cor do grupo.

 

Exemplos

Descrição	Exemplo
Uma cor por série, com cores separadas por vírgulas.	cht=bvs chco=4D89F9,C6D9FD
Uma cor por valor, com cores separadas por barras verticais.	cht=bvs chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE
Uma combinação de cores de séries e cores de barras individuais. Este exemplo mostra um gráfico de barras com duas séries. A primeira série é toda em preto (000000,) e separada por vírgulas. A segunda série é delimitada por barras verticais e atribui uma cor diferente para cada ponto (FF0000|00FF00|0000FF).	chco=000000,FF0000|00FF00|0000FF chd=s:FOE,elo
Neste exemplo, demonstramos a definição de cores diferentes para cada barra em um gráfico de várias séries.	chco=   FF0000|00FF00|0000FF,FFC6A5|DEF3BD|C6EFF7
Você também pode especificar preenchimentos para colorir uma série com cores sólidas, listradas ou gradientes. Preenchimentos sólidos são semelhantes a usar chco, mas listras ou gradientes criam efeitos únicos.	chd=   t:10,40,60,80,30,20 chf=   b0,lg,0,FFE7C6,0,76A4FB,1 chd=t:   40,40,60,80   30,50,55,86 chf=   b0,ls,0,FFE7C6,.3,76A4FB,.1   b1,ls,0,FF0000,.3,FFBFBF,.1

Voltar ao início

Marcadores de barra

Os gráficos de barras são compatíveis com rótulos de eixo padrão, mas os rótulos na base das barras são atribuídos a barras individuais, em vez de distribuídos ao longo do gráfico de barras. Para distribuir os rótulos de maneira uniforme, use o parâmetro chxp, conforme descrito abaixo. Se você especificar rótulos de eixo, mas não especificar rótulos personalizados ao longo do eixo da barra, os rótulos das barras serão o número de índice de cada barra ou grupo de barras. Você pode personalizar os rótulos dos eixos usando o parâmetro chxl.

Descrição	Exemplo
Um gráfico de barras que usa os rótulos padrão para o eixo x.	chxt=x,y
Um gráfico de barras que usa rótulos personalizados para o eixo x.	chxt=x,y chxl=0:|Jan|Feb|Mar|Apr|May
Se você tiver um número diferente de rótulos e barras e quiser espaçá-los de maneira uniforme (em vez de abaixo de cada barra), use o parâmetro chxp com a sintaxe <axis_index>,0, em que axis_index é o índice do eixo a ser rotulado e 0 indica que eles precisam ter um espaçamento uniforme. Isso ocorre porque um único 0 indica a localização do primeiro rótulo, e nenhum outro valor indica que os rótulos precisam ser posicionados automaticamente de maneira uniforme ao longo do eixo. Gráfico de cima: três rótulos de gráfico são aplicados a cinco barras. Os rótulos são alinhados abaixo das três primeiras barras. Gráfico inferior: os mesmos três rótulos são aplicados a cinco barras, mas chxp=0,0 faz com que os rótulos sejam espaçados de maneira uniforme ao longo do eixo x (índice do eixo 0).	chd=s:cEj9U chxt=x,y chxl=0:|2001|2002|2003 chd=s:cEj9U chxt=x,y chxl=0:|2001|2002|2003 chxp=0,0

Voltar ao início

Largura e espaçamento das barras chbh

Também é possível especificar valores personalizados para a largura das barras e o espaçamento entre barras e grupos. Você pode especificar apenas um conjunto de valores de largura para todas as barras. Se você não especificar chbh, todas as barras terão 23 pixels de largura, o que significa que as barras finais poderão ser cortadas se a largura total da barra + espaço for maior que a largura do gráfico.

Sintaxe

chbh=
  <bar_width_or_scale>,<space_between_bars>,<space_between_groups>

<bar_width_or_scale>

A largura da barra. Você pode especificar larguras e espaçamentos absolutos ou relativos, inserindo um dos valores a seguir. O valor padrão é 23 pixels, valor absoluto.

• width: largura da barra, em pixels. Todos os valores de espaçamento também são valores absolutos, em pixels. As barras podem ser cortadas se o gráfico não for largo o suficiente.
• a: space_between_bars e space_between_groups são fornecidos em unidades absolutas (ou valores absolutos padrão, se não forem especificados). As barras serão redimensionadas para que todas caibam no gráfico.
• r: space_between_bars e space_between_bars são fornecidos em unidades relativas (ou valores relativos padrão, se não forem especificados). As unidades relativas são valores de ponto flutuante em comparação com a largura da barra, em que a largura da barra é 1,0. Por exemplo, 0,5 é metade da largura da barra e 2,0 é o dobro da largura da barra. As barras podem ser cortadas se o gráfico não for largo o suficiente.

<space_between_bars>

[Opcional] Espaço entre as barras no mesmo grupo. Se o dimensionamento for absoluto, será uma largura em pixels.Se o dimensionamento for relativo, será um valor de ponto flutuante em que 1,0 é a largura da barra. O valor padrão é 4 pixels para valores absolutos ou 4/23 para valores relativos.

<espaço_entre_grupos>

[Opcional] Espaço entre grupos de barras no mesmo grupo. Se o dimensionamento for absoluto, será uma largura em pixels.Se o dimensionamento for relativo, será um valor de ponto flutuante em que 1,0 é a largura da barra. O valor padrão é 8 pixels para valores absolutos ou 8/23 para valores relativos.

Não é possível omitir parâmetros opcionais intermediários. É preciso terminar com um valor declarado. Por exemplo: chbh=10,5,10 é válido, chbh=10,,10 não é, chbh=10,5, não é.

Descrição	Exemplo
Este gráfico usa o valor a para redimensionar os valores automaticamente. O primeiro gráfico especifica ausência de espaço entre os grupos; assim, os grupos não ficam aparentes. O segundo gráfico coloca espaçamento (15 pixels) entre os grupos.	chbh=a chbh=a,5,15
Este gráfico usa o valor r para especificar tamanhos relativos à largura da barra. Neste gráfico, o espaçamento entre as barras é de 0,5x a largura da barra e entre os grupos é 1,5x a largura das barras.	chbh=r,0.5,1.5
O primeiro gráfico tem cinco valores em cada série, mas o gráfico é muito pequeno para conter todas as barras com valores padrão: 10 * 23 pixels para barras + 5 * 4 pixels para espaçamento + 4 * 8 pixels para espaçamento do grupo                          282 pixels -- mais do que a largura do gráfico de 190 pixels ...então algumas barras saem cortadas. O segundo gráfico especifica os valores absolutos das barras e do espaçamento para que se ajustem a todas as barras.	chbh omitido chs=190x125 duas séries, cinco valores/série chbh=10,5,10

Voltar ao início

Linha zero chp

Especifique uma linha zero personalizada para o gráfico usando o parâmetro chp ou a codificação de texto com escalonamento de dados. Essas linhas zero funcionam de duas maneiras diferentes:

• Escalonamento de dados: ao usar dados de formato de texto com o parâmetro de dimensionamento chds, a linha zero vai subir o quanto for necessário para mostrar todos os valores negativos.
• Parâmetro chp: você também pode mover a linha zero manualmente, em qualquer formato de dados, para qualquer local, usando o parâmetro chp. Na verdade, isso cria uma linha zero artificial e redesenha as barras como a diferença entre o valor dos dados e seu valor zero arbitrário, ou seja, as barras são desenhadas da linha zero até o valor das barras. Isso não pode ser usado em combinação com chds.

Sintaxe

chp=
  <zero_value_series_1>,
   ...,
  <zero_value_series_n>

<zero_value_series_1>

Um valor de ponto flutuante de 0,0 a 1,0, inclusive, em que 0,0 é a parte de baixo do eixo e 1,0 é o topo do eixo. As barras serão redesenhadas para mostrar a diferença entre esse valor e o valor correspondente.

Descrição	Exemplo
Temos aqui três cópias de um gráfico de barras com os mesmos dados: A primeira mostra o gráfico sem linha zero especificada. A segunda mostra o gráfico com uma linha zero de 0,2, ou seja, a linha zero é empurrada 0,2 da distância para cima no eixo y. Observe que o valor 20 desapareceu porque está à direita da nova linha zero. A terceira mostra o gráfico com linha zero de 0,5. Agora, o valor 20 reapareceu como um valor negativo, assim como o valor 40 (menor que 50). Isso ocorre porque as barras são desenhadas do novo local da linha zero até o valor de dados real. Assim, valores menores que 50 no gráfico vão para baixo e valores maiores que 50 são desenhados para cima.	chd=t:20,40,60,80,95 Nenhuma linha zero foi especificada. chd=t:20,40,60,80,95 chp=0.2 chd=t:20,40,60,80,95 chp=0.5
Este exemplo mostra como definir uma linha zero usando dados formatados de texto com dimensionamento personalizado (chds). Não é possível usar chds e chp juntos. O exemplo traz valores que variam de -60 a 120. A escala é definida como -80 a 140, para deixar espaço acima e abaixo das barras.	chd=t:30,-60,50,120,80 chds=-80,140

Voltar ao início

Gráficos compostos

Você pode adicionar linhas, velas e marcadores de forma a um gráfico de barras para criar um gráfico composto. Consulte Gráficos compostos para mais detalhes.

Marcadores em barras específicas (somente cht=bvg)

Por padrão, quando você desenha um marcador chm em um gráfico vertical agrupado, ele é desenhado na mesma série de onde deriva os dados. Se os dados forem uma série oculta, o comportamento padrão será centralizar o marcador no grupo de barras.

No entanto, com os gráficos de barras agrupados verticalmente (tipo bvg), você pode especificar uma série de canais diferente da série de dados do marcador. Para fazer isso, especifique o parâmetro <series_index> (o terceiro parâmetro) usando a seguinte sintaxe: <data_series_index>:<placement_series_index>.

Se você especificar uma série de placement oculta ou inexistente, o marcador será centralizado horizontalmente no grupo.

A melhor maneira de usar esse recurso é usar uma série oculta para os dados do marcador e colocar o marcador em uma série visível.

Os exemplos a seguir mostram o comportamento padrão, com as séries de dados e de canais iguais e a sintaxe avançada, especificando uma série de dados e de canais diferentes.

Série de dados ocultos, posicionamento padrão do marcador	Série de dados ocultos, posicionamento de marcadores avançados
chd=t2: // First two series are visible   10,20,30,40,50  // Red bars   20,40,60,80,100 // Blue bars   20,20,20,20,20  // Hidden: black circle data   30,30,30,30,30  // Hidden: black square data chm=   o,000000,2,,10 // Circle markers   s,000000,3,,10 // Square markers Neste exemplo, a sintaxe básica especifica que os dados e o posicionamento do marcador devem estar na mesma série. Como esta é uma série oculta, a posição padrão é centralizada verticalmente em cada grupo.	chd=t2: // First two series are visible   10,20,30,40,50  // Red bars   20,40,60,80,100 // Blue bars   20,20,20,20,20  // Hidden: black circle data   30,30,30,30,30  // Hidden: black square data chm=   o,000000,2:0,,10 // Circle markers   o,000000,3:1,,10 // Square markers Neste exemplo, a sintaxe avançada especifica uma origem de dados e uma série de canais diferentes para os marcadores. Os círculos usam dados da série oculta 2 e são posicionados na série 0; os quadrados usam dados da série oculta 3 e são colocados na série 1.

O exemplo a seguir mostra como adicionar vários tipos de marcador diferentes a barras individuais em um gráfico de barras agrupadas. O círculo preto está centralizado nos grupos, porque especifica uma série oculta como a série de posicionamento.

chd=t4: // First four series are rendered as bars. Remaining data is hidden.
  5,10,15,20,25,30   // Purple bar
  10,20,30,40,50,60  // Blue bar
  30,40,50,60,70,80  // Olive bar
  5,5,5,5,5,5        // Black bar
  0,15,25,30,45,55   // Hidden data: Purple circle, blue error bar start
  15,30,40,45,55,65  // Hidden data: Blue error bar end
  20,35,45,50,55,65  // Hidden data: Yellow error bar start
  40,45,55,80,75,85  // Hidden data: Yellow error bar end
chm=                 // Markers:
  o,D000D0,4:0,,10   // Purple circle: data series 4, placement series 0 (purple)
  E,00D0D0,4:1,,1:10 // Blue error bars: data series 4, placement series 1 (blue)
  E,D0D000,6:2,,1:10 // Yellow error bars: data series 6, placement series 2 (olive)
  o,000000,3:4,,10   // Black circle: data series 3, placement 4 (hidden placement series, centered in group)

Voltar ao início

Recursos padrão

Os outros recursos desta página são recursos de gráficos de imagem 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.	chtt=Site+visitors+by+month| January+to+July
Um gráfico com um título azul de 20 pontos alinhado à direita.	chtt=Site+visitors chts=FF0000,20,r

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.	chdl=NASDAQ|FTSE100|DOW chco=FF0000,00FF00,0000FF 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).	chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=t chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=bv
Este exemplo demonstra a alteração do tamanho da fonte.	chdls=0000CC,14

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:

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.	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.	chma=20,20,20,30|80,20

Voltar ao início

Estilos e rótulos de eixos [linha, barra, Googleômetro, radar, dispersão]

É possível especificar quais eixos serão exibidos no gráfico e atribuir rótulos, posições, intervalos e estilos personalizados a eles.

Nem todos os gráficos exibem linhas de eixos por padrão. Você pode especificar exatamente quais eixos seu gráfico deve mostrar usando o parâmetro chxt. As linhas de eixo padrão não exibem números. É preciso especificar um eixo no parâmetro chxt para que os números sejam exibidos.

Os eixos podem exibir números que refletem os valores dos dados ou especificar eixos personalizados. O padrão é exibir valores numéricos, com valores dimensionados para o intervalo de 0 a 100. No entanto, é possível alterar esse intervalo usando chxr para exibir qualquer intervalo. Além disso, é possível estilizar os valores (por exemplo, para mostrar símbolos de moeda ou casas decimais) usando chxs.

Se você optar por usar valores personalizados, por exemplo: "Seg, Ter, Qua", poderá usar o parâmetro chxl. Para colocar essas etiquetas em locais específicos dos eixos, use o parâmetro chxp.

Por fim, é possível usar os parâmetros chxs e chxtc para especificar cor, tamanho, alinhamento e outras propriedades dos rótulos de eixos personalizados e numéricos.

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.

Esta seção aborda os seguintes tópicos:

• Eixos visíveis (chxt): quais eixos exibir.
• Intervalo do eixo (chxr): intervalo de valores para cada eixo.
• Rótulos de eixos personalizados (chxl): valores personalizados a serem exibidos nos eixos.
• Posições dos rótulos nos eixos (chxp): posicionamento dos rótulos personalizados ao longo de cada eixo.
• Estilos dos rótulos dos eixos (chxs): cor, tamanho, alinhamento e formatação dos rótulos dos eixos.
• Estilos das marcas de escala do eixo (chxtc): comprimento das marcas de escala de um eixo específico.

---

Eixos visíveis chxt

Os gráficos de barras, linhas, radar e dispersão mostram uma ou duas linhas de eixo por padrão, mas essas linhas não incluem valores. Para exibir valores nas linhas dos eixos ou alterar os eixos mostrados, use o parâmetro chxt. Por padrão, os valores do eixo variam de 0 a 100, a menos que você os dimensione explicitamente usando a propriedade chxr. Para ocultar todas as linhas de eixo em um gráfico de linhas, especifique :nda após o valor do tipo de gráfico no parâmetro cht (exemplo: cht=lc:nda).

Por padrão, os eixos superior e inferior não exibem marcas de seleção pelos valores, ao passo que os eixos esquerdo e direito os exibem. É possível alterar esse comportamento usando o parâmetro chxs.

Sintaxe

chxt=
  <axis_1>
    ,...,
  <axis_n>

<axis>

Um eixo a ser exibido no gráfico. Os eixos disponíveis são:

• x: Eixo x inferior
• t - Eixo x superior [não compatível com o Google-Meter]
• y: Eixo y à esquerda
• r - Eixo y à direita [não compatível com o Google-Meter]

É possível especificar vários eixos do mesmo tipo, por exemplo: cht=x,x,y. Isso empilhará dois conjuntos de eixos x na parte inferior do gráfico. Isso é útil ao adicionar rótulos personalizados ao longo de um eixo que mostra valores numéricos (veja o exemplo abaixo). Os eixos são desenhados de dentro para fora. Portanto, se você tiver x,x, o primeiro x se referirá à cópia mais interna, o próximo x se referirá à próxima cópia externa e assim por diante.

 

Exemplos

Descrição	Exemplo
Este exemplo mostra um gráfico de linhas com um eixo x, um eixo y, um eixo superior (t) e um eixo direito (r). Como nenhum rótulo foi especificado, o gráfico tem como padrão um intervalo de 0 a 100 para todos os eixos. Por padrão, os eixos superior e inferior não mostram marcas de seleção pelos rótulos.	chxt=x,y,r,t
É possível incluir vários conjuntos de rótulos para cada eixo incluindo o mesmo valor mais de uma vez. Este exemplo mostra dois conjuntos de eixos x e dois eixos y. Isso não é muito útil ao usar apenas os rótulos do eixo padrão, como mostrado aqui. No entanto, é possível especificar rótulos personalizados para cada cópia de cada eixo usando o parâmetro chxl.	<img <code="" dir="ltr" src="/static/chart/image/images/chart_41.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x1"
Este exemplo mostra um gráfico de barras horizontais com um eixo x, um eixo y, um eixo t superior e um eixo r à direita. Os rótulos dos eixos são omitidos, então a API Chart exibe um intervalo de 0 a 100 para os eixos x e t. O intervalo dos eixos y e r é determinado pelo número de barras. Nesse caso, há cinco barras, então a API de gráficos do Google exibe um intervalo de 0 a 4. O primeiro rótulo é centralizado na base da primeira barra, o segundo é centralizado na base da segunda barra e assim por diante.	chxt=x,y,r,t
É possível suprimir os eixos padrão em um gráfico de linhas especificando :nda após o tipo do gráfico.	cht=lc:nda

Voltar ao início

Intervalo do eixo chxr

É possível especificar o intervalo de valores que aparecem em cada eixo de maneira independente, usando o parâmetro chxr. Isso não muda a escala dos elementos do gráfico, apenas a escala dos rótulos dos eixos. Se quiser que os números dos eixos descrevam os valores reais dos dados, defina <start_val> e <end_val> como os valores mínimo e máximo do intervalo do formato de dados, respectivamente. Consulte Escalonamento de eixos para mais informações.

Torne um eixo visível usando o parâmetro chxt se quiser especificar o intervalo dele.

Para especificar valores de eixo personalizados, use o parâmetro chxl.

Sintaxe

Separe vários intervalos de rótulos de eixos usando a barra vertical ( |).

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>

<índice_do_eixo>

A que eixo aplicar os rótulos. É um índice baseado em zero para a matriz de eixos especificada por chxt. Por exemplo, o eixo r seria 1 em chxt=x,r,y.

<start_val>

Um número que define o valor baixo do eixo.

<end_val>

Um número que define o maior valor do eixo.

<opt_step>

[Opcional] A etapa da contagem entre as marcações no eixo. Não há valor de etapa padrão. A etapa é calculada para tentar mostrar um conjunto de rótulos bem espaçados.

 

Exemplos

Descrição	Exemplo
Este exemplo mostra os eixos y à esquerda e à direita (y e r) e um eixo x (x). Cada eixo possui um intervalo definido. Como nenhum rótulo ou posição é especificado, os valores são retirados do intervalo especificado e espaçados uniformemente dentro dele. No gráfico de linhas, os valores são uniformemente distribuídos ao longo do eixo x. A direção do eixo é invertida no eixo r (índice 2), porque o primeiro valor (1000) é maior que o último (0).	chxt=x,y,r chxr=   0,0,500|   1,0,200|   2,1000,0
Neste exemplo, são especificados valores para o eixo x. Os rótulos dos eixos são espaçados uniformemente ao longo dos eixos. Um valor de cinco (5) é especificado para o parâmetro <opt_step>.	chxt=x chxr=0,10,50,5

Voltar ao início

Rótulos de eixos personalizados chxl

É possível especificar rótulos personalizados para qualquer eixo usando o parâmetro chxl. Você pode especificar quantos rótulos quiser. Se você exibir um eixo (usando o parâmetro chxt) e não especificar rótulos personalizados, os rótulos numéricos padrão serão aplicados. Para especificar um intervalo numérico personalizado, use o parâmetro chxr.

Se quiser definir locais específicos nos eixos para seus rótulos, use o parâmetro chxp.

Sintaxe

Especifique um conjunto de parâmetros para cada eixo que você quer rotular. Separe vários conjuntos de rótulos usando a barra vertical (|).

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>

<índice_do_eixo>

A que eixo aplicar rótulos. Ele é um índice na matriz de parâmetros chxt. Por exemplo, se você tiver chxt=x,x,y,y, o índice 0 será o primeiro eixo X, 1 será o segundo.

<label_1>| ... |<label_n>

Um ou mais rótulos para colocar ao longo desse eixo. Podem ser strings ou valores numéricos, e as strings não precisam estar entre aspas. label_1 é exibido na posição mais baixa do eixo, e label_n, na mais alta. Os outros rótulos são espaçados uniformemente entre eles. Indique espaços com um sinal de +. Não há como especificar uma quebra de linha em um rótulo. Separe os rótulos com uma barra vertical. Observação : não coloque uma barra vertical depois do rótulo final no parâmetro chxl.

 

Exemplos

Descrição	Exemplo
Este gráfico mostra como adicionar rótulos personalizados aos dois eixos. Observe como os valores são espaçados uniformemente e como o último valor chxl não termina com uma barra vertical.	chxt=x,y chxl= 0:|Jan|Feb|March|April|May| 1:|Min|Mid|Max
Este exemplo inclui rótulos de eixo nos eixos y esquerdo e direito (y e r). Ele também inclui dois conjuntos de valores para o eixo x (x). Você pode considerar adicionar marcas de escala no eixo y usando chxs.	chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| 1:|0|50|100| 2:|A|B|C| 3:|2005|2006|2007
Este exemplo inclui rótulos de eixo nos eixos y à esquerda e à direita (y e r). Ele também inclui dois conjuntos de valores para o eixo x (x). Observe os rótulos vazios no conjunto do eixo x inferior, usados para espaçar os valores. Este exemplo usa valores padrão para os rótulos do eixo y da esquerda.	chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| 2:|A|B|C| 3:|2005||2006||2007
Se você quiser adicionar um rótulo genérico para descrever um eixo inteiro (por exemplo, para rotular um eixo como "custo" e outro "estudante"), use a propriedade chxt para adicionar outro eixo em cada lado e, em seguida, use chxl para adicionar um único rótulo personalizado a cada lado e chxp para espaçá-lo no meio do eixo.	chxt=x,x,y,y chxl=1:|Martinis|3:|Score chxp=1,50|3,50

Voltar ao início

Posições dos rótulos dos eixos chxp

É possível especificar quais rótulos de eixo serão mostrados usando os rótulos padrão ou personalizados especificados com chxl. Se você não especificar posições exatas usando esse parâmetro, os rótulos serão espaçados uniformemente e com um valor de taxa padrão ao longo dos eixos. Se você não especificar chxl, os rótulos das marcas de seleção serão os valores padrão, normalmente valores de dados ou os números de barras em gráficos de barras.

Sintaxe

Separe vários conjuntos de posicionamento usando a barra vertical (|).

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>

<índice_do_eixo>

É o eixo em que você está especificando posições. Trata-se de um índice para a matriz de parâmetros chxt. Por exemplo, se você tiver chxt=x,x,y,y, o índice 0 será o primeiro eixo x, 1 será o segundo e assim por diante.

<label_1_position>,...,<label_n_position>

A posição do rótulo ao longo do eixo. Trata-se de uma lista separada por vírgulas de valores numéricos, em que cada valor define a posição do rótulo correspondente na matriz chxl: a primeira entrada se aplica ao primeiro rótulo e assim por diante. A posição é um valor no intervalo do eixo. O valor sempre será de 0 a 100, a menos que você tenha especificado um intervalo personalizado usando chxr. O número de posições precisa ser igual ao número de rótulos do eixo.

 

Exemplos

Descrição	Exemplo
Este exemplo inclui rótulos do eixo r em posições especificadas no gráfico. O texto do rótulo é especificado usando o parâmetro chxl. Os rótulos com a posição especificada de 0 são colocados na parte inferior do eixo y ou r ou à esquerda do eixo x ou t. Os rótulos com a posição especificada de 100 são colocados no topo do eixo y ou r ou à direita do eixo x ou t.	chxt=x,y,r chxl=2:|min|average|max chxp=2,10,35,75
Este exemplo mostra como mostrar os valores de rótulo padrão, mas apenas em locais especificados. chxp=1,10,35,75: o eixo y precisa mostrar apenas três rótulos: 10, 35 e 75. Como nenhum texto de rótulo personalizado foi especificado, esses valores de eixo são mostrados. Observe como não é necessário espaçar os rótulos uniformemente ao usar chxp. Se chxp não tivesse sido especificado aqui, a distância do valor do rótulo padrão no eixo y seria a cada 20 unidades, como mostrado no segundo gráfico.	chxt=x,y chxp=1,10,35,75 chxt=x,y chxp não especificado

Voltar ao início

Estilos dos rótulos dos eixos chxs

Você pode especificar o tamanho, a cor e o alinhamento da fonte dos rótulos dos eixos, tanto para rótulos personalizados quanto com valores padrão. Todos os rótulos no mesmo eixo têm o mesmo formato. Se você tiver várias cópias de um eixo, poderá formatar cada uma de maneira diferente. Também é possível especificar o formato de uma string de rótulo, por exemplo, para mostrar símbolos de moeda ou zeros à direita.

Por padrão, os eixos superior e inferior não mostram marcas de seleção pelos valores, ao contrário dos eixos esquerdo e direito.

Sintaxe

Os valores para vários eixos precisam ser separados usando uma barra vertical (|).

chxs=
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
   |...|
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>

<axis_index>

O eixo a que isso se aplica. Esse é um índice baseado em zero no parâmetro chxt.

<opt_format_string>

[Opcional] Esta é uma string de formato opcional que, se usada, vem logo após o número do índice do eixo sem uma vírgula intermediária. Ele começa com uma letra literal N seguida pelos seguintes valores, todos opcionais: A sintaxe da string de formatação é a seguinte:
       N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
Confira o significado de cada elemento:

• <preceding_text>: texto literal 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>: 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 literal que acompanha cada valor.

<opt_label_color>

A cor a ser aplicada ao texto do eixo (mas não à linha do eixo), no formato hexadecimal RRGGBB. A cor da linha do eixo é especificada separadamente usando opt_axis_color. O padrão é cinza.

<opt_font_size>

[Opcional] especifica o tamanho da fonte em pixels. Este parâmetro é opcional.

<opt_alignment>

[Opcional] Alinhamento do rótulo. Para eixos superior ou inferior, isso descreve como o rótulo se alinha à marca de seleção acima ou abaixo dele. Para eixos à esquerda ou à direita, isso descreve como o rótulo é alinhado dentro da caixa delimitadora, que toca o eixo. Especifique um destes números:

• -1 – Superior ou inferior: os rótulos ficam à direita das marcações. Esquerda ou direita: os rótulos são alinhados à esquerda na área. Padrão para rótulos do eixo r.
• 0 — Superior ou inferior: os rótulos são centralizados nas marcações. Esquerda ou direita: os rótulos são centralizados na área deles. Padrão para rótulos dos eixos x e t.
• 1 – Superior ou inferior: os rótulos ficam à esquerda das marcações. Esquerda ou direita: os rótulos são alinhados à direita na área. Padrão para rótulos do eixo y.

<opt_axis_or_tick>

[Optional, not supported in Googleômetro] Define se as marcas de escala e/ou as linhas de eixo serão mostradas no eixo. As marcas de escala e as linhas de eixo estão disponíveis apenas para os eixos mais internos. Por exemplo, elas não são compatíveis com o externo de dois eixos x. Use um dos seguintes valores:

• l ("L" minúsculo): desenha apenas a linha do eixo.
• t: desenha apenas as marcas de seleção. As marcas de escala são as pequenas linhas ao lado dos rótulos dos eixos.
• lt: [Padrão] desenhe uma linha de eixo e marcas de seleção para todos os rótulos.
• _ - (Sublinhado) não desenha linhas de eixo nem marcas de seleção. Se quiser ocultar uma linha de eixo, use este valor.

<tick_color>

[Optional; not supported in Google-o-Meter] A cor da marca de seleção, no formato hexadecimal RRGGBB. O padrão é cinza.

<opt_axis_color>

[Opcional] A cor da linha do eixo, no formato hexadecimal RRGGBB. O padrão é cinza.

 

Exemplos

Descrição	Exemplo
O tamanho da fonte e a cor são especificados para o segundo eixo x (Jan, Fev, Mar).	chxt=x,y,r,x chxr=2,0,4 chxl=3:|Jan|Feb|Mar|      1:|min|average|max chxp=1,10,35,75 chxs=3,0000DD,13,0,t
O tamanho da fonte, a cor e o alinhamento são especificados para o eixo y da direita. Esse eixo possui marcas de escala, mas não a linha de eixo.	chxt=x,y,r,x chxl=3:|Jan|Feb|Mar|      2:|min|average|max chxp=2,10,35,95 chxs=2,0000DD,13,-1,t,FF0000
Este gráfico inclui três conjuntos de dados e mostra três conjuntos de rótulos de eixos, um por série. Cada conjunto de rótulos é formatado usando uma string de formatação personalizada, conforme descrito aqui: 0N*e,000000| 0 significa a primeira série de dados N significa uma string de formatação * significa o início dos especificadores de formato. e significa notação científica * significa o fim dos especificadores de formato 000000 significa texto em preto. 1N*cUSD*Mil,FF0000| 1 significa a segunda série N significa uma string de formatação * significa o início dos especificadores de formato. c significa um marcador de moeda USD especifica o dólar americano como o marcador de moeda a ser usado. * significa o fim dos especificadores de formato Mil é um literal que segue a string FF0000 significa texto em vermelho. 2N*sz2*,0000FF 2 significa a terceira série N significa uma string de formatação * significa o início dos especificadores de formato s significa mostrar especificadores de agrupamento (na localidade em inglês americano, isso é uma vírgula a cada três zeros). z2 significa mostrar dois zeros à direita. 0000FF significa texto azul. Os intervalos dos rótulos dos eixos são definidos usando o parâmetro chxr (axis_index, start, end, step). Se não estiverem definidos, seriam de 0 a 100 por padrão.	chd=s:   984sttvuvkQIBLKNCAIi,   DEJPgq0uov17zwopQODS,   AFLPTXaflptx159gsDrn chxr=   0,0,1000000,250000|   1,0,60|   2,0,5000 chxs=   0N*e,000000|   1N*cUSD*Mil,FF0000|   2N*sz2*,0000FF

Voltar ao início

Estilos das marcas de escala dos eixos chxtc

Você pode especificar marcas de escala longas para eixos específicos. Normalmente, isso é usado para estender uma marca de seleção por todo o comprimento de um gráfico. Use o parâmetro chxs para mudar a cor da marca de seleção.

Os valores para vários eixos precisam ser separados por uma barra vertical (|). Os valores em uma série precisam ser separados por vírgula.

Sintaxe

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>

<axis_index>

O eixo a que isso se aplica. Esse é um índice baseado em zero no parâmetro chxt. Separe os valores para eixos diferentes usando um delimitador de barra.

<tick_length_1>,...,<tick_length_n>

Comprimento das marcas de seleção no eixo, em pixels. Se um único valor for fornecido, ele será aplicado a todos os valores. Se mais de um valor for fornecido, as marcas de escala do eixo vão alternar pela lista de valores daquele eixo. Valores positivos são desenhados para fora da área do gráfico e cortados pelas bordas do gráfico. O valor positivo máximo é 25. Valores negativos são desenhados para dentro da área do gráfico e cortados pelas bordas da área do gráfico.

 

Exemplos

Descrição	Exemplo
Exemplo de uso de chxtc para criar marcas de seleção longas vermelhas. O comprimento da marca de seleção excede a largura da área do gráfico, mas é cortado para caber no gráfico. chxt=x,y,r,x: mostra um eixo esquerdo, um direito e dois eixos inferiores. chxl=2:|min|average|max|3:|Jan|Feb|Mar: o texto do rótulo atribuído ao "r" (lado direito) e aos eixos X externos. chxp=2,10,35,95: posições de rótulo personalizadas ao longo do eixo r (índice=2) para os três rótulos. chxs=2,0000dd,13,-1,t,FF0000: estilos dos rótulos dos eixos para o eixo r: cor do texto, tamanho do texto, alinhamento à esquerda, com marcas de seleção vermelhas. chxtc=1,10|2,-180: comprimento das marcas de escala dos eixos y e r. O primeiro valor especifica marcas de escala de 10 pixels, fora do eixo. O segundo valor especifica marcas de escala de 180 pixels dentro do eixo. O número negativo significa que a marcação entra no eixo e é cortada para caber no gráfico.	chxt=x,y,r,x chxl=   2:|min|average|max|   3:|Jan|Feb|Mar chxp=2,10,35,95 chxs=   2,0000dd,13,-1,t,FF0000 chxtc=1,10|2,-180
Este gráfico demonstra como alternar o comprimento das marcas de escala. chxtc especifica dois valores de comprimento de marcação para o eixo y (5 e 15), e as marcas desenhadas no gráfico alternam entre os dois valores.	chxt=x,y chxtc=   1,5,15

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).	chf=bg,s,EFEFEF
Neste exemplo, o segundo plano do gráfico é preenchido com cinza claro (EFEFEF) e a área em preto (000000).	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.	chf=a,s,00000080

Voltar ao início

Preenchimento gradiente chf [linha, barra, Googleômetro, radar, dispersão,Venn]

Você pode aplicar um ou mais preenchimentos gradientes à área do gráfico ou plano de fundo. O preenchimento gradiente é um esmaecimento de uma cor para outra. Gráficos de pizza e Googleômetro: somente em segundo plano.

Cada preenchimento de gradiente especifica um ângulo e, em seguida, duas ou mais cores ancoradas em um local especificado. A cor varia conforme se move de uma âncora para outra. Você precisa ter pelo menos duas cores com valores de <color_centerpoint> diferentes, para que uma delas possa esmaecer a outra. Cada gradiente extra é especificado por um par <color>,<color_centerpoint>.

Sintaxe

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>

<fill_type>

A área do gráfico a ser preenchida. Uma das seguintes opções:

• bg: preenchimento do plano de fundo
• c: preenchimento da área do gráfico.
• b<index>: preenchimento gradiente de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchida com um gradiente. Consulte Cores das séries do gráfico de barras para ver um exemplo.

lg

Especifica um preenchimento gradiente.

<angle>

Um número que especifica o ângulo do gradiente de 0 (horizontal) a 90 (vertical).

<color>

A cor do preenchimento, no formato hexadecimal RRGGBB.

<color_centerpoint>

Especifica o ponto de fixação da cor. A cor começará a esmaecer a partir desse ponto, à medida que se aproximar de outra âncora. O intervalo de valores é de 0,0 (borda inferior ou esquerda) a 1,0 (borda superior ou direita), inclinado no ângulo especificado por <angle>.

 

Exemplos

Descrição	Exemplo
A área do gráfico tem um gradiente linear horizontal, especificado com um ângulo de zero grau (0). As cores são pêssego (FFE7C6), centralizada no lado esquerdo (posição 0.0) e azul (76A4FB) centralizada no lado direito (posição 1.0). O plano de fundo do gráfico é desenhado em cinza (EFEFEF).	chf=   c,lg,0,   FFE7C6,0,(pêssego)   76A4FB,1 (azul)
A área do gráfico tem um gradiente linear diagonal (da parte inferior à esquerda ao canto superior direito), especificado em um ângulo de 45 graus (45). Pêssego (FFE7C6) é a primeira cor especificada. A parte inferior esquerda do gráfico está totalmente em pêssego. Azul (6A4FB) é a segunda cor especificada. O canto superior direito do gráfico é totalmente azul. Especificamos um deslocamento de 0, 75 para fornecer um pico de azul que desaparece em direção ao canto superior direito. O plano de fundo do gráfico é desenhado em cinza (EFEFEF).	chf=   c,lg,45,   FFE7C6,0, (pêssego)   76A4FB,0.75 (azul)
A área do gráfico tem um gradiente linear vertical (de cima para baixo), especificado com um ângulo de 90 graus (90). Azul (76A4FB) é a primeira cor especificada. A parte superior do gráfico é totalmente azul. Pêssego (FFE7C6) é a segunda cor especificada. A parte inferior do gráfico está totalmente em pêssego. O plano de fundo do gráfico é desenhado em cinza (EFEFEF).	chf=   c,lg,90,   FFE7C6,0, (pêssego)   76A4FB,0.5 (azul)

Voltar ao início

 

Preenchimento listrado chf [linha, barra, Googleômetro, radar, dispersão, Venn]

Você pode especificar um preenchimento listrado para a área do gráfico ou para o gráfico inteiro Gráficos de pizza e Googleômetro: somente em segundo plano.

Sintaxe

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>

<fill_type>

A área do gráfico a ser preenchida. Uma das seguintes opções:

• bg: preenchimento do plano de fundo
• c: preenchimento da área do gráfico
• b<index>: preenchimento listrado de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras para preencher com listras. Consulte Cores das séries do gráfico de barras para ver um exemplo.

ls

Especifica o preenchimento de listras lineares.

<angle>

O ângulo de todas as listras em relação ao eixo y. Use 0 para listras verticais ou 90 para listras horizontais.

<color>

A cor dessa listra, no formato hexadecimal RRGGBB. Repita <color> e <width> para cada listra adicional. Use pelo menos duas listras. As listras se alternam até que o gráfico seja preenchido.

<width>

A largura dessa listra, de 0 a 1, em que 1 é a largura total do gráfico. As listras se repetem até que o gráfico seja todo preenchido. Repita <color> e <width> em cada listra adicional. Use pelo menos duas listras. As listras se alternam até que o gráfico seja preenchido.

 

Exemplos

Descrição	Exemplo
bg,ls,0: preenchimento listrado de plano de fundo com listras em ângulo de zero em relação ao eixo y (paralelo ao eixo y). As listras preenchem o plano de fundo e a área do gráfico. CCCCCC,0.15: a primeira listra é cinza-escuro, com 15% da largura do gráfico. FFFFFF,0.1: a segunda listra é branca, com 10% da largura do gráfico.	chf=   bg,ls,0,   CCCCCC,0.15,   FFFFFF,0.1
c,ls,90: área do gráfico com listras horizontais em um ângulo de 90 graus em relação ao eixo y. As listras preenchem a área do gráfico, mas o plano de fundo é omitido. 999999,0.25: a primeira listra é cinza-escuro, com 25% da largura do gráfico. CCCCCC,0.25: igual à primeira listra, mas em cinza mais claro. FFFFFF,0.25: igual à primeira listra, mas em branco.	chf=   c,ls,90,   999999,0.25,   CCCCCC,0.25,   FFFFFF,0.25

Voltar ao início

Preenchimento de linhas chm [linha, radar]

Você pode preencher a área abaixo de uma linha de dados com uma cor uniforme.

É possível combinar preenchimentos de linha com outros parâmetros chm usando uma barra vertical ( |) para separar os parâmetros chm.

Sintaxe

chm=
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
    |...|
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>

<b_or_B>

Se é necessário preencher até o fim do gráfico ou apenas para a próxima linha inferior.

• B: preencher de <start_line_index> até a parte inferior do gráfico. <end_line_index> é compatível com uma sintaxe especial para permitir que você preencha um segmento do gráfico. Isso é mais fácil se você tem um gráfico com uma única linha que quer preencher.
• b - preencher entre duas linhas de um gráfico com várias linhas. As linhas de início e término são indicadas por <start_line_index> e <end_line_index>.

<color>

Um número hexadecimal no formato RRGGBB da cor de preenchimento.

<start_line_index>

O índice da linha em que o preenchimento começa. A primeira série de dados especificada em chd tem um índice de zero (0), a segunda série tem um índice de 1 e assim por diante.

<end_line_index>

• Tipo de preenchimento "b": a linha na qual é interrompido o preenchimento. Essa linha precisa estar abaixo da linha atual.
• Tipo de preenchimento "B": uma das seguintes opções:
  • qualquer valor: qualquer número neste parâmetro é ignorado, e o preenchimento vai da linha especificada até a base do gráfico
  • start:end: para preencher uma fração vertical abaixo do gráfico, especifique start:end, em que são índices de pontos de dados que descrevem onde iniciar e parar o preenchimento. Ambos os valores são opcionais, e o padrão é first_point:last_point. (veja o exemplo a seguir).

<0>

Reservado: precisa ser zero.

 

Exemplos

Descrição	Exemplo
Para uma única série, é mais simples usar chm=B. Ele preenche toda a área abaixo da linha. É o único tipo de área de preenchimento disponível para os gráficos de radar. chm=b não funciona com gráficos de radar.	chm=B,76A4FB,0,0,0
Aqui está um gráfico com duas linhas e dois preenchimentos. Para preencher a área abaixo da linha inferior e acima da linha superior, é necessário usar uma técnica especial, abordada a seguir.	chd=s: cefhjkqwrlgYcfgc, QSSVXXdkfZUMRTUQ, HJJMOOUbVPKDHKLH, chm= b,224499,0,1,0| (azul) b,FF0000,1,2,0| (vermelho)
Em um gráfico multilinhas, para preencher do topo até a primeira linha, inclua uma série com duas cópias do valor de dados mais alto para o formato de dados. Por exemplo, "...." para codificação estendida, "100,100" para formato de texto básico e assim por diante. Preencha com essas séries até a última linha superior. Para preencher da última linha até a parte inferior do gráfico, inclua uma série que contenha duas cópias do menor valor de dados para o formato de dados. Por exemplo, AAAA para codificação estendida, 0,0 para formato de texto básico e assim por diante. As próprias linhas são desenhadas em preto, usando chco.	chd=e:   ...., (valor mais alto)   cefhjkqwrlgYcfgc,   QSSVXXdkfZUMRTUQ,   HJJMOOUbVPKDHKLH,   AAAA (valor zero) chm=   b,76A4FB,0,1,0| (azul-claro)   b,224499,1,2,0| (azul)   b,FF0000,2,3,0| (vermelho)   b,80C65A,3,4,0 (verde) chco=000000
Este é um gráfico de linhas que contém faixas verticais com preenchimento. Isso é feito especificando um par start:end para <end_line_index> com o tipo de preenchimento de linha "B". B,76A4FB,0,0:3,0: preenchimento vertical azul abaixo da linha 0, vinculada pelos pontos de dados de 0 a 3. B,990000,0,7:10,0: preenchimento vertical em vermelho abaixo da linha 0, limitado pelos pontos de dados 7 a 10. B,DEDC06,0,12:,0: preenchimento vertical amarelo abaixo da linha 0, do ponto de dados 12 até o fim da série.	chm=   B,76A4FB,0,0:3,0|   B,990000,0,7:10,0|   B,DEDC06,0,12:,0
Este exemplo mostra o uso de preenchimento de linha em um gráfico de radar.	chm=   B,FF000080,0,1.0,5.0|   B,FF990080,1,1.0,5.0

Voltar ao início

Linhas de grade chg [linha, barra, radar, dispersão]

Especifique linhas de grade contínuas ou pontilhadas no gráfico usando o parâmetro chg.

Esse parâmetro não permite especificar a espessura ou a cor das linhas. Para conhecer outras formas de criar linhas nos gráficos, consulte marcadores de forma (chm tipo h, H, v ou V), marcadores de intervalo (chm) e marcas de verificação dos eixos (chxtc).

Sintaxe

chg=
  <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>

<x_axis_step_size>, <y_axis_step_size>

Usado para calcular quantas linhas de grade x ou y serão exibidas no gráfico. 100 / step_size = quantas linhas de grade há no gráfico. Portanto: 20,25 significa 5 linhas de grade verticais e 4 linhas de grade horizontais.

<opt_dash_length>, <opt_space_length>

[Opcional] Usado para definir linhas de grade tracejadas. O primeiro parâmetro é o comprimento de cada traço da linha de grade, em pixels. O segundo parâmetro é o espaçamento entre os traços, em pixels. Especifique 0 para <opt_space_length> se quiser uma linha sólida. Os valores padrão são 4,1.

<opt_x_offset>,<opt_y_offset>

[Opcional] O número de unidades, de acordo com a escala do gráfico, para deslocar as linhas de grade x e y, respectivamente. Podem ser números positivos ou negativos. Se você especificar esse valor, também precisará especificar todos os valores anteriores. Os valores padrão são 0,0.

 

Exemplos

Descrição	Exemplo
Esses exemplos usam apenas os parâmetros <x_axis_step_size> e <y_axis_step_size>. A API de gráficos do Google exibe a linha de grade tracejada por padrão.	chg=20,50 chg=20,50
Este exemplo usa espaços maiores para mostrar linhas de grade mais claras (1,5).	chg=20,50,1,5
Para mostrar linhas de grade contínuas, especifique zero (0) para o parâmetro <opt_space_length>. Este gráfico também especifica um deslocamento de 10 para o eixo x.	chg=20,50,1,0,10
Este gráfico demonstra um deslocamento no eixo x de 10 e um deslocamento no eixo y de 20.	chg=20,50,3,3,10,20

Voltar ao início

Marcadores de ícones dinâmicos chem [barras, linhas, radar, dispersão]

Crie seu gráfico e especifique um ou mais ícones dinâmicos como valores para chem. A sintaxe de chem é a seguinte. Todos os itens delimitados por ponto e vírgula em roxo são opcionais e qualquer um deles pode ser omitido no seu URL. Para incluir vários marcadores, inclua várias strings de sintaxe delimitadas por um caractere |. Leia mais sobre os ícones dinâmicos na página de ícones dinâmicos.

Também pode incorporar um gráfico dentro de outro como um ícone dinâmico. Consulte a subseção Gráficos incorporados abaixo.

chem=
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
   |...|
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>

s=<icon_string_constant>

Uma constante de marcador de string para um ícone dinâmico, da página de ícones dinâmicos. Essa constante é quase igual ao parâmetro chst para ícones independentes. No entanto, quando a string do ícone independente começar com "d_", remova esse prefixo para receber o marcador de ícone dinâmico equivalente. Exemplo: ícone independente d_bubble_icon_text_small; marcador de ícone dinâmico equivalente: bubble_icon_text_small.

d=<marker_data_string>

Os dados necessários para esse tipo de marcador específico. Ela contém a mesma string que seria usada em um parâmetro chld para um ícone independente equivalente, exceto que todos os delimitadores | (|) precisam ser substituídos por vírgulas. Use vírgulas em vez de marcadores de barra vertical para texto com várias linhas. Dentro da string de dados, os caracteres a seguir precisam ser de escape com a marca @: barra vertical ( | ) , arroba ( @ ) , igual a ( = ), vírgula ( , ), ponto e vírgula ( ; ). Exemplos: hello@,+world, 5@@10+cents+each.

ds=<which_series>

[Opcional] O índice baseado em zero da série de dados a que esse marcador pertence. O valor padrão é 0.

dp=<which_points>

[Opcional] Especifica quais pontos de dados são usados para desenhar marcadores. O valor padrão é 0 (primeiro ponto da série). Use um dos seguintes formatos:

• 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.
• range,<start>,<end>,<step>: desenhe um marcador em cada ponto de dados de step em um intervalo de start a end, inclusive. início e fim são valores de índice e podem ser números de ponto flutuante para indicar valores intermediários. Todos os valores são opcionais. Os padrões são: start=0, end=last item, step=1. Se você pular um valor, ainda precisará incluir as vírgulas intermediárias, mas não precisará incluir vírgulas vazias à direita. Exemplos: dp=range,0,4 desenha um marcador nos elementos de 0 a 4, dp=range,5,10,2 desenha um marcador nos elementos 5, 7 e 9, dp=range,2 desenha pontos a partir do terceiro ponto e dp=range,3,,1.5 desenha marcadores a cada 1,5 ponto de dados do quarto item ao último.
• all: desenhe um marcador em cada elemento. É equivalente a range,0,end_index. Exemplo: dp=all
• every,n - desenhe um marcador a cada n^o marcador. Exemplo: dp=every,2 desenha um marcador nos itens 0, 2 e 4.

py=<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) estão 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).

po=<x,y>

[Opcional] Uma posição absoluta no gráfico em que o marcador será desenhado. x e y são dois números de ponto flutuante, em que 0.0,0.0 é o canto inferior esquerdo e 1.0,1.0 é o canto superior direito.

of=<x_offset,y_offset>

[Opcional] Um número de pixels para deslocar o ícone da posição normal. x_offset e y_offset são números inteiros positivos ou negativos. É importante especificar esse valor em um ícone dinâmico incorporado, porque o marcador será centralizado vertical e horizontalmente sobre o ponto. Isso significa que o ponto provavelmente não ficará alinhado com o marcador de dados. Um bom deslocamento para um pino inclinado é of=0,22. Um bom deslocamento para um pino inclinado é of=-12,20 ou of=12,20, dependendo da direção da inclinação, mas você pode ter que testar. O valor padrão é 0,0.

 

Exemplos

Descrição	Exemplo
Veja alguns exemplos do mesmo ícone dinâmico criado como uma imagem independente e usado como marcador em um gráfico de linhas. Gráfico 1: 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 Gráfico 2: https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000	chem=   y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0 chst=   d_bubble_icon_text_small chld=   ski|bb|Wheeee!|FFFFFF|000000
Um marcador de ícone dinâmico será centralizado no ponto horizontal e verticalmente. Portanto, se você usar um ícone dinâmico com uma cauda, ela não estará no ponto do gráfico, e sim no centro do marcador. O primeiro gráfico centraliza a marca no ponto de dados 3, o que, na verdade, coloca a cauda um pouco à direita da marca na linha. O segundo gráfico usa o valor of para mover a cauda do marcador para cima do ponto de dados desejado. Um bom deslocamento para um pino inclinado é -12,20.	chem=y;   s=map_xpin_letter;   d=pin_sleft,A,FF0000;   dp=3;   ds=1 chem=y;   s=map_xpin_letter;   d=pin_sleft,A,FF0000;   dp=3;   ds=1;   of=-12,0
Para incluir vários ícones dinâmicos, repita a string de sintaxe, delimitada pelo caractere |. Este exemplo mostra um intervalo e dois tipos de marcadores. Observe como os pinos verticais são deslocados de 0,22, e o pino inclinado tem um deslocamento de 12,20 para alinhar os pontos com a série que eles descrevem.	chem=   y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|   y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|   y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5
Este exemplo demonstra um marcador com várias linhas de texto. O marcador precisa ser deslocado após a adição do texto, porque o balão é redimensionado para se ajustar ao texto, centralizando-o novamente no gráfico. Observe como as novas linhas no texto são indicadas por vírgulas na string de dados d.	chem=y;   s=bubble_texts_big;   d=bbbr,FFC6A5,000000,Outlier,Forgot+to+feed;   ds=0;   dp=13;   of=-120,2

Gráficos incorporados

Você pode incorporar um gráfico dentro de outro usando a sintaxe de ícones dinâmicos.

Há dois estilos de marcadores de gráfico incorporados: gráficos incorporados em um balão e gráficos incorporados sem balão. Veja exemplos de ambos:

Gráfico com balão	Gráfico sem balão

Confira as especificidades dos parâmetros s=<icon_string_constant>;d=<marker_data_string>, tanto para gráficos incorporados por balão quanto não (os parâmetros abrangidos acima não são descritos novamente aqui):

Sintaxe

Non-bubble:
  chem=y;s=ec;d=<alignment_string>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

Bubble:
  chem=y;s=ecb;d=<frame_type>,<padding>,<frame_color>,<fill_color>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

alignment_string

[Somente sem balão] Qual parte do gráfico incorporado sem balão é fixada ao ponto de dados. Escolha uma das constantes de string de duas letras no diagrama a seguir:

chart_data

Os dados do gráfico incorporado. Isso é tudo que vem depois de https://chart.googleapis.com/chart? no URL do gráfico a ser incorporado. Use a ferramenta abaixo ou siga as regras listadas abaixo dela.

frame_type

[Somente balão] É uma das constantes de estilo de frame do ícone dinâmico.

padding (link em inglês)

[Somente balão] Padding dentro do balão, em pixels.

frame_color

[Somente balão] Cor do frame, como uma string de cor HTML de seis dígitos sem a marca #. Exemplo: FF00FF.

fill_color

[Somente balão] Cor de preenchimento do balão, como uma string de cor HTML de seis dígitos sem o sinal #. Exemplo: FF00FF.

Dados do gráfico incorporado

Use a seguinte ferramenta de conversão para ajudar a gerar a string do gráfico. Se preferir, gere-a manualmente seguindo as regras fornecidas após a ferramenta.

Regras para a conversão manual

1. Primeiro, substitua todos os caracteres a seguir nos pares de parâmetro e valor pelos valores a seguir, na ordem mostrada:

Substituir	por
%7C ou %7c	|
@	@@
%	%25
,	@,
|	@|
;	@;
&	%26
=	%3D

2. Em seguida, substitua todos os valores & e = nos pares parameter1=value1&parameter2=value2... por vírgulas.

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.	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.	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).	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).	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.	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.	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.	chm=   N*p0*,000000,0,-1,11 chd=t:   0.4356,0.3562,0.4834,0.575,0.673,0.6091 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.	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

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

Você pode colorir faixas horizontais ou verticais de preenchimento do plano de fundo para destacar áreas específicas de um gráfico.

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

Sintaxe

Especifique um conjunto dos parâmetros a seguir para cada faixa a ser desenhada. Para desenhar várias faixas, crie outros conjuntos de parâmetros, delimitados por uma barra vertical. Os intervalos são desenhados na ordem especificada. Assim, o último intervalo é desenhado por cima dos intervalos anteriores.

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>

<direction>

Especifica sombreamento horizontal ou vertical. Use r para um intervalo horizontal e R para um intervalo vertical.

<color>

A cor do intervalo como um número hexadecimal no formato RRGGBB.

0

Reservado: precisa ser zero.

<start_point>

A posição inicial do intervalo.

• Para marcadores de intervalo horizontais, é uma posição no eixo y, em que 0.00 é a parte inferior do gráfico e 1.00 é a parte superior.
• Para marcadores de intervalo vertical, é uma posição no eixo X, em que 0.00 é a esquerda do gráfico e 1.00 é a direita.

<end_point>

A posição final do intervalo.

• Para marcadores de intervalo horizontais, é uma posição no eixo y, em que 0.00 é a parte inferior do gráfico e 1.00 é a parte superior.
• Para marcadores de intervalo vertical, é uma posição no eixo X, em que 0.00 é a esquerda do gráfico e 1.00 é a direita.

 

Exemplos

Descrição	Exemplo
Marcadores de intervalos podem ser uma linha fina ou uma faixa de cor. r,E5ECF9,0,0.75,0.25: marcador de intervalo, azul claro, (reservado), 0,5 da altura do gráfico. r,000000,0,0.1,0.11: marcador de intervalo, preto, (reservado), começa em 0,1 acima do eixo y e termina em 0,11 acima do eixo y (uma linha preta fina).	chm=   r,E5ECF9,0,0.75,0.25|   r,000000,0,0.1,0.11
Este exemplo mostra marcadores de intervalo verticais. O primeiro marcador é uma linha vermelha (FF0000) e o segundo é uma faixa azul claro (A0BAE9).	chm=   R,FF0000,0,0.1,0.11|   R,A0BAE9,0,0.75,0.25
Os marcadores são desenhados na ordem especificada. Neste exemplo, é possível observar que o marcador vertical vermelho foi desenhado antes do marcador horizontal em azul claro.	chm=   R,FF0000,0,0.1,0.11|   R,A0BAE9,0,0.75,0.25|   r,E5ECF9,0,0.75,0.25|   r,000000,0,0.1,0.11
Veja um exemplo de gráfico de linhas que usa marcadores de intervalo para desenhar linhas horizontais bem claras no gráfico, na linha zero, na linha do ponto médio e no topo.	chm=   r,000000,0,0.499,0.501|   r,000000,0,0.998,1.0|   r,000000,0,0.0,0.002

Voltar ao início

Marcadores de vela chm=F [barra, linha]

Os marcadores de vela indicam a variação e a mudança de direção em uma série de dados. Muitas vezes, eles são usados para mostrar valores de ações ao longo de um dia. O marcador inclui segmentos que mostram o valor alto e baixo, bem como o valor de abertura e fechamento de um período específico (normalmente um dia). Para saber mais sobre marcadores de vela, clique aqui.

Um marcador vela é desenhado como um retângulo dividido ao meio por uma linha vertical. São necessárias quatro séries de dados para desenhar um marcador de vela. Veja o que cada série especifica:

• As séries 1 e 4 especificam a parte inferior e superior da linha vertical, respectivamente. Normalmente, eles representam os valores baixos e altos do dia.
• As séries 2 e 3 especificam as bordas verticais do retângulo. A série 2 é o valor de abertura e a série 3 é o valor de fechamento. A cor do retângulo depende do que é maior: quando o valor de abertura (série 2) é menor que o valor de fechamento (série 3), o preço aumentou e o retângulo é preenchido com verde sólido por padrão. Quando o valor de abertura (série 2) é maior que o valor de fechamento (série 3), o preço diminuiu e o retângulo é preenchido com vermelho sólido por padrão. Só é possível especificar uma cor de preenchimento para o retângulo com valor decrescente. Quando você especifica isso, o retângulo com valor crescente não é preenchido (vazio). A série 2 pode ser a parte de cima ou de baixo do retângulo, dependendo se o preço subiu ou desce.

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

Observação:se você não quiser que as linhas dos dados usados para desenhar os marcadores apareçam no gráfico, inclua um 0 após o tipo de formato. Por exemplo: chd=t0:10,20,30,40 em uma string de dados de formato de texto. Consulte Gráficos compostos para mais informações.

Este é um exemplo que mostra as linhas de cada série:

Sintaxe

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>

F

Indica que este é um marcador de vela.

<opt_declining_color>

[Opcional] Cor de preenchimento dos retângulos quando o valor está diminuindo (quando o valor da série 2 é > o valor correspondente da série 3). É um número hexadecimal no formato RRGGBB. Quando os valores aumentam, o retângulo fica vazio. O padrão é verde sólido para crescente, vermelho sólido para decrescente. Não é possível especificar uma cor de preenchimento personalizada para valores crescentes.

<data_series_index>

O índice da série de dados a ser usada como a primeira série dos marcadores de vela. Esse índice começa no zero. Portanto, se você especificar 1 aqui e tiver seis séries, o segundo, terceiro, quarto e quinto serão usados para desenhar marcadores de vela.

<opt_which_points> (em inglês)

[Opcional] Especifica quais pontos de dados são usados para desenhar marcadores. O padrão é todos os marcadores. Use um dos seguintes formatos:

• n.d: desenhe um marcador em um único ponto na série, em que n.d é o índice do ponto na série. 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.
• -1: desenha um marcador em todos os pontos de dados. Você também pode deixar esse parâmetro vazio para desenhar em todos os marcadores.
• -n: desenha um marcador a cada no ponto de dados.
• start:end:n: desenha um marcador em cada n o ponto de dados em um intervalo, de valores de índice 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, 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

<largura>

A largura de todos os retângulos, em pixels.

<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).

 

Exemplos

Descrição	Exemplo
Este é um exemplo de marcadores de vela em um gráfico de linhas com quatro séries. A cor de preenchimento personalizada 0000FF (azul) é especificada. Essa cor é usada para preencher os retângulos quando o ponto na série 3 é menor que o ponto equivalente na série 2. O primeiro e último retângulos são cortados pelo gráfico. Para eliminar esses valores, especifique 1:4 para o quarto parâmetro de chm. Observe o zero na string de dados para ocultar as linhas da série: chd=t0. Isso indica que todos os dados do gráfico devem ser usados pelos marcadores. O parâmetro <which_point> está em branco, o que desenha velas em todos os pontos de dados.	chd=t0:   0, 5,10, 7,12, 6|   35,25,45,47,24,46|   15,40,30,27,39,54|   70,55,63,59,80,60 chm=F,0000FF,0,,20
Veja um exemplo do mesmo gráfico, usando as cores padrão e removendo o primeiro e o último item. Este é um gráfico composto: é uma combinação de um gráfico de linhas (o tipo de gráfico base) e marcadores de vela. O valor de 1 em cht=t:1 significa que todas as séries de dados após a primeira devem ser ocultadas do tipo de gráfico básico (gráfico de linhas). O primeiro 1 em chm=F,,1,1:4,20 significa que os dados das velas são das séries 2, 3, 4 e 5 (o 1 é baseado em zero). Consulte Gráficos compostos para mais informações sobre como desenhar um gráfico composto como este.	cht=lc chm=   F,,1,1:4,20 chd=t1:   15,40,30,27,39,54|   ...

Voltar ao início

Marcadores de linha chm=D [barras, velas, linhas, radar, dispersão]

Você pode adicionar uma linha que rastreie dados no seu gráfico. Na maioria das vezes, ele é usado em gráficos compostos.

Para adicionar várias linhas (ou combiná-las com outros marcadores chm), separe os conjuntos de parâmetros chm usando uma barra vertical ( | ). Não é possível criar um marcador de linha tracejada com esse parâmetro.

Sintaxe

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>

D

Indica que este é um marcador de linha.

<color>

A cor da linha, no formato hexadecimal RRGGBB.

<series_index>

O índice da série de dados usado para desenhar a linha. O índice da série de dados é 0 para a primeira, 1 para a segunda e assim por diante.

<which_points>

Os pontos de uma série a serem usados para desenhar a linha. Use um dos seguintes valores:

• 0: usa todos os pontos da série.
• start:end: usa um intervalo específico de pontos da série, do início ao fim, inclusive (índice baseado em zero). Também é possível usar valores de ponto flutuante para especificar pontos intermediários ou deixar start ou end em branco para indicar o primeiro ou o último ponto de dados, respectivamente. start e end podem ser negativos, como um índice inverso do último valor. Se start e end forem negativos, escreva-os em valor crescente (por exemplo, -6:-1).

<size>

A largura da linha em pixels.

<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).

 

Exemplos

Descrição	Exemplo
Este é um exemplo de como desenhar um marcador de linha em um gráfico de barras. A ordem z é definida como 1, então a linha é desenhada por cima das barras. Este exemplo usa os mesmos dados tanto para as barras como para a linha de dados.	chm=D,0033FF,0,0,5,1 chd=s:1XQbnf4
Este é o mesmo gráfico de barras, mas com uma série de dados adicionais apenas para a linha. É um exemplo de gráfico composto. Os gráficos compostos são exibidos com a adição de outras séries de dados ao parâmetro chd, além de um valor para chd, instruindo o gráfico a "ignorar" as outras séries de dados. Consulte Gráficos compostos para mais informações.	chm=D,0033FF,1,0,5,1 chd=s1:1XQbnf4,43ksfg6

Voltar ao início

Funções de dados chfd [todos os chd gráficos]

É possível especificar uma função personalizada para executar nos dados do gráfico usando a sintaxe da função muParser. Os dados usados na função podem vir de uma das duas fontes a seguir:

• Uma série de dados de chd: os dados são extraídos da série especificada em chd.
• Um intervalo de valores declarados no próprio parâmetro chfd: você declara um valor de início, uma parada e um passo para um intervalo de dados arbitrário.

É importante observar que, em todos os casos, você precisa atribuir a saída a uma série atual em chd. Essa série será substituída pela saída da função. O gráfico é renderizado somente depois que todas as funções são processadas. Portanto, se você atribuir várias funções para saída à mesma série de dados, as funções serão executadas na ordem determinada, mas apenas a saída da função final será mostrada no gráfico. É possível encadear funções, para que uma função possa receber como entrada uma série que foi saída por uma função anterior.

Para atribuir cores ou marcadores chm a uma linha de função, atribua as cores ou os marcadores ao índice de série da função. Os marcadores são posicionados de acordo com os dados depois de serem manipulados pela função.

Sintaxe

chfd=
  <output_series_index>,<function_data>,<function_string>
    |...|
  <output_series_index>,<function_data>,<function_string>

<output_series_index>

Índice baseado em zero de uma série de dados em chd em que a saída da função será gravada. Todos os dados atuais serão completamente substituídos pela saída da função. Se uma série não estiver sendo usada como entrada para uma função, a prática recomendada é atribuir um único valor fictício a essa série.

<function_data>

As variáveis e os dados que serão representados no gráfico. Os dados podem ser de um intervalo definido por você ou de uma das séries de dados chd. É possível especificar diversas variáveis para cada função, usando um delimitador ; (ponto e vírgula) para diversas variáveis. Se você definir diversas variáveis para uma única função e elas tiverem um número de pontos diferente, a função será interrompida quando alcançar o primeiro endpoint. Por exemplo, se uma função definir x=1 a 5, etapa 1 e y=1 a 10, etapa 1, a função será encerrada quando alcançar o quinto ponto.
    <variable_name>,<input_series_index>
         OU
    <variable_name>,<start>,<end>,<step>

• variable_name: um nome de string arbitrário para a variável. Use na função definida por function_string.
• input_series_index: o índice de uma série de dados chd a ser usada como dados de entrada.
• início: o valor numérico inicial de um intervalo.
• fim: o valor numérico final de um intervalo.
• step: o valor numérico da etapa de start a end. Pode ser positivo ou negativo, mas não pode ser zero.

Exemplos : x,0,100,1 declara uma variável chamada x com valores 0, 1, 2, ... 100. x,0,100,1;r,0,3.1,.1 declara a mesma variável x mais uma variável chamada r com valores 0, 0,1, 0,2, ..., 3,0, 3,1. O x,0 declara uma variável com o nome x que usa os dados da primeira série chd. Essas variáveis serão usadas por function_string. Elas não serão incluídas no gráfico, a menos que você as especifique em function_string. Quanto menor for o valor do grau, mais suave será o gráfico.

<function_string>

Sua função escrita na sintaxe muParser. A função é aplicada às variáveis e aos dados especificados em variable_data. Só é possível fazer referência às variáveis declaradas nesse conjunto de funções locais, não em outro conjunto de parâmetros chfd. As funções de resumo muParser não são suportadas (min, max sum, avg). IMPORTANTE: lembre-se de usar %2B em vez de + nas suas funções.

 

Exemplos

Descrição	Exemplo
Uma onda senoidal simples. Observações importantes: chd=t:-1: usamos uma variável fictícia para os dados do gráfico, porque nossos dados estão declarados no parâmetro chfd. chco=FF0000: o vermelho é especificado para a primeira série. Ainda que não usemos os dados de chd, a cor correspondente para essa série será utilizada para essa função plotada. chfd=0,x,0,11,0.1,sin(x)*50%2B50: declaramos uma variável, chamada x, com valores de 0 a 11, incrementada em 0,1. Ele é atribuído à primeira série, o que significa que receberá a cor da primeira série (FF0000). A função aplicada a x é sin(x) * 50 + 50. Observe como precisamos codificar o + nessa função.	cht=lc chd=t:-1 chco=FF0000 chfd=   0,x,0,11,0.1,sin(x)*50%2B50 chxt=x,y
Essa linha usa dados do parâmetro chd.	chd=t:5,10 chfd=0,x,0,x*4
Uma mistura de linhas de função e não função. As cores são especificadas pelo parâmetro de cor da série chco. Observe o posicionamento dos marcadores na saída da função.Os pontos de dados são calculados a partir de start, end e step.Assim, se o intervalo for de 0 a 11, 0,1, 0, 0, 0, e assim por diante, até o ponto 110, que tem o valor 11.	chd=t:   -1   15,45 chco=   FF0000,000000 chfd=   0,x,0,11,0.1,sin(x)*50%2B50 chm=   c,00A5C6,0,110,10   a,00A5C6,0,60,10
Para definir uma função em duas dimensões, use um gráfico lxy, atribua duas séries fictícias e atribua uma função a cada uma. 0,x,0,10,0.1,sin(x)*50%2B50: a série 0 (os valores do eixo x) tem uma variável chamada x, com valores de 0 a 10, etapa 0, 1 e uma função sin(x)*50 + 50. 0,y,0,10,0.1,sin(y)*50%2B50: a série 0 (os valores do eixo y) tem uma variável chamada y, com valores de 0 a 10, etapa 0, 1 e uma função sin(x)*50 + 50	cht=lxy chd=t:-1|-1 chfd=   0,x,0,10,0.1,sin(x)*50%2B50|   1,y,0,10,0.1,cos(y)*50%2B50
O parâmetro chfd permite expressar sua criatividade. Tente clicar nessas imagens para abrir e brincar com elas no playground de gráficos. Você vai arrasar!

Voltar ao início