Lista de recursos de gráficos

Esta página descreve todos os recursos e parâmetros suportados pela API de gráficos do Google. Alguns desses parâmetros se comportam de maneira diferente dependendo do tipo de gráfico. Nesse caso, a documentação direciona para a documentação apropriada do gráfico.

Parâmetros

Estes são os parâmetros suportados pela API de gráficos do Google.

Parâmetro Descrição e sintaxe Tipos de gráficos
chbh Largura e espaçamento das barras

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

Barra
chco Cores da série
chco=
  <series_1_element_1>|...|<series_1_element_n>,   <series_2>,...,<series_m>
Barra, Google-o-metr, Line, Map, Pie, Radar, Scatter, Venn
chd String de dados do gráfico
chd=
  t:s,e,r,i,e,s,1|s,e,r,i,e,s,2|...
ou
  s:series1,series2,...
ou
  e:series1,series2,...
Todos os gráficos
chdl, chdlp, chdls Texto e estilo das legendas do gráfico

chdl=
  <data_series_1_label
>
   |...|
  <data_series_n_label>

chdlp=<opt_position>|<opt_label_order>

chdls=<color>,<font_size>

Barra, Candlestick, Google-o-metr, Line, Pie, Radar, Scatter, Venn
chds Dimensione o formato de texto com intervalo personalizado
chds=
  <series_1_min>,
  <series_1_max>,...
Todos os gráficos que aceitam chd
chem Marcadores de ícone dinâmicos
chem=
  y;s=<icon_string_constant>;
  d=<marker_data_string>;
  ds=<which_series>;
  dp=<opt_which_points>;
  py=<opt_z_order>;
  po=<x,y>;
  of=<x_offset,y_offset>
Barra, Candlestick, Linha, Radar, Dispersão
chf Preenchimento de gradiente
chf=
  <fill_type>,
  lg,
  <angle>,
  <color>
Barra, Candlestick, Google-o-metr (somente plano de fundo), Linha, Pizza (somente em segundo plano), Radar, Dispersão, Venn
chf Preenchimento listrado
chf=
  <fill_type>,
  ls,
  <angle>,
  <color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
Barra, Candlestick, Google-o-metr (somente plano de fundo), Linha, Pizza (somente em segundo plano), Radar, Dispersão, Venn
chf Preenchimento contínuo
chf=
  <fill_type>,
  s,
  <color>
Barra, Candlestick, Google-o-metr (somente plano de fundo), Linha, Mapa (somente plano de fundo), Radar, Dispersão, Venn, Pie
chfd Funções de dados
chfd=
  <series_index>,
  <variable_data>,
  <function_string>
    |...|
Todos os gráficos que aceitam chd
chg Linhas de grade
chg=
  <x_axis_step_size>,
  <y_axis_step_size>,
  <opt_dash_length>,
  <opt_space_length>,
  <x_offset>,
  <y_offset>
Barra, Candlestick, Linha, Radar, Dispersão
chl Etiquetas do gráfico de pizza, Rótulo do medidor do Google
chl=<label>|...
Google-o-metr, Pie
chld Dados do rótulo do gráfico (vários tipos)
chld=<chart-specific_data>|<chart-specific_data>|...
Ícones dinâmicos independentes
chls Estilos de linha
chls=
  <line_1_thickness>,
  <opt_dash_length>,
  <opt_space_length>|...
Linha, Radar
chm=D Marcadores de linha
chm=
  D,
  <color>,
  <series_index>,
  <which_points>,
  <width>,
  <opt_z_order>|...
Barra, Candlestick, Linha, Radar, Dispersão
chm=r|R Marcadores de intervalo
chm=
  <r_or_R>,
  <color>,
  0,
  <start_point>,
  <end_point>|...
Barra, Candlestick, Linha, Radar, Dispersão
chm=
a|c|C
d|E|o|
h|H|
s|S|
v|V|x
Marcadores de forma
chm=
  <marker_type>,
  <color>,
  <series_index>,
  <opt_which_points>,
  <size>,
  <opt_z_order>,
  <opt_offset>|...
Barra, Candlestick, Linha, Radar, Dispersão
chm=
f|t|A|N
Marcadores de texto e de valor de dados
chm=
  <marker_type>,
  <color>,
  <series_index>,
  <opt_which_points>,
  <size>,
  <opt_z_order>|
  <opt_placement> ...
Barra, Candlestick, Linha, Radar, Dispersão
chm=F Marcadores de vela
chm=
  F,
  <opt_declining_color>,
  <data_series_index>,
  <opt_which_points>,
  <width>,
  <opt_z_order>
Barra, vela, linha
chm=b/B Preenchimento de linha
chm=
  <b_or_B>,
  <color>,
  <start_line_index>,
  <end_line_index>,
  <0>
Barra (somente com marcadores de linha), Linha, Radar
chma Margens do gráfico
chma=
  <left_margin>,
  <right_margin>,
  <top_margin>,
  <bottom_margin>
 |<opt_legend_width>,
   <opt_legend_height>
Barra, Candlestick, Google-o-metr, Line, Map, Pie, Radar, Scatter, Venn
chof Formato de saída
chof=<format>
Todos os gráficos
chp Linha zero do gráfico de barras, Orientação do gráfico de pizza
chp=<zero_val>,...
Barra, Pizza
chs Tamanho do gráfico
chs=<width>x<height>
Todos os gráficos
chst Tipo de ícone dinâmico
chst=<icon_string_constant>
Ícones dinâmicos independentes
cht Tipo de gráfico
cht=<chart_type>
Todos os gráficos
chtm Área geográfica
chtm=<zoom_area>
Mapa
chtt, chts Título e estilo do gráfico

chtt=<chart_title>

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

Barra, Candlestick, Google-o-metr, Line, Pie, Radar, Scatter, Venn
chxt Eixos visíveis
chxt=<axis_1>,...
Barra, Candlestick, Google-metro, Linha, Radar, Dispersão
chxr Intervalos de eixo
chxr=
  <axis_index>,
  <start_val>,
  <end_val>,
  <opt_step>|...
Barra, Candlestick, Google-metro, Linha, Radar, Dispersão
chxl Rótulos de eixo
chxl=
  <axis_index>:|<label_1>|...
Barra, Candlestick, Google-metro, Linha, Radar, Dispersão
chxp Posição dos rótulos dos eixos
chxp=
  <axis_index>,
  <label_1_position>,
  ...,<label_n_position>
  |...
Barra, Candlestick, Google-metro, Linha, Radar, Dispersão
chxs Estilos de rótulo do eixo
chxs=
  <axis_index>
  <opt_format_string>,
  <opt_label_color>,
  <opt_font_size>,
  <opt_alignment>,
  <opt_axis_or_tick>,
  <opt_tick_color>,
  <opt_axis_color>|...
Barra, Candlestick, Google-metro (limitado), Linha, Radar, Dispersão
chxtc Estilos de marca de marcação de eixo
chxtc=
  <axis_index_1>,
  <tick_length_1>,...,<tick_length_n>
  |...
Barra, Candlestick, Linha, Radar, Dispersão

Formato de cor

Especifique cores usando uma string de seis caracteres de valores hexadecimais, além de dois valores de transparência opcionais, no formato RRGGBB[AA]. Exemplo:

  • FF0000 = vermelho
  • 00FF00 = Verde
  • 0000FF = Azul
  • 000000 = Preto
  • FFFFFF = Branco

AA é um valor de transparência opcional, em que 00 é completamente transparente e FF é completamente opaco. Exemplo:

  • 0000FFFF = Azul sólido
  • 0000FF66 = azul transparente

Voltar ao início

Tamanho do gráfico chs [Todos os gráficos]

É necessário especificar o tamanho de todos os gráficos. Este parâmetro determina a largura e a altura totais da imagem do gráfico, incluindo legends, margens e títulos. As legendas, margens e títulos são cortados para caber no tamanho total do gráfico.

O tamanho máximo de todos os gráficos,exceto os mapas, é de 300.000 pixels no total,e a largura ou comprimento máximo de 1.000 pixels. O tamanho máximo para os mapas é de 440x220.

Os valores são números inteiros.

Sintaxe

chs=<width>x<height>
<largura>
Largura, em pixels. O valor máximo é de 1.000. A largura x altura não pode exceder 300.000.
<height>
Altura, em pixels. O valor máximo é de 1.000. A largura x altura não pode exceder 300.000.

 

Exemplo

Descrição Exemplo

Um gráfico de 250 x 100 pixels.

Gráfico de setores amarelo
chs=250x100

Voltar ao início

Tipo de gráfico cht [todos, exceto ícones dinâmicos ]

Especifique o tipo de gráfico usando o parâmetro cht. Consulte as páginas de documentação de gráficos individuais para ver uma lista dos tipos de gráficos disponíveis.

Sintaxe

cht=<type>[:nda]
<type>
Um dos valores do tipo de gráfico.
:nda
[Opcional, somente gráficos de linhas] É possível adicionar :nda depois do tipo de gráfico nos gráficos de linhas para ocultar os eixos padrão.

 

Exemplos

Descrição Exemplo

Gráfico de setores

