Este documento descreve como criar gráficos de pizza usando a API de gráficos do Google.
Sumário
Recursos específicos para gráficos
|
Recursos padrão
|
Visão geral
Os gráficos de setores são bons para mostrar informações simples de proporção entre a parte e o todo. É possível criar um gráfico de pizza de série única, em que cada série é composta por gráficos concêntricos de múltiplas fatias ou de várias séries.
Cada série descreve um círculo de setores e cada valor de dados especifica um setor. Ao usar gráficos de pizza aninhados (descritos abaixo), use várias séries.
Para exibir o texto associado a uma fatia, você precisa usar rótulos do gráfico de pizza ou uma legenda do gráfico. Os rótulos do gráfico de pizza são textos em torno do gráfico com linhas apontando para a fatia. As legendas são textos associados por cor.
Rótulos | Legenda | Rótulos e legenda |
---|---|---|
chl=January|February|March|April |
chdl=January|February|March|April |
chl=January|February|March|April |
Os valores são exibidos em relação um ao outro: um gráfico com valores 1,2,3 tem a mesma aparência de um gráfico com valores 100.200.300. No entanto, ao usar dados em formato de texto, os valores maiores que 100 são cortados para 100. Portanto, você precisará usar o formato de texto com dimensionamento personalizado para exibir fatias maiores que 100 corretamente (use o parâmetro chds
com valores mínimos/máximos de chds=0,<max-slice-size>
).
Os valores negativos são exibidos como setores vazios com o tamanho correspondente.
Tipos de gráficos
É possível criar três tipos gerais de gráficos de pizza: plano, concêntrico ou 3D. Especifique um gráfico de setores com a seguinte sintaxe:
Sintaxe
cht=<chart_type>
Em que <chart_type>
é um dos seguintes tipos:
Parâmetro | Descrição | Exemplo |
---|---|---|
|
Gráfico de setores em duas dimensões. Forneça somente uma série de dados; as séries de dados subsequentes serão ignoradas. Por padrão, as cores dos segmentos de pizza são interpoladas de laranja escuro para amarelo-claro. Especifique outras cores, conforme descrito em Cores de séries. Especifique rótulos com A API Google Chart calcula o raio do círculo com base no valor mínimo de largura e altura especificado no parâmetro de tamanho do gráfico ( |
|
|
Gráfico de setores em três dimensões. Especifique os dados e a formatação da mesma maneira que os gráficos de pizza bidimensionais acima. Se você estiver incluindo rótulos em um gráfico de pizza tridimensional, provavelmente será necessário especificar o tamanho da largura como 2,5 vezes o tamanho da altura, para garantir que os rótulos fiquem totalmente visíveis. |
|
|
Gráfico de setores concêntrico. Forneça duas ou mais séries de dados. |
|
Todos os tipos | Os números negativos nos dados geram setores "em branco". | cht=pc |
Cores da série chco
Você pode especificar as cores de todos os valores, de cada valor ou de alguns deles usando o parâmetro chco
.
Sintaxe
chco=<slice_1>|<slice_2>|<slice_n>,<series_color_1>,...,<series_color_n>
- <color>
- Cores da fração no formato hexadecimal RRGGBB. Especifique uma única cor para a série, e todas as fatias dessa série serão coloridas em gradações dessa cor, da mais escura (primeiro membro de dados) à mais clara (último membro de dados). Especifique duas ou mais cores, delimitadas por | para descrever cores de fatias individuais. Quando você tem várias séries (ou seja, um gráfico com anéis concêntricos), é possível especificar valores para séries diferentes separando os valores por vírgula. Quando menos cores de fatias/séries são fornecidas do que as fatias/séries exibidas, o gráfico percorre a partir do início da lista de fatias da série ou da lista de séries do gráfico. Não é possível especificar um gradiente diferente para cada série em um gráfico com várias séries.
Descrição | Exemplo |
---|---|
Especifique uma única cor para ter gradações da mais escura (primeiro corte) à mais clara (último setor). |
|
Definição de um gradiente; neste exemplo, de amarelo para vermelho. |
|
Definir cores de fatias individuais. Especifique uma cor por segmento. | chd=t:10,20,30 |
Este gráfico tem duas séries de dados, mas especifica a cor como um único gradiente em todas as fatias de amarelo a vermelho (BBBB00 - BB0000). | chco=BBBB00,BB0000 |
Veja um gráfico concêntrico que inclui as cores das séries e as cores dos setores individuais. O gráfico tem duas séries de dados concêntricas. Na forma legível para humanos, as cores são chco=green|red,blue|yellow. A vírgula divide isso em duas séries:
|
chd=s:eYY,ORVM |
Rótulos do gráfico de pizza chl
É possível especificar rótulos para fatias individuais do gráfico de pizza usando o parâmetro chl
.
Também é possível exibir uma legenda com o mesmo valor ou valores diferentes, uma entrada de legenda por fatia.
Observação sobre valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL
todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z
.
Encontre um codificador de URL aqui.
Sintaxe
chl= <label_value>| ... <label_value>
- <label_value>
- Um valor de string a ser aplicado a uma fração. Os rótulos são aplicados consecutivamente aos pontos de dados em
chd
. Se você tiver várias séries (para um gráfico de pizza concêntrico, por exemplo), os rótulos serão aplicados a todos os pontos em todas as sequências, na ordem especificada emchd
. Use um delimitador de barra vertical (|
) entre cada rótulo. Especifique um valor intermediário ausente usando dois caracteres de barra consecutivos sem espaço entre eles:||
. Não é necessário rotular todas as fatias.
Exemplos
Descrição | Exemplo |
---|---|
Rótulos para um gráfico de setores de três dimensões. |
|
Ao especificar o tamanho do gráfico com Geralmente, um gráfico de pizza bidimensional precisa ter aproximadamente o dobro da largura que é alto, e um gráfico de pizza tridimensional precisa ser aproximadamente duas vezes e meia mais largo do que alto para que os rótulos sejam exibidos corretamente. No primeiro exemplo, os rótulos são mostrados apenas parcialmente, porque o gráfico não tem largura suficiente. O segundo exemplo mostra que o gráfico precisa de uma largura de 280 pixels para exibir os rótulos completos. Bordas adicionadas explicitamente ao elemento |
|
Rotação do gráfico de pizza chp
Por padrão, a primeira série é desenhada a partir das 3:00, continuando no sentido horário no gráfico, mas você pode especificar uma rotação personalizada usando o parâmetro chp
.
Sintaxe
chp=<radians>
- <radians>
- Um valor de ponto flutuante que descreve quantos radianos girar o gráfico no sentido horário. Uma volta completa é 2π (2 pi — aproximadamente 6,28) radianos.
Exemplos
Descrição | Exemplo |
---|---|
Para mudar a orientação de um gráfico de pizza, use |
|
Veja outro exemplo de rotações do gráfico de pizza. Eles podem ser combinados com marcadores de forma de gráficos para criar alguns efeitos interessantes. |
Recursos padrão
Os demais recursos nesta página são recursos de gráficos padrão.
Título do gráfico chtt
, chts
[todos os gráficos]
É possível especificar o texto, a cor e o tamanho da fonte do título de um gráfico.
Sintaxe
chtt=<chart_title> chts=<color>,<font_size>,<opt_alignment>
chtt
: especifica o título do gráfico.
- <chart_title>
- Título a ser exibido no gráfico. Não é possível especificar onde ele aparece, mas você
pode especificar o tamanho e a cor da fonte. Use um sinal de + para indicar espaços e uma barra vertical (
|
) para indicar quebras de linha.
chts
[opcional]: cores e tamanho da fonte do parâmetro chtt
.
- <color>
- A cor do título, no formato hexadecimal RRGGBB. A cor padrão é preto.
- <font_size>
- Tamanho da fonte do título, em pontos.
- <opt_alignment>
- [Opcional] Alinhamento do título. Escolha um dos seguintes valores de string, diferenciando maiúsculas de minúsculas: "l" (à esquerda), "c" (centrado) e "r" (à direita). O padrão é "c".
Exemplos
Descrição | Exemplo |
---|---|
Gráfico com título, que usa a cor e o tamanho da fonte padrão. Especifique um espaço com um sinal de adição ( Use uma barra vertical (
|
chtt=Site+visitors+by+month| |
Um gráfico com um título azul de 20 pontos alinhado à direita. |
chtt=Site+visitors |
Texto e estilo da legenda do gráfico chdl
, chdlp
, chdls
[Todos os gráficos]
A legenda é uma seção lateral do gráfico que fornece uma pequena descrição de texto de cada série. É possível especificar o texto associado a cada série nessa legenda e especificar em que parte do gráfico ela deve aparecer.
Consulte também chma
,
para saber como definir as margens ao redor da legenda.
Uma observação sobre os valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL
todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z
.
Você encontra um codificador de URL na documentação de visualização do Google.
Sintaxe
chdl=<data_series_1_label>|...|<data_series_n_label> chdlp=<opt_position>|<opt_label_order> chdls=<color>,<size>
chdl
: o texto de cada série a ser exibido na legenda.
- <data_series_label>
- O texto das entradas de legenda. Cada rótulo se aplica à série correspondente na matriz
chd
. Use um sinal de + em um espaço. Se você não especificar esse parâmetro, o gráfico não receberá uma legenda. Não há como especificar uma quebra de linha em um rótulo. A legenda normalmente se expandirá para conter o texto dela, e a área do gráfico será reduzida para acomodar a legenda.
chdlp
: [opcional] a posição da legenda e a ordem das entradas da legenda. É possível especificar <position> e/ou <label_order>. Se você especificar ambos, separe-os com um caractere de barra. Adicione um "s" a qualquer valor se quiser que as entradas de legenda vazias em chdl
sejam ignoradas na legenda. Exemplos: chdlp=bv
, chdlp=r
, chdlp=bv|r
e chdlp=bvs|r
.
- <opt_position>
- [Opcional] Especifica a posição da legenda no gráfico. Para especificar mais padding entre a legenda e a área do gráfico ou a borda da imagem, use o parâmetro
chma
. Escolha um dos seguintes valores:b
: legenda na parte inferior do gráfico, entradas de legenda em uma linha horizontal.bv
: legenda na parte inferior do gráfico, entradas de legenda em uma coluna vertical.t
: legenda na parte superior do gráfico, entradas de legenda em uma linha horizontal.tv
: legenda na parte superior do gráfico, entradas de legenda em uma coluna vertical.r
- [Padrão] Legenda à direita do gráfico, entradas de legenda em uma coluna vertical.l
: legenda à esquerda do gráfico, entradas de legenda em uma coluna vertical.
- <opt_label_order>
- [Opcional]
A ordem em que os rótulos são mostrados na legenda.
Escolha uma destas opções:
l
- [Padrão para legendas verticais] Exibe os rótulos na ordem informada parachdl
.r
: mostra os rótulos na ordem inversa, conforme informado aochdl
. Isso é útil em gráficos de barras empilhadas para mostrar a legenda
na mesma ordem em que as barras aparecem.a
- [Padrão para legendas horizontais] Ordem automática: basicamente, significa classificar por comprimento, o mais curto primeiro, conforme medido em blocos de 10 pixels. Quando dois elementos tiverem o mesmo comprimento (divididos em blocos de 10 pixels), o que estiver listado primeiro aparecerá primeiro.0,1,2...
: ordem de rótulos personalizada. Trata-se de uma lista de índices de rótulos baseados em zero dechdl
, separados por vírgulas.
chdls
: [opcional] especifica a cor e o tamanho da fonte do texto da legenda.
- <color>
- A cor do texto da legenda, no formato hexadecimal RRGGBB.
- <size>
- O tamanho do ponto do texto da legenda.
Exemplos
Descrição | Exemplo |
---|---|
Dois exemplos de legendas. Especifique o texto da legenda na mesma ordem da série de dados. |
chdl=NASDAQ|FTSE100|DOW
chdl=First|Second|Third |
O primeiro gráfico demonstra entradas de legenda horizontais ( |
|
Este exemplo demonstra a alteração do tamanho da fonte. |
|
Margens do gráfico chma
[todos os gráficos]
Você pode especificar o tamanho das margens do gráfico, em pixels. As margens são calculadas a partir do tamanho de gráfico especificado (chs
). Aumentar o tamanho da margem não aumenta o tamanho total do gráfico, mas reduz a área do gráfico, se necessário.
As margens são, por padrão, o espaço que sobra depois que o tamanho do gráfico é calculado. Seu valor padrão varia de acordo com o tipo de gráfico. As margens especificadas são um valor mínimo. Se a área do gráfico deixar espaço para margens, o tamanho delas será o que sobrar. Não é possível comprimir as margens menores do que o necessário para legendas e rótulos. Veja um diagrama que mostra as partes básicas de um gráfico:
As margens do gráfico incluem os rótulos do eixo e a área da legenda. A área da legenda é redimensionada automaticamente para se ajustar ao texto exatamente, a menos que você especifique uma largura maior usando 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 |
Sintaxe
chma= <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
- <left_margin>, <right_margin>, <top_margin>, <bottom_margin>.
- Tamanho mínimo da margem ao redor da área do gráfico, em pixels. Aumente esse valor e inclua padding para evitar que os rótulos dos eixos encostem nas bordas do gráfico.
- <opt_legend_width>, <opt_legend_height>
- [Opcional] Largura da margem ao redor da legenda, em pixels. Use isso para evitar que a legenda encoste na área do gráfico ou nas bordas da imagem.
Exemplos
Descrição | Exemplo |
---|---|
Neste exemplo, o gráfico tem uma margem mínima de 30 pixels em cada lado. Como a legenda do gráfico tem mais de 30 pixels de largura, a margem no lado direito é definida como a largura da legenda do gráfico e é diferente das outras margens. Os rótulos dos eixos estão fora da área do gráfico e, portanto, são desenhados no espaço da margem. |
|
Para adicionar uma margem ao redor da legenda, defina um valor para os parâmetros Neste exemplo, a legenda tem largura de aproximadamente 60 pixels. Se você definir |
|
Estilos e rótulos de eixos [linha, barra, Googleômetro, radar, dispersão]
É possível especificar quais eixos serão exibidos no gráfico e atribuir rótulos, posições, intervalos e estilos personalizados a eles.
Nem todos os gráficos exibem linhas de eixos por padrão. Você pode especificar exatamente quais eixos seu gráfico deve mostrar usando o parâmetro chxt
. As linhas de eixo padrão não exibem números. É preciso especificar um eixo no parâmetro chxt
para que os números sejam exibidos.
Os eixos podem exibir números que refletem os valores dos dados ou especificar eixos personalizados.
O padrão é exibir valores numéricos,
com valores dimensionados para o intervalo de 0 a 100.
No entanto, é possível alterar esse intervalo usando chxr
para exibir qualquer intervalo. Além disso, é possível estilizar os valores (por exemplo, para mostrar símbolos de moeda ou casas decimais) usando chxs
.
Se você optar por usar valores personalizados, por exemplo: "Seg, Ter, Qua", poderá usar o parâmetro chxl
.
Para colocar essas etiquetas em locais específicos dos eixos, use o parâmetro chxp
.
Por fim, é possível usar os parâmetros chxs
e chxtc
para especificar cor, tamanho, alinhamento e outras propriedades dos rótulos de eixos personalizados e numéricos.
Uma observação sobre os valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL
todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z
.
Você encontra um codificador de URL na documentação de visualização do Google.
Esta seção aborda os seguintes tópicos:
- Eixos visíveis (
chxt
): quais eixos exibir. - Intervalo do eixo (
chxr
): intervalo de valores para cada eixo. - Rótulos de eixos personalizados (
chxl
): valores personalizados a serem exibidos nos eixos. - Posições dos rótulos nos eixos (
chxp
): posicionamento dos rótulos personalizados ao longo de cada eixo. - Estilos dos rótulos dos eixos (
chxs
): cor, tamanho, alinhamento e formatação dos rótulos dos eixos. - Estilos das marcas de escala do eixo (
chxtc
): comprimento das marcas de escala de um eixo específico.
Eixos visíveis chxt
Os gráficos de barras, linhas, radar e dispersão mostram uma ou duas linhas de eixo por padrão, mas essas linhas não incluem valores.
Para exibir valores nas linhas dos eixos ou alterar os eixos mostrados, use o parâmetro chxt
.
Por padrão, os valores do eixo variam de 0 a 100, a menos que você os dimensione explicitamente usando a propriedade chxr
. Para ocultar todas as linhas de eixo em um gráfico de linhas, especifique :nda
após o valor do tipo de gráfico no parâmetro cht
(exemplo: cht=lc:nda
).
Por padrão, os eixos superior e inferior não exibem marcas de seleção pelos valores, ao passo que os eixos esquerdo e direito os exibem. É possível alterar esse comportamento usando o parâmetro chxs
.
Sintaxe
chxt= <axis_1> ,..., <axis_n>
- <axis>
- Um eixo a ser exibido no gráfico. Os eixos disponíveis são:
x
: Eixo x inferiort
- Eixo x superior [não compatível com o Google-Meter]y
: Eixo y à esquerdar
- Eixo y à direita [não compatível com o Google-Meter]
É possível especificar vários eixos do mesmo tipo,
por exemplo: cht=x,x,y
. Isso empilhará dois conjuntos de eixos x na parte inferior do gráfico. Isso é útil ao adicionar rótulos personalizados ao longo de um eixo que mostra valores numéricos (veja o exemplo abaixo). Os eixos são desenhados de dentro para fora. Portanto, se você tiver x,x
, o primeiro x se referirá à cópia mais interna, o próximo x se referirá à próxima cópia externa e assim por diante.
Exemplos
Descrição | Exemplo |
---|---|
Este exemplo mostra um gráfico de linhas com um eixo x, um eixo y, um eixo superior (t) e um eixo direito (r). Como nenhum rótulo foi especificado, o gráfico tem como padrão um intervalo de 0 a 100 para todos os eixos. Por padrão, os eixos superior e inferior não mostram marcas de seleção pelos rótulos. |
|
É possível incluir vários conjuntos de rótulos para cada eixo incluindo o mesmo valor mais de uma vez. Este exemplo mostra dois conjuntos de eixos x e dois eixos y. Isso não é muito útil ao usar apenas os rótulos do eixo padrão, como mostrado aqui. No entanto, é possível especificar rótulos personalizados para cada cópia de cada eixo usando o parâmetro chxl . |
<img <code="" dir="ltr" src="/static/chart/image/images/chart_41.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x1"
|
Este exemplo mostra um gráfico de barras horizontais com um eixo x, um eixo y, um eixo t superior e um eixo r à direita. Os rótulos dos eixos são omitidos, então a API Chart exibe um intervalo de 0 a 100 para os eixos x e t. O intervalo dos eixos y e r é determinado pelo número de barras. Nesse caso, há cinco barras, então a API de gráficos do Google exibe um intervalo de 0 a 4. O primeiro rótulo é centralizado na base da primeira barra, o segundo é centralizado na base da segunda barra e assim por diante. |
|
É possível suprimir os eixos padrão em um gráfico de linhas especificando :nda após o tipo do gráfico. |
cht=lc:nda |
Intervalo do eixo chxr
É possível especificar o intervalo de valores que aparecem em cada eixo de maneira independente, usando o parâmetro chxr. Isso não muda a escala dos elementos do gráfico, apenas a escala dos rótulos dos eixos. Se quiser que os números dos eixos descrevam os valores reais dos dados, defina <start_val> e <end_val> como os valores mínimo e máximo do intervalo do formato de dados, respectivamente. Consulte Escalonamento de eixos para mais informações.
Torne um eixo visível usando o parâmetro chxt
se quiser especificar o intervalo dele.
Para especificar valores de eixo personalizados, use o parâmetro chxl
.
Sintaxe
Separe vários intervalos de rótulos de eixos usando a barra vertical ( |
).
chxr= <axis_index>,<start_val>,<end_val>,<opt_step> |...| <axis_index>,<start_val>,<end_val>,<opt_step>
- <índice_do_eixo>
- A que eixo aplicar os rótulos. É um índice baseado em zero para a matriz de eixos especificada por
chxt
. Por exemplo, o eixo r seria 1 emchxt=x,r,y
. - <start_val>
- Um número que define o valor baixo do eixo.
- <end_val>
- Um número que define o maior valor do eixo.
- <opt_step>
- [Opcional] A etapa da contagem entre as marcações no eixo. Não há valor de etapa padrão. A etapa é calculada para tentar mostrar um conjunto de rótulos bem espaçados.
Exemplos
Descrição | Exemplo |
---|---|
Este exemplo mostra os eixos y à esquerda e à direita ( Cada eixo possui um intervalo definido. Como nenhum rótulo ou posição é especificado, os valores são retirados do intervalo especificado e espaçados uniformemente dentro dele. No gráfico de linhas, os valores são uniformemente distribuídos ao longo do eixo x. A direção do eixo é invertida no eixo r (índice |
|
Neste exemplo, são especificados valores para o eixo x. Os rótulos dos eixos são espaçados uniformemente ao longo dos eixos. Um valor de cinco ( |
|
Rótulos de eixos personalizados chxl
É possível especificar rótulos personalizados para qualquer eixo usando o parâmetro chxl
. Você pode especificar quantos rótulos
quiser. Se você exibir um eixo (usando o parâmetro chxt
) e não especificar rótulos personalizados, os rótulos numéricos padrão serão aplicados.
Para especificar um intervalo numérico personalizado, use o parâmetro chxr
.
Se quiser definir locais específicos nos eixos para seus rótulos, use o parâmetro chxp
.
Sintaxe
Especifique um conjunto de parâmetros para cada eixo que você quer rotular. Separe vários conjuntos de rótulos usando a barra vertical (|
).
chxl= <axis_index>:|<label_1>|...|<label_n> |...| <axis_index>:|<label_1>|...|<label_n>
- <índice_do_eixo>
- A que eixo aplicar rótulos. Ele
é um índice na matriz de parâmetros
chxt
. Por exemplo, se você tiverchxt=x,x,y,y
, o índice 0 será o primeiro eixo X, 1 será o segundo. - <label_1>| ... |<label_n>
- Um ou mais rótulos para colocar ao longo desse eixo. Podem ser strings ou valores numéricos, e as strings não precisam estar entre aspas. label_1 é exibido na posição mais baixa do eixo, e label_n, na mais alta. Os outros rótulos são espaçados uniformemente entre eles.
Indique espaços com um sinal de +. Não há como especificar uma quebra de linha em um rótulo. Separe os rótulos com uma barra vertical. Observação : não
coloque uma barra vertical depois do rótulo final no parâmetro
chxl
.
Exemplos
Descrição | Exemplo |
---|---|
Este gráfico mostra como adicionar rótulos personalizados aos dois eixos. Observe como os valores são espaçados uniformemente e como o último valor |
chxt=x,y |
Este exemplo inclui rótulos de eixo nos eixos y esquerdo e direito ( |
|
Este exemplo inclui rótulos de eixo nos eixos y à esquerda e à direita ( Este exemplo usa valores padrão para os rótulos do eixo y da esquerda. |
|
Se você quiser adicionar um rótulo genérico para descrever um eixo inteiro (por exemplo, para rotular um eixo como "custo" e outro "estudante"), use a propriedade |
chxt=x,x,y,y |
Posições dos rótulos dos eixos chxp
É possível especificar quais rótulos de eixo serão mostrados usando os rótulos padrão ou personalizados especificados com chxl
. Se você não especificar posições exatas usando esse parâmetro, os rótulos serão espaçados uniformemente e com um valor de taxa padrão ao longo dos eixos. Se você não especificar chxl
,
os rótulos das marcas de seleção serão os valores padrão, normalmente valores de dados ou
os números de barras em gráficos de barras.
Sintaxe
Separe vários conjuntos de posicionamento usando a barra vertical (|
).
chxp= <axis_1_index>,<label_1_position>,...,<label_n_position> |...| <axis_m_index>,<label_1_position>,...,<label_n_position>
- <índice_do_eixo>
- É o eixo em que você está especificando posições. Trata-se de um índice para a matriz de parâmetros
chxt
. Por exemplo, se você tiverchxt=x,x,y,y
, o índice 0 será o primeiro eixo x, 1 será o segundo e assim por diante. - <label_1_position>,...,<label_n_position>
- A posição do rótulo ao longo do eixo. Trata-se de uma lista separada por vírgulas de valores numéricos, em que cada valor define a posição do rótulo correspondente na matriz
chxl
: a primeira entrada se aplica ao primeiro rótulo e assim por diante. A posição é um valor no intervalo do eixo. O valor sempre será de 0 a 100, a menos que você tenha especificado um intervalo personalizado usandochxr
. O número de posições precisa ser igual ao número de rótulos do eixo.
Exemplos
Descrição | Exemplo |
---|---|
Este exemplo inclui rótulos do eixo r em posições especificadas no gráfico. O texto do rótulo é especificado usando o parâmetro Os rótulos com a posição especificada de Os rótulos com a posição especificada de |
|
Este exemplo mostra como mostrar os valores de rótulo padrão, mas apenas em locais especificados.
|
chxt=x,y
chxt=x,y chxp não especificado |
Estilos dos rótulos dos eixos chxs
Você pode especificar o tamanho, a cor e o alinhamento da fonte dos rótulos dos eixos, tanto para rótulos personalizados quanto com valores padrão. Todos os rótulos no mesmo eixo têm o mesmo formato. Se você tiver várias cópias de um eixo, poderá formatar cada uma de maneira diferente. Também é possível especificar o formato de uma string de rótulo, por exemplo, para mostrar símbolos de moeda ou zeros à direita.
Por padrão, os eixos superior e inferior não mostram marcas de seleção pelos valores, ao contrário dos eixos esquerdo e direito.
Sintaxe
Os valores para vários eixos precisam ser separados usando uma barra vertical (|
).
chxs= <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color> |...| <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
- <axis_index>
- O eixo a que isso se aplica. Esse
é um índice baseado em zero no parâmetro
chxt
. - <opt_format_string>
- [Opcional] Esta é uma string de formato opcional que, se usada, vem logo após o número do índice do eixo sem uma vírgula intermediária. Ele começa
com uma letra literal N seguida pelos
seguintes valores, todos opcionais:
N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
Confira o significado de cada elemento:<preceding_text>
: texto literal que precede cada valor.*...*
: um bloco opcional entre asteriscos literais, em que é possível especificar detalhes de formatação para números. Os seguintes valores são aceitos e todos opcionais:<number_type>
: formato numérico para valores numéricos. Escolha uma das opções a seguir:f
: formato de ponto flutuante [Padrão]. Considere também especificar a precisão com o valor <decimal_places>.p
: formato de porcentagem. O sinal de % é acrescentado automaticamente. Observação:ao usar esse formato, os valores de dados de 0,0 a 1,0 são mapeados para 0 a 100% (por exemplo, 0,43 será mostrado como 43%).e
: formato de notação científica.c<CUR>
: formata o número na moeda especificada, com o marcador de moeda apropriado. Substitua<CUR>
por um código de moeda de três letras. Exemplo:cEUR
para euros. É possível encontrar uma lista de códigos no site da ISO, embora nem todos os símbolos sejam compatíveis.
<decimal_places>
: um número inteiro que especifica quantas casas decimais serão mostradas. O valor é arredondado (não truncado) para esse comprimento. O padrão é 2.z
: exibe zeros à direita. O padrão é não.s
: exibe separadores de grupo. O padrão é não.x
ouy
: exibe os dados da coordenada x ou y, conforme especificado. O significado dos dados x varia de acordo com o tipo de gráfico: experimente com seu gráfico para determinar o que significa. O padrão é 'y'.
<following_text>
: texto literal que acompanha cada valor.
- <opt_label_color>
- A cor a ser aplicada ao texto do eixo (mas não à linha do eixo), no formato hexadecimal RRGGBB. A cor da linha do eixo é especificada separadamente usando opt_axis_color. O padrão é cinza.
- <opt_font_size>
- [Opcional] especifica o tamanho da fonte em pixels. Este parâmetro é opcional.
- <opt_alignment>
- [Opcional] Alinhamento do rótulo. Para eixos superior ou inferior, isso descreve como o rótulo se alinha à marca de seleção acima ou abaixo dele. Para eixos à esquerda ou à direita, isso descreve como o rótulo é alinhado dentro da caixa delimitadora, que toca o eixo. Especifique um destes números:
-1
– Superior ou inferior: os rótulos ficam à direita das marcações. Esquerda ou direita: os rótulos são alinhados à esquerda na área. Padrão para rótulos do eixo r.0
— Superior ou inferior: os rótulos são centralizados nas marcações. Esquerda ou direita: os rótulos são centralizados na área deles. Padrão para rótulos dos eixos x e t.1
– Superior ou inferior: os rótulos ficam à esquerda das marcações. Esquerda ou direita: os rótulos são alinhados à direita na área. Padrão para rótulos do eixo y.
- <opt_axis_or_tick>
- [Optional, not supported in Googleômetro] Define se as marcas de escala e/ou as linhas de eixo serão mostradas no eixo. As marcas de escala e as linhas de eixo estão disponíveis apenas para os eixos mais internos. Por exemplo, elas não são compatíveis com o externo de dois eixos x. Use um dos seguintes valores:
l
("L" minúsculo): desenha apenas a linha do eixo.t
: desenha apenas as marcas de seleção. As marcas de escala são as pequenas linhas ao lado dos rótulos dos eixos.lt
: [Padrão] desenhe uma linha de eixo e marcas de seleção para todos os rótulos._
- (Sublinhado) não desenha linhas de eixo nem marcas de seleção. Se quiser ocultar uma linha de eixo, use este valor.
- <tick_color>
- [Optional; not supported in Google-o-Meter] A cor da marca de seleção, no formato hexadecimal RRGGBB. O padrão é cinza.
- <opt_axis_color>
- [Opcional] A cor da linha do eixo, no formato hexadecimal RRGGBB. O padrão é cinza.
Exemplos
Descrição | Exemplo |
---|---|
O tamanho da fonte e a cor são especificados para o segundo eixo x (Jan, Fev, Mar). |
|
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. |
|
Este gráfico inclui três conjuntos de dados e mostra três conjuntos de rótulos de eixos, um por série. Cada conjunto de rótulos é formatado usando uma string de formatação personalizada, conforme descrito aqui:
Os intervalos dos rótulos dos eixos são definidos usando o parâmetro |
chd=s: |
Estilos das marcas de escala dos eixos chxtc
Você pode especificar marcas de escala longas para eixos específicos. Normalmente, isso é usado para estender uma marca de seleção por todo o comprimento de um gráfico. Use o parâmetro chxs
para
mudar a cor da marca de seleção.
Os valores para vários eixos precisam ser separados
por uma barra vertical (|
). Os valores em uma série precisam ser separados
por vírgula.
Sintaxe
chxtc= <axis_index_1>,<tick_length_1>,...,<tick_length_n> |...| <axis_index_m>,<tick_length_1>,...,<tick_length_n>
- <axis_index>
- O eixo a que isso se aplica. Esse é um índice baseado em zero no parâmetro
chxt
. Separe os valores para eixos diferentes usando um delimitador de barra. - <tick_length_1>,...,<tick_length_n>
- Comprimento das marcas de seleção no eixo, em pixels. Se um único valor for fornecido, ele será aplicado a todos os valores. Se mais de um valor for fornecido, as marcas de escala do eixo vão alternar pela lista de valores daquele eixo. Valores positivos são desenhados para fora da área do gráfico e cortados pelas bordas do gráfico. O valor positivo máximo é 25. Valores negativos são desenhados para dentro da área do gráfico e cortados pelas bordas da área do gráfico.
Exemplos
Descrição | Exemplo |
---|---|
Exemplo de uso de
|
|
Este gráfico demonstra como alternar o comprimento das marcas de escala. chxtc especifica dois valores de comprimento de marcação para o eixo y (5 e 15), e as marcas desenhadas no gráfico alternam entre os dois valores. |
chxt=x,y |
Preenchimento do plano de fundo chf
[Todos os gráficos]
Você pode especificar cores de preenchimento e estilos para a área de dados e/ou todo o plano de fundo do gráfico. Os tipos de preenchimento incluem uniforme, listrado e gradiente.
É possível especificar preenchimentos diferentes para áreas distintas, por exemplo, a área inteira do gráfico ou apenas a área de dados. O preenchimento da área do gráfico substitui o preenchimento do plano de fundo. Todos os preenchimentos são especificados usando o parâmetro chf
, e é possível misturar diferentes tipos de preenchimento (sólidos, listras, gradientes) no mesmo gráfico, separando os valores com barra vertical ( | ). Os preenchimentos da área do gráfico substituem os preenchimentos do plano de fundo do gráfico.
Preenchimentos sólidos chf
[todos os gráficos]
Você pode especificar um preenchimento sólido para o plano de fundo e/ou a área do gráfico ou atribuir um valor de transparência para o gráfico inteiro. Você pode especificar vários preenchimentos usando o caractere de barra vertical (|
). (Maps: somente segundo plano).
Sintaxe
chf=<fill_type>,s,<color>|...
- <fill_type>
- A parte do gráfico que está sendo preenchida. Especifique um dos seguintes valores:
bg
: preenchimento do plano de fundoc
: preenchimento da área do gráfico. Incompatível com gráficos de mapa.a
: torna o gráfico inteiro transparente, incluindo o plano de fundo. Os seis primeiros dígitos de<color>
são ignorados e apenas os dois últimos (o valor de transparência) são aplicados ao gráfico inteiro e a todos os preenchimentos.b<index>
: preenchimento sólido de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchida com uma cor sólida. O efeito é semelhante à especificação dechco
em um gráfico de barras. Consulte Cores das séries do gráfico de barras para ver um exemplo.
- s
- Indica um preenchimento sólido ou transparente.
- <color>
- A cor de preenchimento, no formato hexadecimal RRGGBB. Para transparências, os primeiros seis dígitos são ignorados, mas precisam ser incluídos mesmo assim.
Exemplos
Descrição | Exemplo |
---|---|
Neste exemplo, o segundo plano do gráfico é preenchido com cinza claro ( |
|
Neste exemplo, o segundo plano do gráfico é preenchido com cinza claro ( |
|
Neste exemplo, aplicamos uma transparência de 50% em todo o gráfico (80 em hexadecimal é 128, ou cerca de 50% de transparência). Observe o plano de fundo das células da tabela que aparece no gráfico. |
|
Preenchimento gradiente chf
[linha, barra, Googleômetro, radar, dispersão,Venn]
Você pode aplicar um ou mais preenchimentos gradientes à área do gráfico ou plano de fundo. O preenchimento gradiente é um esmaecimento de uma cor para outra. Gráficos de pizza e Googleômetro: somente em segundo plano.
Cada preenchimento de gradiente especifica um ângulo e, em seguida, duas ou mais cores ancoradas em um local especificado. A cor varia conforme se move de uma âncora para outra. Você precisa ter pelo menos duas cores com valores de <color_centerpoint> diferentes, para que uma delas possa esmaecer a outra. Cada gradiente extra é especificado por um par <color>,<color_centerpoint>.
Sintaxe
chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1> ,..., <color_n>,<color_centerpoint_n>
- <fill_type>
- A área do gráfico a ser preenchida. Uma das seguintes opções:
bg
: preenchimento do plano de fundoc
: preenchimento da área do gráfico.b<index>
: preenchimento gradiente de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchida com um gradiente. Consulte Cores das séries do gráfico de barras para ver um exemplo.
- lg
- Especifica um preenchimento gradiente.
- <angle>
- Um número que especifica o ângulo do gradiente de 0 (horizontal) a 90 (vertical).
- <color>
- A cor do preenchimento, no formato hexadecimal RRGGBB.
- <color_centerpoint>
- Especifica o ponto de fixação da cor. A cor começará a esmaecer a partir desse ponto, à medida que se aproximar de outra âncora. O intervalo de valores é de 0,0 (borda inferior ou esquerda) a 1,0 (borda superior ou direita), inclinado no ângulo especificado por <angle>.
Exemplos
Descrição | Exemplo |
---|---|
A área do gráfico tem um gradiente linear horizontal, especificado com um ângulo de zero grau ( As cores são pêssego ( O plano de fundo do gráfico é desenhado em cinza ( |
|
A área do gráfico tem um gradiente linear diagonal (da parte inferior à esquerda ao canto superior direito), especificado em um ângulo de 45 graus ( Pêssego ( Azul ( O plano de fundo do gráfico é desenhado em cinza ( |
|
A área do gráfico tem um gradiente linear vertical (de cima para baixo), especificado com um ângulo de 90 graus ( Azul ( Pêssego ( O plano de fundo do gráfico é desenhado em cinza ( |
|
Preenchimento listrado chf
[linha, barra, Googleômetro, radar, dispersão, Venn]
Você pode especificar um preenchimento listrado para a área do gráfico ou para o gráfico inteiro Gráficos de pizza e Googleômetro: somente em segundo plano.
Sintaxe
chf= <fill_type>,ls,<angle>,<color_1>,<width_1> ,..., <color_n>,<width_n>
- <fill_type>
- A área do gráfico a ser preenchida. Uma das seguintes opções:
bg
: preenchimento do plano de fundoc
: preenchimento da área do gráficob<index>
: preenchimento listrado de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras para preencher com listras. Consulte Cores das séries do gráfico de barras para ver um exemplo.
- ls
- Especifica o preenchimento de listras lineares.
- <angle>
- O ângulo de todas as listras em relação ao eixo y. Use
0
para listras verticais ou90
para listras horizontais. - <color>
- A cor dessa listra, no formato hexadecimal RRGGBB. Repita <color> e <width> para cada listra adicional. Use pelo menos duas listras. As listras se alternam até que o gráfico seja preenchido.
- <width>
- A largura dessa listra, de
0
a1
, em que1
é a largura total do gráfico. As listras se repetem até que o gráfico seja todo preenchido. Repita <color> e <width> em cada listra adicional. Use pelo menos duas listras. As listras se alternam até que o gráfico seja preenchido.
Exemplos
Descrição | Exemplo |
---|---|
|
chf= |
|
chf= |
Funções de dados chfd
[todos os
chd
gráficos]
É possível especificar uma função personalizada para executar nos dados do gráfico usando a sintaxe da função muParser. Os dados usados na função podem vir de uma das duas fontes a seguir:
- Uma série de dados de
chd
: os dados são extraídos da série especificada emchd
. - Um intervalo de valores declarados no próprio parâmetro
chfd
: você declara um valor de início, uma parada e um passo para um intervalo de dados arbitrário.
É importante observar que, em todos os casos, você precisa atribuir a saída a uma série atual em chd
. Essa série será substituída pela saída da função. O gráfico é renderizado somente depois que todas as funções são processadas. Portanto, se você atribuir várias funções para saída à mesma série de dados, as funções serão executadas na ordem determinada, mas apenas a saída da função final será mostrada no gráfico. É possível encadear funções,
para que uma função possa receber como entrada uma série que foi saída por uma função
anterior.
Para atribuir cores ou marcadores chm
a uma linha de função, atribua as cores ou os marcadores ao índice de série da função. Os marcadores são posicionados de acordo com os dados depois de serem manipulados pela função.
Sintaxe
chfd= <output_series_index>,<function_data>,<function_string> |...| <output_series_index>,<function_data>,<function_string>
- <output_series_index>
- Índice baseado em zero de uma série de dados em
chd
em que a saída da função será gravada. Todos os dados atuais serão completamente substituídos pela saída da função. Se uma série não estiver sendo usada como entrada para uma função, a prática recomendada é atribuir um único valor fictício a essa série. - <function_data>
- As variáveis e os dados que serão representados no gráfico. Os dados podem ser de um intervalo definido por você
ou de uma das séries de dados
chd
. É possível especificar diversas variáveis para cada função, usando um delimitador ; (ponto e vírgula) para diversas variáveis. Se você definir diversas variáveis para uma única função e elas tiverem um número de pontos diferente, a função será interrompida quando alcançar o primeiro endpoint. Por exemplo, se uma função definir x=1 a 5, etapa 1 e y=1 a 10, etapa 1, a função será encerrada quando alcançar o quinto ponto.
<variable_name>,<input_series_index>
OU
<variable_name>,<start>,<end>,<step>
- variable_name: um nome de string arbitrário para a variável. Use na função definida por function_string.
- input_series_index: o índice de uma série de dados
chd
a ser usada como dados de entrada. - início: o valor numérico inicial de um intervalo.
- fim: o valor numérico final de um intervalo.
- step: o valor numérico da etapa de start a end. Pode ser positivo ou negativo, mas não pode ser zero.
x,0,100,1
declara uma variável chamadax
com valores 0, 1, 2, ... 100.x,0,100,1;r,0,3.1,.1
declara a mesma variávelx
mais uma variável chamadar
com valores 0, 0,1, 0,2, ..., 3,0, 3,1. Ox,0
declara uma variável com o nome x que usa os dados da primeira sériechd
. Essas variáveis serão usadas por function_string. Elas não serão incluídas no gráfico, a menos que você as especifique em function_string. Quanto menor for o valor do grau, mais suave será o gráfico. - <function_string>
- Sua função escrita na sintaxe
muParser. A função é aplicada às variáveis e aos dados especificados em variable_data.
Só é possível fazer referência às variáveis declaradas nesse conjunto de funções locais, não em outro conjunto de parâmetros
chfd
. As funções de resumo muParser não são suportadas (min, max sum, avg). IMPORTANTE: lembre-se de usar%2B
em vez de+
nas suas funções.
Exemplos
Descrição | Exemplo |
---|---|
Uma onda senoidal simples. Observações importantes:
|
cht=lc |
Essa linha usa dados do parâmetro chd . |
chd=t:5,10 |
Uma mistura de linhas de função e não função. As cores são especificadas pelo parâmetro de cor da série Observe o posicionamento dos marcadores na saída da função.Os pontos de dados são calculados a partir de start, end e step.Assim, se o intervalo for de 0 a 11, 0,1, 0, 0, 0, e assim por diante, até o ponto 110, que tem o valor 11. |
chd=t: |
Para definir uma função em duas dimensões, use um gráfico
|
cht=lxy |
O parâmetro Tente clicar nessas imagens para abrir e brincar com elas no playground de gráficos. Você vai arrasar! |