Gráfico de setores amarelo
cht=p
Diagrama de Venn Diagrama de Venn com interseção de três círculos, um círculo é azul e os outros são verdes
cht=v
Um gráfico de linhas com e sem eixos padrão.

   Gráfico de linhas com eixos padrão       Gráfico de linhas com eixos ocultos
          cht=lc                      cht=lc:nda

Voltar ao início

Cores da série chco [todos os gráficos]

É possível especificar as cores de uma série específica ou de todos os elementos de uma série usando o parâmetro chco. A sintaxe e o significado exatos podem variar de acordo com o tipo de gráfico. Consulte o tipo de gráfico específico para saber mais detalhes.

Sintaxe

chco=
  <series_1_element_1>|...|<series_1_element_n>,<series_2>,...,<series_m>

Cada entrada nessa string é um número hexadecimal no formato RRGGBB. As cores aplicáveis a uma série inteira são delimitadas por vírgulas, e as cores aplicadas a elementos individuais de uma série são delimitadas por uma barra. Para a maioria dos tipos de gráficos, é possível combinar descrições de cores para elementos de séries inteiras e individuais. Se houver mais séries ou elementos no gráfico do que cores especificadas na sua string, a API normalmente passará por cores de elementos desde o início dessa série (para elementos) ou para cores de série do início da lista de séries. Para mais detalhes, consulte a documentação do gráfico individual.

 

Exemplos

Descrição Exemplo

Quando você especifica uma única cor para cada série em um gráfico de linhas, cada linha recebe a cor correspondente. Este exemplo possui três séries de dados e três cores especificadas.

Gráfico de linhas com uma linha vermelha, uma azul e uma verde

chco=FF0000,00FF00,0000FF

Este gráfico de linhas também tem três séries de dados, mas apenas duas cores são especificadas. Como a cor da terceira série não foi especificada, a terceira linha é desenhada usando a primeira cor (vermelho).

Gráfico de linhas com duas linhas vermelhas e uma azul

chco=FF0000,0000FF

Este exemplo demonstra como especificar uma cor para os membros individuais de uma série (barras neste exemplo).

Gráfico de barras verticais com dois conjuntos de dados: um em azul escuro e o outro empilhado em azul claro

cht=bvs
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE

Isso demonstra a especificação de cores de séries e de elementos individuais. A primeira série está toda em preto (000000). A segunda série, marcada por uma vírgula, tem cores individuais atribuídas, delimitadas por caracteres |.

Gráfico de barras com um ponto de dados em vermelho, o segundo em verde e o terceiro em azul

chco=000000,FF0000|00FF00|0000FF

Voltar ao início

Formato de saída chof [Todos os gráficos]

Você pode escolher o formato de saída do gráfico usando o parâmetro chof. Esse parâmetro também pode ser usado para exibir informações de depuração ao projetar o gráfico. Alguns formatos de saída são gráficos (por exemplo, PNG e GIF), mas outros não. Usar um formato não gráfico como o parâmetro src de uma tag <img> causa uma imagem corrompida na página.

Sintaxe

chof=png|gif|json|validate.

Especifique uma das seguintes strings:

  • "png": retorna o gráfico como uma imagem PNG.
  • "gif" - retorna o gráfico como uma imagem GIF.
  • "json": retorna dados do mapa de imagens do gráfico, como uma string JSON. Isso pode ser usado para gerar um mapa de imagens para o gráfico e tornar várias regiões clicáveis. Consulte Como criar um mapa de imagens do gráfico para o formato dessa string e mais informações sobre como usá-la.
  • "valid" - retorna uma página HTML que lista todos os erros no URL do gráfico. Consulte Depuração para ver mais dicas de depuração.

 

Exemplos

Descrição Exemplo

Veja exemplos em PNG e GIF do mesmo gráfico:

Gráfico de barras verticais com título
chof=png
Gráfico de barras verticais com título
chof=gif

Um gráfico com um URL inválido: https://chart.googleapis.com/chart?cht=bvs&chd=s:YUVmw1&chco=0000FF&chs=180x150&chtt=Site+visitors&chts=0000FF,20,20&chbh=22,4&chof=validate. Você consegue identificar o erro?

Ao especificar chof=validate, uma página HTML é retornada. Aqui, ela é a origem de um <iframe> para que você possa ver a página de resultados.


Exemplo de URL inválido com chof=validate

Este é o HTML retornado para um URL válido quando chof=validate.

https://chart.googleapis.com/chart?cht=bvs&chd=s:YUVmw1&chco=FF0000&chs=180x150&chtt=Site+visitors+by+month|January+to+July&chbh=22,4&chof=validate


URL de gráfico válido em um <iframe>

Voltar ao início

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.

<gráfico_title>
Título a ser exibido no gráfico. Você não pode especificar onde ele aparece, mas tem a opção de 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.

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

 

Exemplos

Descrição Exemplo

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

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

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

chts não está especificado aqui.

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

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

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

Voltar ao início

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 em texto de cada série. É possível especificar o texto associado a cada série nessa legenda e especificar onde no gráfico ela deve aparecer.

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

Observação sobre valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Para ser seguro, codifique o URL de todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Você pode encontrar 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 exibida na legenda.

<data_série_label>
O texto das entradas da legenda. Cada rótulo se aplica à série correspondente na matriz chd. Use um sinal de + para 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 é expandida para conter o texto, e a área do gráfico é reduzida para acomodar a legenda.

chdlp : [opcional] a posição da legenda e a ordem das entradas da legenda. Você pode especificar <position> e/ou <label_order>. Se você especificar ambos, separe-os com um caractere de barra. É possível adicionar 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, 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 um dos seguintes valores:
  • l: [padrão para legendas verticais]. Exiba os rótulos na ordem atribuída a chdl.
  • r: exibe rótulos na ordem inversa, conforme determinado a 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: significa ordenar por comprimento, mais curto primeiro, conforme medido em blocos de 10 pixels. Quando dois elementos tiverem o mesmo tamanho (divididos em blocos de 10 pixels), o primeiro listado será exibido primeiro.
  • 0,1,2...: ordem de rótulo personalizada. Esta é uma lista de índices de rótulos baseados em zero do chdl, separados por vírgulas.

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

<cor>
A cor do texto da legenda, no formato hexadecimal RRGGBB.
<tamanho>
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 sua série de dados.

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

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

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


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

O primeiro gráfico demonstra as entradas de legendas horizontais (chdlp=t, o layout padrão é horizontal), e o segundo demonstra as entradas de legendas verticais inferiores (chdlp=bv).

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


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

Este exemplo demonstra a mudança do tamanho da fonte.

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

Voltar ao início

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 de acordo com o tamanho do 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 da margem será o que sobrar. Não é possível espremer as margens menores que o necessário para legendas e rótulos. Veja um diagrama que mostra as partes básicas de um gráfico:

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

As margens de gráfico incluem os rótulos do eixo e a área de legenda. A área da legenda é redimensionada automaticamente para caber no texto, a menos que você especifique uma largura maior usando chma. Nesse caso, ela expande o tamanho da margem e aumenta o tamanho da área do gráfico. Não é possível cortar uma legenda especificando um tamanho muito pequeno, mas ela pode ocupar 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>
Margem mínima em torno da área do gráfico, em pixels. Aumente esse valor para incluir padding para evitar que os rótulos do eixo encostem nas bordas do gráfico.
<opt_legend_width>, <opt_legend_height>
[Opcional] Largura da margem ao redor da legenda, em pixels. Use essa opção para que a legenda não encoste na área do gráfico nem 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 do lado direito está definida com a largura da legenda do gráfico e é diferente das outras margens.

As etiquetas de eixo estão fora da área do gráfico e, portanto, são desenhadas no espaço de margem.

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

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

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

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

Voltar ao início

Estilos e rótulos do eixo [Linha, Barra, Google-o-metro, Radar, Dispersão]

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

Nem todos os gráficos exibem linhas de eixos por padrão. É possível especificar exatamente quais eixos o gráfico vai exibir usando o parâmetro chxt. As linhas dos eixos padrão não mostram números. É necessário especificar um eixo no parâmetro chxt para mostrar números.

Você pode escolher que seus eixos exibam números que reflitam os valores de dados ou especifique eixos personalizados. O padrão é exibir valores numéricos, com valores dimensionados para um intervalo de 0 a 100. No entanto, é possível alterar esse intervalo usando chxr para exibir qualquer intervalo e estilizar os valores (por exemplo, para mostrar símbolos de moedas ou casas decimais) usando chxs.

Se você escolher usar valores personalizados, por exemplo: "Seg, Ter, Qua", use o parâmetro chxl. Para colocar esses rótulos em locais específicos ao longo do eixo, use o parâmetro chxp.

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

Observação sobre valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Para ser seguro, codifique o URL de todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Você pode encontrar um codificador de URL na documentação de visualização do Google.

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


Eixos visíveis chxt

Os gráficos de barras, linhas, radares 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 do eixo ou alterar os eixos exibidos, é necessário usar 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 mostram marcas de marcação pelos valores, enquanto os eixos esquerdo e direito os exibem. Você pode alterar esse comportamento usando o parâmetro chxs.

Sintaxe

chxt=
  <axis_1>
    ,...,
  <axis_n>
<eixo>
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-o-Meter]
  • y: eixo y esquerdo
  • r: eixo y direito [incompatível com o Google-o-Meter]

É possível especificar vários eixos do mesmo tipo, por exemplo: cht=x,x,y. Isso vai empilhar dois conjuntos de eixos x ao longo da 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 refere à cópia mais interna, o próximo x se refere à 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 usa 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 marcação pelos rótulos.

Gráfico de linhas com os rótulos 0, 20, 40, 60, 80 e 100 à esquerda e à direita, e os rótulos 0, 25, 50, 75 e 100 acima e abaixo
chxt=x,y,r,t

Você pode incluir vários conjuntos de rótulos para cada eixo, incluindo o mesmo valor mais de uma vez. Este exemplo mostra dois conjuntos de x e dois de eixos y. Isso não é particularmente útil ao usar apenas as etiquetas de eixo padrão, como mostrado aqui. Mas é possível especificar rótulos personalizados para cada cópia de cada eixo usando o parâmetro chxl.


chxt=x,x,y,y



chxt=x,x,y,y
chxl=
  1:|Freezing|Hot|
  3:|Low|High

Este exemplo mostra um gráfico de barras horizontal com um eixo x, um eixo y, um eixo t superior e um eixo r direito.

Os rótulos dos eixos são omitidos. Por isso, a API Chart exibe um intervalo de 0 a 100 para o eixo x e o t.

O intervalo para os eixos y e r é determinado pelo número de barras. Neste caso, há cinco barras, então a API Chart exibe um intervalo de 0 a 4. A primeira etiqueta é centralizada na base da primeira barra, a segunda é centralizada na base da segunda barra e assim por diante.

Gráfico de linhas com os rótulos 0, 20, 40, 60, 80 e 100 à esquerda e à direita, e os rótulos 0, 25, 50, 75 e 100 acima e abaixo
chxt=x,y,r,t

Para suprimir os eixos padrão em um gráfico de linhas, especifique :nda após o tipo de gráfico. Gráfico de linhas com eixos ocultos
cht=lc:nda

Voltar ao início

Intervalo do eixo chxr

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

É necessário tornar um eixo visível usando o parâmetro chxt se você quiser especificar o intervalo dele.

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

Sintaxe

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

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<índice_do_eixo>
É o eixo em que os rótulos serão aplicados. Este é um índice baseado em zero na matriz de eixo 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 valor alto para este eixo.
<opt_step>
[Opcional] A etapa de contagem entre marcações do eixo. Não há valor padrão da etapa. A etapa é calculada para tentar mostrar um conjunto de rótulos espaçados.

 

Exemplos

Descrição Exemplo

Este exemplo mostra os eixos y esquerdo e direito (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 coletados do intervalo especificado e espaçados uniformemente dentro desse intervalo. 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 valor (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. O valor cinco (5) é especificado para o parâmetro <opt_step>.

Gráfico de barras com 200, 300 e 400 no eixo x chxt=x
chxr=0,10,50,5

Voltar ao início

Rótulos de eixo personalizados chxl

É possível especificar rótulos de eixo de string personalizados em qualquer eixo, usando o parâmetro chxl. É possível especificar quantos rótulos você 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.

Para definir locais específicos nos eixos dos 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>
É o eixo em que os rótulos serão aplicados. Este é 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, e 1 o segundo eixo x.
<label_1>| ... |<label_n>
Um ou mais rótulos a serem posicionados ao longo desse eixo. Eles podem ser strings ou valores numéricos. As strings não precisam estar entre aspas. label_1 é exibido na posição mais baixa do eixo, e label_n é exibido na posição 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 um 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.

Gráfico de linhas com 0 e 100 à esquerda; A, B e C à direita; Jan, Jul, Jan, Jul e Jan no eixo x e 2005, 2006 e 2007 abaixo
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). Considere adicionar marcas de marcação no eixo y usando chxs.

Gráfico de linhas com 0 e 100 à esquerda; A, B e C à direita; Jan, Jul, Jan, Jul e Jan no eixo x e 2005, 2006 e 2007 abaixo
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 esquerdo e direito (y e r). Ele também inclui dois conjuntos de valores para o eixo x (x). Observe os rótulos vazios para o conjunto menor de eixo x, usado para espaçar os valores.

Este exemplo usa valores padrão para os rótulos do eixo y da esquerda.

Gráfico de barras com 0 e 100 à esquerda, A, B e C à direita, Jan, Jul, Jan, Jul e Jan no eixo x e 2005, 2006 e 2007 abaixo
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 "custo" e outro "aluno"), use a propriedade chxt para adicionar um outro eixo em cada lado. Em seguida, use chxl para adicionar um único rótulo personalizado a cada lado e chxp para colocá-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 do rótulo do eixo chxp

Especifique quais rótulos de eixos serão exibidos, usando os rótulos padrão ou personalizados com chxl. Se você não especificar posições exatas usando esse parâmetro, os rótulos serão espaçados uniformemente e em um valor de passo padrão ao longo dos eixos. Se você não especificar chxl, as etiquetas de marcação serão os valores padrão, normalmente valores de dados, ou números de barras em gráficos de barras.

Sintaxe

Separe vários conjuntos de posicionamento usando o caractere de 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 as posições estão especificadas. Este é 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 eixo x e assim por diante.
<label_1_position>,...,<label_n_position>
: a posição da etiqueta ao longo do eixo. Esta é 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 desse eixo. Ele sempre será de 0 a 100, a menos que você tenha especificado um intervalo personalizado usando chxr. Você precisa ter a mesma quantidade de rótulos para esse eixo.

 

Exemplos

Descrição Exemplo

Este exemplo inclui rótulos no eixo r em posições especificadas no gráfico. O texto do rótulo é especificado usando o parâmetro chxl.

Os rótulos com uma posição especificada de 0 são colocados na parte inferior dos eixos y ou r, ou à esquerda dos eixos x ou t.

Os rótulos com uma posição especificada de 100 são colocados na parte superior do eixo y ou r ou à direita do eixo x ou t.

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75

Este exemplo demonstra a exibição dos valores de rótulo padrão, mas somente em locais especificados.

chxp=1,10,35,75: o eixo y mostra apenas três rótulos: 10, 35 e 75. Como nenhum texto de rótulo personalizado é especificado, esses valores de eixo são exibidos. Observe que não é necessário espaçar as etiquetas de maneira uniforme ao usar chxp. Se chxp não tivesse sido especificado aqui, a distância padrão do valor do rótulo no eixo y seria a cada 20 unidades, conforme mostrado no segundo gráfico.

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75

Gráfico de linhas com posições padrão nos eixos.
chxt=x,y
chxp não especificado

Voltar ao início

Estilos de rótulo de eixo chxs

Você pode especificar o tamanho, a cor e o alinhamento da fonte para rótulos de eixos, tanto personalizados quanto padrão. Todos os rótulos no mesmo eixo têm o mesmo formato. Se você tiver várias cópias de um eixo, é possível 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 marcação pelos valores, enquanto os eixos esquerdo e direito o exibem.

Sintaxe

Os valores de 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 do processo. Esse índice é baseado no zero do parâmetro chxt.
<opt_format_string>
[Opcional] Essa é uma string de formato opcional que, se usada, vem imediatamente após o número de índice do eixo sem uma vírgula intermediária. Ela 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>
Este é o significado de cada elemento:
  • <preceding_text>: texto literal para preceder cada valor.
  • *...*: um bloco opcional envolvido por asteriscos literais, em que você pode especificar detalhes de formatação para números. Os seguintes valores são compatíveis e são opcionais:
    • <number_type>: o formato dos números para valores numéricos. Escolha uma das opções a seguir:
      • f: [padrão] formato de ponto flutuante. Também é possível 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á exibido como 43%).
      • e: formato de notação científica.
      • c<CUR>: formate o número na moeda especificada, com o marcador de moeda correspondente. Substitua <CUR> por um código de moeda de três letras. Exemplo: cEUR para euros. Você pode encontrar uma lista de códigos no site ISO (em inglês), embora nem todos os símbolos sejam compatíveis.
    • <decimal_places>: um número inteiro que especifica quantas casas decimais serão exibidas. O valor é arredondado (não truncado) para esse tamanho. O padrão é 2.
    • z: exibe zeros à direita. O padrão é "não".
    • s: mostra separadores de grupo. O padrão é "não".
    • x ou y: exibe os dados da coordenada x ou y, conforme especificado. O significado de dados x varia de acordo com o tipo de gráfico. Teste o gráfico para determinar o que isso significa. O padrão é "y".
  • <following_text>: texto literal para seguir 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 de rótulos. Para eixos superior ou inferior, isso descreve como o rótulo se alinha à marca de marcação acima ou abaixo dele. Para eixos esquerdo ou direito, descreve como o alinhamento é alinhado dentro da caixa delimitadora, que toca no eixo. Especifique um dos seguintes números:
  • -1Superior ou inferior: os rótulos ficam à direita das marcas de marcação. Esquerda ou direita: os rótulos são alinhados à esquerda na área deles. Padrão para rótulos do eixo r.
  • 0Superior ou inferior: os rótulos são centralizados nas marcações. Para a esquerda ou para a direita: os rótulos são centralizados na área. Padrão para rótulos de eixo x e t.
  • 1: superior ou inferior: os rótulos ficam à esquerda das marcas de marcação. Esquerda ou direita: os rótulos estão alinhados à direita na área deles. Padrão para rótulos do eixo y.
<opt_axis_or_tick>
[Opcional, sem suporte no Google-o-meter] Indica se as marcas de marcação e/ou linhas de eixo para este eixo precisam ser exibidas. Marcas de marcação e linhas de eixos estão disponíveis somente para eixos mais internos. Por exemplo, não recebem suporte para o exterior de dois eixos X. Use um dos seguintes valores:
  • l (letras minúsculas 'L') - desenha apenas a linha do eixo.
  • t: desenha apenas marcas de marcação. Marcas de marcação são as linhas pequenas ao lado das etiquetas de eixo.
  • lt: [padrão] desenha uma linha de eixo e marcas de marcação para todos os rótulos.
  • _: (sublinhado) não marque linhas de eixo nem marcas de marcação. Se quiser ocultar uma linha de eixo, use este valor.
<cor_da_marcação>
[Opcional; não compatível com Google-o-meter] A cor da marca de marcação, no formato hexadecimal RRGGBB. O padrão é cinza.
<opt_axis_color>
[Opcional] A cor desta linha de eixo, no formato hexadecimal RRGGBB. O padrão é cinza.

 

Exemplos

Descrição Exemplo

O tamanho e a cor da fonte são especificados para o segundo eixo x (jan, fev, mar).

Gráfico de linhas com rótulos mín, média e máx à esquerda, 0, 1, 2, 3 e 4 à direita, 0 a 100 ao longo do eixo x, e Jan, Fev e Mar em azul, embaixo

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.

Gráfico de linhas com 0 a 100 no eixo x, Jan, Fev e Mar na parte inferior, 0 a 4 no eixo y e marcas de escala vermelhas com texto em azul para os rótulos mín, média e máx, à direita.

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 eixo, um por série. Cada conjunto de rótulos é formatado com 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 final dos especificadores de formato.
    • 000000 significa texto 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 final dos especificadores de formato.
    • Mil é uma literal de string seguinte
    • 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 grupo (na localidade em inglês americano, que é uma vírgula a cada três zeros).
    • z2 significa mostrar dois zeros à direita
    • 0000FF significa texto azul.

Os intervalos de rótulos do eixo são definidos usando o parâmetro chxr (axis_index, start, end e step). Se não definido, o padrão seria 0 a 100.


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 de marca de marcação dos eixos chxtc

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

Os valores de vários eixos precisam ser separados usando uma barra vertical (|). Os valores dentro de 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 do processo. Esse é um índice baseado em zero para o parâmetro chxt. Separe os valores para eixos diferentes usando um delimitador de barra.
<length_1_>,...,<length_n>
Tamanho das marcações do eixo, em pixels. Se um único valor for fornecido, ele será aplicado a todos os valores. Se mais de um valor for fornecido, as marcações do eixo vão percorrer a lista de valores desse 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. Os valores negativos são desenhados dentro da área do gráfico e cortados pelas bordas da área do gráfico.

 

Exemplos

Descrição Exemplo

Exemplo de como usar chxtc para criar marcas de seleção longas. 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 eixos x externos.
  • chxp=2,10,35,95: posições dos rótulos personalizadas ao longo do eixo r (index=2) para os três rótulos.
  • chxs=2,0000dd,13,-1,t,FF0000: estilos de rótulo do eixo para o eixo r: cor do texto, tamanho do texto, alinhado à esquerda, com marcas de marcação vermelhas.
  • chxtc=1,10|2,-180: comprimento das marcações do eixo para os eixos y e r. O primeiro valor especifica marcações de 10 pixels de comprimento fora do eixo. O segundo valor especifica marcas de 180 pixels de comprimento dentro do eixo. O número negativo significa que a marcação fica dentro do eixo e é cortada para caber no gráfico.

Gráfico de linhas com 0 a 100 ao longo do eixo x; Jan, Fev e Mar na parte inferior; 0 a 4 no eixo y, e marcas de escala longas e vermelhas com texto em azul para mín, média e máx, à direita.

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 tamanho de marcação para o eixo y (5 e 15), e as marcações desenhadas no gráfico alternam entre os dois valores.
chxt=x,y
chxtc=
  1,5,15

Voltar ao início

Preenchimento em segundo plano chf [Todos os gráficos]

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

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

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 a todo o gráfico. É possível especificar vários preenchimentos usando a barra vertical (|). (Maps: somente plano de fundo).

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 segundo plano
  • c: preenchimento da área do gráfico. Não são compatíveis com gráficos de mapa.
  • a: deixe todo o gráfico (inclusive o plano de fundo) transparente. Os seis primeiros dígitos de <color> são ignorados, e apenas os dois últimos (o valor de transparência) são aplicados a todo o gráfico e a todos os preenchimentos.
  • b<index>: preenchimento sólido de barra (somente gráficos de barras). Substitua <index> pelo índice da série de barras para preencher com uma cor sólida. O efeito é semelhante à especificação de chco em um gráfico de barras. Consulte Cores da série de gráficos de barras para um exemplo.
s
Indica um preenchimento sólido ou de transparência.
<cor>
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

Este exemplo preenche o plano de fundo do gráfico com cinza claro (EFEFEF).

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

chf=bg,s,EFEFEF

Este exemplo preenche o plano de fundo do gráfico com cinza claro (EFEFEF) e preenche a área do gráfico em preto (000000).

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

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

Este exemplo aplica uma transparência de 50% a todo o gráfico. O valor 80 em hexadecimal é 128 ou cerca de 50% de transparência. Observe o plano de fundo da célula da tabela mostrado no gráfico.

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

chf=a,s,00000080

Voltar ao início

Preenchimentos de gradiente chf [Linha, Barra, Google oômetro, Radar, Dispersão,Veneno]

Você pode aplicar um ou mais preenchimentos gradientes à área do gráfico ou plano de fundo. Os preenchimentos de gradiente são esmaecimentos de uma cor para outra. Gráficos Google de medidor de distância (somente plano de fundo).

Cada preenchimento de gradiente especifica um ângulo. Em seguida, duas ou mais cores são fixadas em um local especificado. A cor varia conforme ela se move de uma âncora para outra. Você precisa ter pelo menos duas cores com valores diferentes de <color_centerpoint> para que uma possa esmaecer na outra. Cada gradiente adicional é especificado por um par de <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. Pode ser umas destas opções:
  • bg: preenchimento do segundo plano
  • c: preenchimento da área do gráfico.
  • b<index>: preenchimento de gradiente de barra (somente gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchido com um gradiente. Consulte Cores da série de gráficos de barras para um exemplo.
lg
Especifica um preenchimento de gradiente.
<ângulo>
Um número que especifica o ângulo do gradiente de 0 (horizontal) a 90 (vertical).
<cor>
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 deste ponto conforme se aproximar de outra âncora. O intervalo é 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).

Gráfico de linhas em cinza escuro com plano de fundo em cinza claro e área do gráfico em gradiente linear de branco a azul, da esquerda para a direita

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 à parte superior direita), especificado com um ângulo de 45 graus (45).

Pêssego (FFE7C6) é a primeira cor especificada. O canto inferior esquerdo do gráfico é de pêssego puro.

Azul (6A4FB) é a segunda cor especificada. O canto superior direito do gráfico é o azul-puro. Observe como especificamos um deslocamento de 0, 75 para fornecer um pico de azul que esmaece no canto superior direito.

O plano de fundo do gráfico é desenhado em cinza (EFEFEF).

Gráfico de linhas em cinza escuro com plano de fundo em cinza claro e área do gráfico em gradiente linear diagonal de branco a azul, da parte inferior esquerda para a parte superior direita

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 é azul-puro.

Pêssego (FFE7C6) é a segunda cor especificada. A parte inferior do gráfico está em um pêssego puro.

O plano de fundo do gráfico é desenhado em cinza (EFEFEF).

Gráfico de linhas em cinza escuro com plano de fundo em cinza claro e área do gráfico em gradiente linear vertical de branco a azul, de baixo para cima

chf=
  c,lg,90,
  FFE7C6,0,
(pêssego)
  76A4FB,0.5
(azul)

Voltar ao início

 

Listrado preenche chf [Line, Bar, Google-o-meter, Radar, Scatter, Venn]

Você pode especificar um preenchimento listrado para a área do gráfico ou para o gráfico inteiro Gráficos de medidor do Google, 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. Pode ser umas destas opções:
  • bg: preenchimento do segundo plano
  • c: preenchimento da área do gráfico
  • b<index>: preenchimento listrado de barras (somente gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchido com listras. Consulte Cores da série de gráficos de barras para ver um exemplo.
ls
Especifica o preenchimento de listra linear.
<ângulo>
O ângulo de todas as listras em relação ao eixo y. Use 0 para listras verticais ou 90 para listras horizontais.
<cor>
É a cor da faixa, no formato hexadecimal RRGGBB. Repita <color> e <width> para cada outra faixa. Você precisa ter pelo menos duas listras. As listras ficam alternativas até que o gráfico seja preenchido.
<largura>
A largura dessa faixa, 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> para cada outra faixa. Você precisa ter pelo menos duas listras. As listras ficam alternativas até que o gráfico seja preenchido.

 

Exemplos

Descrição Exemplo
  • bg,ls,0: preenchimento de listras em segundo plano com listras em um ângulo de grau zero ao eixo y (paralelo ao eixo y). As listras preenchem o plano de fundo do gráfico e a área do gráfico.
  • CCCCCC,0.15: a primeira faixa é cinza-escura, 15% da largura do gráfico.
  • FFFFFF,0.1: a segunda faixa é branca, 10% da largura do gráfico.
Gráfico de linha azul com listras cinzas e brancas se alternando da esquerda para a direita
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 do gráfico é omitido.
  • 999999,0.25: a primeira faixa é cinza-escura, 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.
Gráfico de linha azul com listras em cinza escuro, cinza claro, branco e cinza escuro se alternando de baixo para cima
chf=
  c,ls,90,
  999999,0.25,
  CCCCCC,0.25,
  FFFFFF,0.25

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 ver mais formas de criar linhas em todo o gráfico, consulte marcadores de forma (chm tipo h, H, v ou V), marcadores de intervalo (chm) e marcações de marcação de eixo (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 no gráfico. Portanto, 20,25 significa cinco linhas de grade verticais e quatro 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> para 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 compensar as linhas de grade de 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

Nestes exemplos, usamos 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.

Gráfico de linhas com cinco linhas de grade tracejadas verticais e duas horizontais, em cinza claro
chg=20,50
Gráfico de linhas com cinco linhas de grade tracejadas verticais e duas horizontais, em cinza claro
chg=20,50

Esse exemplo usa espaços maiores para exibir linhas de grade mais leves (1,5).

Gráfico de linhas com cinco linhas de grade tracejadas verticais e duas horizontais, em cinza bem claro
chg=20,50,1,5

Para exibir linhas de grade sólidas, especifique zero (0) para o parâmetro <opt_space_length>.

Este gráfico também especifica um deslocamento de 10 para o eixo x.

Gráfico de linhas com cinco linhas de grade contínuas verticais e duas horizontais, em cinza claro
chg=20,50,1,0,10

Este gráfico demonstra um deslocamento de eixo x de 10 e um deslocamento de eixo y de 20.

Gráfico de linhas com cinco linhas de grade contínuas verticais e duas horizontais, em cinza claro
chg=20,50,3,3,10,20

Voltar ao início

Estilos de linha chls [Linha, Radar]

É possível especificar a espessura da linha e o estilo sólido/traçado com o parâmetro chls. Esse parâmetro só pode ser usado para definir o estilo de linhas em gráficos de linhas ou de radar. Não é possível usá-lo para definir o estilo da linha em linhas de gráfico composto, a menos que o tipo base do gráfico composto seja um gráfico de linhas.

Sintaxe

Separe vários estilos de linha pelo caractere da barra vertical ( | ). O primeiro estilo se aplica à primeira linha, o segundo à próxima e assim por diante. Se você tiver menos estilos do que linhas, o estilo padrão será aplicado a todas as linhas não especificadas.

chls=
  <line_1_thickness>,<opt_dash_length>,<opt_space_length>
    |...|
  <line_n_thickness>,<opt_dash_length>,<opt_space_length>
<line_1_thickness>
Densidade da linha, em pixels.
<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. Para uma linha sólida, não especifique nenhum valor. Se você especificar apenas <opt_dash_length>, <opt_space_length> será definido como <opt_dash_length>. O padrão é 1,0 (uma linha sólida).

 

Exemplos

Descrição Exemplo

Aqui, a linha tracejada é especificada por 3,6,3, e a linha sólida mais grossa é especificada por 5.

Gráfico de linhas com uma linha contínua e uma linha tracejada
chls=3,6,3|5

Voltar ao início

Marcadores de ícone dinâmico chem [barra, linha, 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 pode ser omitido completamente no URL. Você pode incluir vários marcadores, incluindo várias strings de sintaxe delimitadas por um caractere |. Leia mais sobre í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 ícone dinâmico. Essa constante é quase igual ao parâmetro chst para ícones independentes. No entanto, quando a string do ícone independente começa com "d_", remova-o 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=<string_data_string>
Os dados necessários para esse tipo de marcador específico. Isso 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 (lembre-se de usar vírgulas em vez de marcadores de barra vertical para texto multilinha!). Na string de dados, também é necessário escapar os seguintes caracteres com uma marca @: pipeline ( | ) , em ( @ ) , igual a ( = ), vírgula ( , ), ponto e vírgula ( ; ). Exemplos: hello@,+world, 5@@10+cents+each.
ds=<qual_série>
[Opcional] O índice baseado em zero da série de dados a que esse marcador pertence. O valor padrão é 0.
dp=<qual_pontos>
[opcional] especifica quais pontos de dados são usados para desenhar marcadores. O valor padrão é 0 (primeiro ponto da série). Use um destes formatos:
  • n.d: em qual ponto de dados o marcador será desenhado, em que n.d é o índice baseado em zero da série. Se você especificar um valor não inteiro, a fração indica um ponto intermediário calculado. Por exemplo, 3,5 significa a metade do ponto 3 e para o ponto 4.
  • range,<start>,<end>,<step>: desenhe um marcador em cada ponto de dados de etapa em um intervalo de start a end, inclusive. Os valores inicial e final são índices 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 vírgulas intermediárias, mas não é necessário incluir vírgulas à direita vazias. Por exemplo: 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 no terceiro ponto e posteriormente; dp=range,3,,1.5 desenha os marcadores em cada 1,5 ponto de dados do quarto item até o último.
  • all: desenhe um marcador em cada elemento. É equivalente a range,0,end_index. Exemplo: dp=all
  • every,n: desenhe um marcador em cada no marcador. Exemplo: dp=every,2 desenha um marcador nos itens 0, 2 e 4.
py=<ordem_z>
[Opcional] A camada em que o marcador deve ser desenhado, em comparação com outros marcadores e todos os outros elementos do gráfico. Esse é um número de ponto flutuante de -1,0 a 1,0, inclusive, em que -1,0 é a parte inferior e 1,0 é 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 determinada pelo URL. O valor padrão é 0,0 (logo acima dos elementos do gráfico).
p=<x.y>
[Opcional] uma posição absoluta no gráfico para desenhar o marcador. 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] vários 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 na vertical e na horizontal sobre o ponto, o que significa que o ponto provavelmente não ficará alinhado com o marcador de dados. Um bom deslocamento para um alfinete vertical é of=0,22. Um bom deslocamento para um alfinete inclinado é of=-12,20 ou of=12,20, dependendo da direção da inclinação, mas pode ser necessário 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

Gráfico de linhas com marcador de ícone dinâmico.
chem=
  y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0


Mesmo marcador de ícone dinâmico como imagem independente.


chst=
  d_bubble_icon_text_small
chld=
  ski|bb|Wheeee!|FFFFFF|000000

Um marcador de ícone dinâmico será centralizado no ponto na horizontal e na vertical. Portanto, se você usar um ícone dinâmico com uma cauda, a cauda não estará no ponto do gráfico, e o centro do marcador estará. O primeiro gráfico centraliza a marca no ponto de dados 3, que realmente coloca a cauda um pouco à direita da marca na linha.

O segundo gráfico usa o valor of para mover a cauda do marcador sobre o ponto de dados desejado. Um bom deslocamento para um alfinete 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 por um caractere |.

Este exemplo mostra um intervalo e dois tipos de marcadores.

Observe como os alfinetes verticais estão deslocados a partir de 0,22, e o alfinete inclinado tem um deslocamento de 12,20 para fazer com que os pontos do alfinete se alinhem 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 caber no texto, recentralizando o 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 sem balão
Gráfico com balão
Gráfico sem balão

Veja as especificidades dos parâmetros s=<icon_string_constant>;d=<marker_data_string> para gráficos sem bolhas e incorporados por balões (os parâmetros abordados 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 (em inglês)
[Somente sem bolhas] Qual parte do gráfico incorporado sem bolhas é fixada no ponto de dados. Escolha uma das constantes de string de duas letras no diagrama a seguir:Strings de alinhamento
Gráfico data_data
Os dados do gráfico incorporado. Tudo isso 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 da ferramenta.
frame_type (em inglês)
[Somente balão] Uma das constantes de estilo de frame dos ícones dinâmicos.
padding
[Somente balão] Padding dentro do balão, em pixels.
frame_color [cor_do_frame]
[Somente balão] Cor do frame, como uma string de cores HTML de seis dígitos sem a marca #. Exemplo: FF00FF.
fill_color
[Somente para bolhas] Cor de preenchimento do balão, como uma string de cores HTML de seis dígitos sem a marca #. Exemplo: FF00FF.

Dados do gráfico incorporado

Use a seguinte ferramenta de conversão para ajudar a gerar a string do gráfico ou gere a string do gráfico manualmente seguindo as regras da ferramenta.

Regras para a conversão manual

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

Substitua por
%7C ou %7c
|
@
@@
%
%25
,
@,
|
@|
;
@
e
%26
=
%3D

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

Voltar ao início

Linhas preenchidas chm [Line, Radar]

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

É possível combinar preenchimentos de linha com qualquer outro parâmetro 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_ou_B>
Para preencher a parte inferior do gráfico ou apenas 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 queira preencher.
  • b - preencher entre duas linhas de um gráfico com várias linhas. As linhas inicial e final são indicadas por <start_line_index> e <end_line_index>.
<cor>
É 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 de dados tem um índice de 1 e assim por diante.
<end_line_index>
  • Tipo de preenchimento "b": a linha em que o preenchimento será interrompido. Essa linha precisa estar abaixo da linha atual.
  • Tipo de preenchimento "B": uma das seguintes opções:
    • qualquer valor: qualquer número nesse parâmetro é ignorado, e o preenchimento irá da linha especificada para a base do gráfico
    • start:end: para preencher uma fatia vertical abaixo do gráfico, especifique start:end, em que são os índices de ponto de dados que descrevem onde começar e interromper o preenchimento. Os dois valores são opcionais e assumem first_point:last_point como padrão. (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.

Linha única em um gráfico com sombreamento em azul da base do gráfico até a linha
chm=B,76A4FB,0,0,0

Veja um gráfico com duas linhas e dois preenchimentos. O preenchimento da área abaixo da linha inferior e acima da linha superior requer uma técnica especial, abordada a seguir.

Três linhas em um gráfico; não há sombreamento no gráfico da base até a primeira linha, preenchimento vermelho desta até a segunda linha, azul escuro da segunda à terceira linha e não há sombreamento da terceira linha até o topo do gráfico. As linhas são desenhadas em amarelo, por padrão
chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0| (azul)
b,FF0000,1,2,0| (vermelho)

Em um gráfico de várias linhas, para preencher do topo do gráfico até a primeira linha, inclua uma série que contenha 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 tenha 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 linhas são desenhadas em preto e usando chco.

Três linhas em um gráfico; sombreamento em verde da base do gráfico até a primeira linha, em vermelho da primeira à segunda linha, azul escuro da segunda à terceira linha e azul claro da terceira linha até o topo do gráfico
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 na linha 0, vinculado pelos pontos de dados 0–3.
  • B,990000,0,7:10,0: preenchimento vertical em vermelho na linha 0, vinculado pelos pontos de dados de 7 a 10.
  • B,DEDC06,0,12:,0: preenchimento vertical amarelo na linha 0, do ponto de dados 12 até o final 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.

Gráfico de radar
chm=
  B,FF000080,0,1.0,5.0|
  B,FF990080,1,1.0,5.0

Voltar ao início

Marcadores de forma chm [barra, linha, radar, dispersão]

É possível 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 aparecerão no parâmetro chm. Também é possível criar marcadores de texto em pontos de dados. Isso é abordado em Marcadores de pontos de dados.

É possível combinar marcadores de forma com outros parâmetros chm usando um caractere de barra vertical ( |) para separar os parâmetros chm.

Sintaxe

Especifique um conjunto dos seguintes parâmetros para cada série que precisa 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, ele não receberá nenhum marcador.

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ê preceder o tipo de marcador com o caractere @ opcional, <opt_who_points> precisará usar o formato x:y.
<marcador_tipo>
O tipo de marcador a ser usado. Especifique um dos seguintes tipos:
  • a: seta
  • c - Cruz
  • C: retângulo. Se 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 - Diamante
  • E: marcador da barra de erros ( ) para criar 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 no gráfico com altura específica. O único formato válido para o parâmetro <opt_what_points> é n.d.
  • H: linha horizontal pelo marcador de dados especificado. Isso é compatível com uma sintaxe estendida de <size>, que permite especificar o comprimento exato de uma linha: 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 de dados
  • V: linha vertical com comprimento ajustável. Isso é compatível com uma sintaxe estendida de valor de <size>, que permite especificar o comprimento de uma linha exata: line_thickness[:length], em que :length é opcional e o padrão é a altura total da área do gráfico. O marcador é centralizado no ponto de dados.
  • x: um X
<cor>
É a cor dos marcadores desta série, no formato hexadecimal RRGGBB.
<série_de_índice>
O índice baseado em zero da série de dados em que os marcadores serão desenhados. Ignorado para marcadores h e que especificam o local por posição x/y (começa com o caractere @). Você pode usar as séries de dados ocultas como uma fonte para os 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_what_points>
[Opcional] Em quais pontos os marcadores serão desenhados. O padrão é todos os marcadores. Use um dos seguintes valores:
  • n.d: onde desenhar o marcador. O significado depende do tipo de marcador:
    • Todos os tipos, exceto h: em qual ponto de dados o marcador será desenhado, em que n.d é o índice baseado em zero da série. Se você especificar um valor não inteiro, a fração vai indicar um ponto intermediário calculado. Por exemplo, 3,5 significa a metade entre os pontos 3 e 4.
    • h: um número de 0,0 a 1,0, em que 0,0 é a parte inferior do gráfico e 1,0 é a parte superior do gráfico.
  • -1: desenhe um marcador em todos os pontos de dados. Também é possível deixar esse parâmetro vazio para desenhar em todos os pontos de dados.
  • -n: desenhe um marcador em cada no ponto de dados. Valor de ponto flutuante. Se n for menor que 1, o gráfico calculará mais pontos intermediários para você. Por exemplo, -0,5 colocará o dobro de marcadores como pontos de dados.
  • start:end:n: desenhe 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 não estar presentes). Portanto, 3::1 seria do quarto elemento para o último, passo 1. A omissão desse parâmetro seria o padrão como first:last:1. Todos os valores podem ser números de pontos flutuantes. start e end podem ser negativos, para contar de volta do último valor. Se start e end forem negativos, verifique se estão listados em valor crescente (por exemplo, -6:-1:1). Se o valor de etapa n for menor que 1, ele calculará mais pontos de dados interpolando os valores de dados fornecidos. Os valores padrão são "first:last:1"
  • x:y: desenhe um marcador em um ponto x/y específico 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 do gráfico e 1:1 é o canto superior direito do gráfico. 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.
<tamanho>
o tamanho do marcador, em pixels. A maioria deles 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 marcador.
<opt_z_order>
[Opcional] A camada em que o marcador deve ser desenhado, em comparação com outros marcadores e todos os outros elementos do gráfico. Esse é um número de ponto flutuante de -1,0 a 1,0, inclusive, em que -1,0 é a parte inferior e 1,0 é o topo. Os elementos do gráfico (linhas e barras) são menores que zero. Se dois marcadores tiverem o mesmo valor, eles serão desenhados na ordem determinada 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, é possível incluir um valor ,, vazio na string de parâmetro chm de <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
  • reserved: deixe em branco.
  • <horizontal_offset>: um número positivo ou negativo que especifica o deslocamento horizontal, em pixels. Opcional. Deixe em branco se não for usado.
  • <vertical_offset>: um número positivo ou negativo que especifica o deslocamento vertical em pixels. Opcional. Deixe em branco se não for usado.

 

Exemplos

Descrição Exemplo

Veja um exemplo de vários marcadores de forma e linha.

  • a,990066,0,0.0,9.0: seta roxa, primeira série, primeiro ponto, tamanho 9.
  • c,FF0000,0,1.0,20.0: vermelho, 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 de baixo para cima do gráfico, primeira série, oitavo ponto, um pixel de largura.
  • x,FFCC33,0,8.0,20.0: amarelo 'X', primeira série, nono ponto, tamanho 20.
  • H,FFFF00,0,9,2: linha amarela horizontal com a largura do gráfico no ponto de dados 9.
  • h,FF0000,0,0.5,1: linha horizontal vermelha na altura designada, primeira série, na metade do gráfico, com um pixel de largura.
Gráfico de linhas com marcadores
chm=
  a,990066,0,0.0,9.0|
  c,FF0000,0,1.0,20|
  d,80C65A,0,2.0,20.0|
  H,000000,0,3,1:40|
  o,FF9900,0,4.0,12.0|
  s,3399CC,0,5.0,11.0|
  v,BBCCED,0,6,1.0|
  V,3399CC,0,7,1.0|
  x,FFCC33,0,8,20|
  H,FFFF00,0,9,2|
  h,FF0000,0,0.5,1

Veja 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 é desenhado primeiro. O losango é especificado e desenhado em segundo, o que faz com que ele seja desenhado sobre o círculo.

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

Veja um gráfico de linhas com um marcador a cada segundo ponto de dados (-2 significa cada outro ponto).

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

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

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

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

  • E,000000,0,6,1:20: barra de erro preta com linhas de 1 pixel de largura, barras superior e inferior de 20 pixels. A parte inferior está ancorada no ponto 8 da série 0, 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 de pixels, centralizada no ponto de dados 2.
  • V,3399CC,0,8,3:50- Linha vertical azul: 3 pixels de largura, 50 pixels de comprimento, centralizada no ponto de dados 8.

chm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

Voltar ao início

Marcadores de texto e valores de dados chm [barra, linha, radar, dispersão]

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

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

Observação sobre valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Para ser seguro, codifique o URL de todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Você pode encontrar um codificador de URL na documentação de visualização do Google.

Sintaxe

Especifique um conjunto dos seguintes parâmetros para cada série que precisa 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á 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>
<marcador_tipo>
O tipo de marcador a ser usado. Você pode escolher entre os seguintes tipos:
  • f<text>: uma sinalização que contém texto. Especifique o caractere "f" seguido de texto personalizado codificado pelo URL. Para escapar vírgulas em marcadores de texto, preceda a vírgula com \. Exemplo: fHello\,+World!
  • t<text>: um marcador de texto simples. Especifique o caractere "t" seguido por um texto personalizado codificado pelo URL. Para escapar vírgulas em marcadores de texto, preceda a vírgula com \. Exemplo: tHello\,+World!
  • A<text>: um marcador de anotação. Isso é semelhante a um marcador de sinalização, mas os marcadores coordenam a posição deles para que não se sobreponham. O único formato válido para <opt_what_points> é n.d, para indicar o índice de um ponto na série.
  • N<formatting_string>: o valor dos dados neste momento, 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 especificado. Veja um exemplo de chds com marcadores numéricos abaixo. Com esse tipo de marcador em um gráfico de barras empilhadas, se você especificar -1 para <série_index>, receberá um marcador que mostra a soma de todos os valores nessa barra empilhada. A sintaxe da string de formatação é a seguinte:
       <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>.
    Todos esses elementos são opcionais. Veja o significado de cada elemento:
    • <preceding_text>: texto para preceder cada valor.
    • *...*: um bloco opcional envolvido por asteriscos literais, em que você pode especificar detalhes de formatação para números. Os seguintes valores são compatíveis e são opcionais:
      • <number_type>: o formato do número para valores numéricos. Escolha uma das opções a seguir:
        • f: [padrão] formato de ponto flutuante. Também é possível 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á exibido como 43%).
        • e: formato de notação científica.
        • c<CUR>: formate o número na moeda especificada, com o marcador de moeda correspondente. Substitua <CUR> por um código de moeda de três letras. Exemplo: cEUR para euros. Você pode encontrar uma lista de códigos no site ISO, embora nem todos os símbolos sejam compatíveis.
      • <decimal_places>: um número inteiro que especifica quantas casas decimais serão exibidas. O valor é arredondado (não truncado) para esse tamanho. O padrão é 2.
      • z: exibe zeros à direita. O padrão é não.
      • s: mostra separadores de grupo. O padrão é "não".
      • x ou y: exibe os dados da coordenada x ou y, conforme especificado. O significado de dados x varia de acordo com o tipo de gráfico. Teste o gráfico para determinar o que isso significa. O padrão é "y".
    • <following_text>: texto para seguir cada valor.
<cor>
É a cor dos marcadores desse conjunto, no formato hexadecimal RRGGBB.
<série_de_índice>
O índice baseado em zero da série de dados em que os marcadores serão desenhados. Se ele 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_what_points>
[Opcional] Em quais pontos os marcadores serão desenhados. 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 baseado em zero da série. Se você especificar um valor não inteiro, a fração vai indicar um ponto intermediário calculado. Por exemplo, 3,5 significa a metade entre os pontos 3 e 4.
  • -1: desenhe um marcador em todos os pontos de dados. Também é possível deixar esse parâmetro vazio para desenhar em todos os pontos de dados.
  • -n: desenhe um marcador em cada no ponto de dados.
  • start:end:n: desenhe um marcador em cada n-o ponto de dados em um intervalo, dos 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, passo 1, e omitir esse parâmetro por padrão seria first:last:1. Todos os valores podem ser números de pontos flutuantes. start e end podem ser negativos, para contar de volta do último valor. Se start e end forem negativos, eles precisarão ser listados em valor crescente (por exemplo, -6:-1:1). Se o valor da etapa n for menor que 1, ele calculará mais pontos de dados interpolando os valores de dados fornecidos. Os valores padrão são first:last:1
  • x:y: [incompatível para marcadores do tipo N]. 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 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 do gráfico, 0.5:0.5 é o centro do gráfico e 1:1 é o canto superior direito do gráfico. 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.
<tamanho>
O tamanho do marcador em pixels. Se este for um gráfico de dispersão com uma terceira série de dados (usada para especificar o tamanho dos pontos), esse valor será dimensionado pelo intervalo de dados. Assim, se o intervalo de dados for de 0 a 100 e <size> for 30, um valor de dados de 100 seria de 30 pixels de largura, um valor de dados de 50 seria de 15 pixels de largura e assim por diante.
<opt_z_order>
[Opcional] A camada em que o marcador deve ser desenhado, em comparação com outros marcadores e todos os outros elementos do gráfico. Esse é um número de ponto flutuante de -1,0 a 1,0, inclusive, em que -1,0 é a parte inferior e 1,0 é o topo. Os elementos do gráfico (linhas e barras) são menores que zero. Se dois marcadores tiverem o mesmo valor, eles serão desenhados na ordem determinada pelo URL. O valor padrão é 0,0 (logo acima dos elementos do gráfico).
<opt_placement>
[Opcional] Mais detalhes do posicionamento que descrevem onde colocar esse marcador, em relação ao ponto de dados. É possível especificar posicionamento relativo horizontal e/ou vertical, bem como deslocamentos. A sintaxe de posicionamento é uma string com delimitadores :, conforme mostrado aqui. Todos os elementos são opcionais: <horizontal_and_vertical_justification>:<horizontal_offset>:<vertical_offset>. Se especificado, é possível incluir um valor ,, vazio na string de parâmetro chm para <opt_z_order>. Exemplos: N,000000,0,1,10,,b e N,000000,0,1,10,,lv e N,000000,0,1,10,,r::10.
horizontal_and_vertical_justification
O ponto de fixação do marcador. Esse comportamento é oposto à justificativa. Portanto, uma âncora esquerda coloca o marcador à direita do ponto de dados. É possível escolher um justificador horizontal e/ou vertical na lista a seguir:
  • Posicionamento horizontal: "l", "h" ou "r": horizontal, centralizado ou fixo à direita e horizontalmente. O padrão é "l".
  • Posição vertical: "b", "v", "t": âncora inferior, intermediária ou superior na vertical. O padrão é "b".
  • Posição relativa à barra [Somente gráficos de barras]: 's', 'c', 'e' - base, central ou superior de uma barra. Para gráficos empilhados, isso se refere à seção da barra para cada série, e não à barra inteira. Se o índice da série fornecido for -1 (total da pilha), ele estará relacionado à barra inteira. A combinação pode ser feita com valores de posicionamento verticais: por exemplo, "be" ou "vs". O valor padrão é "e".
horizontal_offset
Um deslocamento horizontal para este marcador, em pixels. O padrão é 0.
vertical_offset
Um deslocamento vertical do marcador em pixels. Padrão de gráfico sem barras: 15; padrão de gráfico de barras: 2.

Descrição Exemplo

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

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

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

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


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


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

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

Este exemplo mostra um gráfico com valores codificados simples de 46, 39, 29, 30, 43, 41. O intervalo de codificação simples é de 0 a 61. O parâmetro chds define uma escala de marcador personalizada de 0 a 1, portanto, os valores do marcador são dimensionados para esse intervalo, mas as alturas das barras não são afetadas. Se isso fosse 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 uma etiqueta de texto no ponto mínimo e um rótulo de sinalização no ponto máximo.

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

Este exemplo mostra um gráfico empilhado com valores para série individual, além do total da série. Para mostrar os valores da série empilhada, precisamos usar a opção de posicionamento "c". Caso contrário, o valor da barra superior precisa sobrepor o valor da soma na parte superior de cada barra.
chm=
  N,FF0000,-1,,12|
  N,000000,0,,12,,c|
  N,000000,1,,12,,c|
  N,ffffff,2,,12,,c
Mais algumas demonstrações de como o posicionamento vertical e horizontal funcionam. Este exemplo demonstra várias combinações de valores de âncora para gráficos de barras (que usam s, c e e para posicionamento vertical). Observe como uma âncora direita move um marcador para a esquerda, uma âncora superior move um marcador para baixo e vice-versa. Os pontos em vermelho mostram a base, centro e topo de cada barra. O número é o valor de dados, fixo por 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 eles não se sobreponham. O primeiro valor de chm é para o preenchimento de linha, e os valores a seguir são marcadores de anotação. Marcador 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 [barra, vela, linha, 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.

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

Sintaxe

Especifique um conjunto de parâmetros a seguir para cada faixa ser desenhada. Para desenhar várias bandas, crie conjuntos de parâmetros adicionais, delimitados por um caractere de barra vertical. Os intervalos são desenhados na ordem especificada. Portanto, o último intervalo será desenhado sobre os intervalos anteriores.

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>
<direção>
Especifica o sombreamento horizontal ou vertical. Use r para um intervalo horizontal e R para um intervalo vertical.
<cor>
A cor do intervalo como um número hexadecimal no formato RRGGBB.
0
Reservado: precisa ser zero.
<ponto_de_início>
A posição inicial do intervalo.
  • Para marcadores de intervalo horizontal, é uma posição no eixo y, em que 0.00 é a parte inferior do gráfico e 1.00 é a parte superior do gráfico.
  • Para marcadores de intervalo vertical, esta é uma posição no eixo x, em que 0.00 é a esquerda do gráfico, e 1.00 é a direita do gráfico.
<end_point>
A posição final do intervalo.
  • Para marcadores de intervalo horizontal, é uma posição no eixo y, em que 0.00 é a parte inferior do gráfico e 1.00 é a parte superior do gráfico.
  • Para marcadores de intervalo vertical, esta é uma posição no eixo x, em que 0.00 é a esquerda do gráfico, e 1.00 é a direita do gráfico.

 

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 em preto (reservado) começa em 0,1 ao longo do eixo y e termina em 0,11 a partir do eixo y (uma linha preta fina).
Gráfico de linhas com faixa horizontal em azul claro que se estende de 25% a 75% acima do eixo y e uma linha horizontal fina 10% acima do eixo y
chm=
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

Este exemplo mostra marcadores de intervalo verticais. O primeiro é uma linha vermelha (FF0000), e o segundo é uma faixa azul-clara (A0BAE9).

Gráfico de linhas com faixa vertical em azul claro que se estende de 25% a 75% do eixo x e uma linha vertical fina no ponto 10% do eixo x
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 ver que o marcador vermelho vertical foi desenhado antes do marcador horizontal azul-claro.

Gráfico de linhas com faixa vertical azul e faixa horizontal em azul mais claro que se estende de 25% a 75% dos eixos x e y, respectivamente. Linha vertical fina em vermelho e linha horizontal fina em preto a 10% do eixo x e y, respectivamente
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 fracas em todo o gráfico na linha zero, na linha média e na parte superior.

Gráfico sparkline com linha em amarelo e três linhas horizontais igualmente espaçadas
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 variação e mudança de direção em uma série de dados. Muitas vezes, elas são usadas para mostrar valores de ações durante um dia. O marcador inclui segmentos que mostram os valores alto e baixo, além dos valores de abertura e fechamento para um período específico (geralmente 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. Requer que 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, respectivamente, a parte inferior e a parte superior da linha vertical. Normalmente, eles representam os valores baixos e altos do dia.
  • As linhas 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 diminui 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 superior ou inferior do retângulo, dependendo se o preço subiu ou não.

É possível combinar marcadores de vela com outros parâmetros 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 no formato de texto. Consulte Gráficos compostos para saber mais.

Veja um exemplo com 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 esse é um marcador de vela.
<opt_decadding_color>
[Opcional] Cor de preenchimento dos retângulos quando o valor está diminuindo (quando o valor da série 2 > valor da série 3 correspondente). Este é um número hexadecimal no formato RRGGBB. Quando os valores aumentam, o retângulo fica vazio. O padrão é verde verde para aumentar e vermelho para reduzir. Não é possível especificar uma cor de preenchimento personalizada para aumentar os valores.
<data_série_index>
O índice da série de dados a ser usada como a primeira série para os marcadores de vela. Esse índice começa no zero. Portanto, se você especificar 1 aqui e tiver seis séries, a segunda, a terceira, a quarta e a quinta vão ser usadas para desenhar marcadores de vela.
<opt_what_points>
[opcional] especifica quais pontos de dados são usados para desenhar marcadores. O padrão é todos os marcadores. Use um destes formatos:
  • n.d: desenhe um marcador em um único ponto da série, em que n.d é o índice do ponto na série. Se você especificar um valor não inteiro, a fração vai indicar um ponto intermediário calculado. Por exemplo, 3,5 significa a metade entre os pontos 3 e 4.
  • -1: desenhe um marcador em todos os pontos de dados. Também é possível deixar esse parâmetro vazio para desenhar em todos os marcadores.
  • -n: desenhe um marcador em cada no ponto de dados.
  • start:end:n: desenhe 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 não estar presentes). Portanto, 3::1 seria do quarto elemento para o último, passo 1. A omissão desse parâmetro seria o padrão como first:last:1. Todos os valores podem ser números de pontos flutuantes. start e end podem ser negativos, para contar de volta do último valor. Se start e end forem negativos, eles precisarão ser listados em valor crescente (por exemplo, -6:-1:1). Se o valor da etapa n for menor que 1, ele calculará mais pontos de dados interpolando os 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 deve ser desenhado, em comparação com outros marcadores e todos os outros elementos do gráfico. Esse é um número de ponto flutuante de -1,0 a 1,0, inclusive, em que -1,0 é a parte inferior e 1,0 é o topo. Os elementos do gráfico (linhas e barras) são menores que zero. Se dois marcadores tiverem o mesmo valor, eles serão desenhados na ordem determinada pelo URL. O valor padrão é 0,0 (logo acima dos elementos do gráfico).

 

Exemplos

Descrição Exemplo

Veja um exemplo de marcadores de vela em um gráfico de linhas com quatro séries. A cor de preenchimento personalizada 0000FF (azul) é especificada, e 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 do 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 <what_point> está em branco, o que desenha velas em todos os pontos de dados.

Gráfico de linhas com quatro linhas laranja e quatro marcadores financeiros

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

Este é um gráfico composto: é uma combinação de um gráfico de linhas (o tipo de gráfico base) e de marcadores de vela. O valor de 1 em cht=t:1 significa que todas as séries de dados após a primeira precisam 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 da vela vêm das séries 2, 3, 4 e 5 (o 1 é baseado em zero). Consulte Gráficos compostos para ver mais informações sobre como desenhar um gráfico composto como este.

Gráfico de linhas com uma linha laranja e quatro marcadores financeiros.
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 [Barra, Vela, Linha, Radar, Dispersão]

É possível adicionar uma linha que rastreia dados no gráfico. Na maioria das vezes, ele é usado em gráficos compostos.

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

Sintaxe

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
Indica que esse é um marcador de linha.
<cor>
A cor da linha, no formato hexadecimal RRGGBB.
<série_de_índice>
O índice da série de dados usada para desenhar a linha. O índice da série de dados é 0 para a primeira série de dados, 1 para a segunda série de dados e assim por diante.
<qual_pontos>
Quais pontos de uma série usar para desenhar a linha. Use um dos seguintes valores:
  • 0: use todos os pontos da série.
  • start:end: use um intervalo específico de pontos na série, de start a end, 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 reverso do último valor. Se start e end forem negativos, escreva-os em valor crescente (por exemplo, -6:-1).
<tamanho>
A largura da linha em pixels.
<opt_z_order>
[Opcional] A camada em que o marcador deve ser desenhado, em comparação com outros marcadores e todos os outros elementos do gráfico. Esse é um número de ponto flutuante de -1,0 a 1,0, inclusive, em que -1,0 é a parte inferior e 1,0 é o topo. Os elementos do gráfico (linhas e barras) são menores que zero. Se dois marcadores tiverem o mesmo valor, eles serão desenhados na ordem determinada 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, portanto, a linha é desenhada sobre as barras.

Este exemplo usa os mesmos dados tanto para as barras como para a linha de dados.
Gráfico de barras com marcador de linha
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

Este é o mesmo gráfico de barras, mas com uma série de dados extra apenas para a linha. É um exemplo de gráfico composto. Os gráficos compostos são desenhados adicionando outras séries de dados ao parâmetro chd, além de um valor para chd, que diz ao gráfico para "ignorar" a série de dados adicional.

Consulte Gráficos compostos para mais informações.

Gráfico de barras com marcador de linha
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

Voltar ao início

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

É possível especificar uma função personalizada a ser executada nos dados do gráfico usando a sintaxe da função do muParser (em inglês). 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, parada e etapa para um intervalo de dados arbitrário.

É importante observar que, em todos os casos, é necessário atribuir a saída a uma série existente em chd. Essa série será substituída pela saída da função. O gráfico é renderizado apenas depois que todas as funções foram processadas. Portanto, se você atribuir várias funções para a saída à mesma série de dados, as funções serão executadas na ordem fornecida, mas apenas a saída da função final será plotada no gráfico. Encadeie funções para que uma função possa usar como entrada uma série que foi gerada 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 da série da função. Os marcadores são colocados 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_série_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.
<dados_da_função>
As variáveis e os dados a serem representados. Os dados podem ser de um intervalo que você define 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. Observe que, se você definir diversas variáveis para uma única função e elas tiverem um número diferente de pontos, a função será interrompida quando alcançar o primeiro endpoint. Por exemplo, se uma função definir x=1 a 5 etapas 1 e y=1 a 10 etapa 1, a função terminará quando chegar ao 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 essa função na função definida por function_string.
  • input_série_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 final numérico 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 além de uma variável chamada r com os valores 0, 0.1, 0.2, ..., 3.0, 3.1. x,0 declara uma variável chamada x que usa os dados da primeira série chd. Essas variáveis serão usadas por function_string. Elas não serão mostradas 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.
<string_da_função>
Sua função, escrita na sintaxe do muParser. A função é aplicada às variáveis e dados especificados em variable_data. Só é possível fazer referência às variáveis declaradas neste conjunto de funções local, não em outro conjunto canalizado 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. Algumas coisas a observar:

  • chd=t:-1: usamos uma variável fictícia para os dados do gráfico, porque nossos dados são declarados no parâmetro chfd.
  • chco=FF0000: vermelho é especificado para a primeira série. Embora não usemos os dados do chd, a cor correspondente dessa série será usada 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 por 0,1. É atribuído à primeira série, o que significa que ele terá 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.

 

Senoide especificada por chfd
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. Uma função que é executada nos dados chd.
chd=t:5,10
chfd=0,x,0,x*4

Uma mistura de linhas de função e não função.

Observe como 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.Portanto, se seu intervalo for de 0 a 11 etapas 0,1, o ponto 0 é 0, o ponto 1 é 0,1 e assim por diante, até o ponto 110, que tem um valor de 11.

Uma série que usa chfd, outra que usa chd para seus dados.
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: 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
Círculo
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

Com o parâmetro chfd, você pode expressar sua criatividade.

Tente clicar nessas imagens para abrir e brincar com elas no Playground de gráficos. Você vai adorar!



Voltar ao início