Warning: This API is deprecated in 2012 and was turned off on March 18, 2019. Please use the actively maintained Google Charts API instead.

Paradas de Venn

Stay organized with collections Save and categorize content based on your preferences.
   

Este documento descreve como criar diagramas de Venn usando a API de gráficos do Google.

Índice

Introdução

Os diagramas de Venn são gráficos com círculos sobrepostos que indicam quantos grupos diferentes têm em comum. São suportados diagramas de Venn com dois ou três círculos. Você especifica os tamanhos relativos dos círculos e a quantidade de sobreposição entre eles.

Tipos de gráfico (cht)

Especifique um diagrama de Venn com a seguinte sintaxe:

Sintaxe

cht=v

A string de dados é um conjunto de até sete elementos, separados pelo delimitador adequado para o formato de dados, conforme descrito aqui:

  • Os três primeiros valores especificam os tamanhos de três círculos: A, B e C. Para um gráfico com apenas dois círculos, especifique zero para o terceiro valor.
  • O quarto valor especifica o tamanho da interseção de A e B.
  • O quinto valor especifica o tamanho da interseção de A e C. Para um gráfico com apenas dois círculos, não especifique um valor aqui.
  • O sexto valor especifica o tamanho da interseção de B e C. Para um gráfico com apenas dois círculos, não especifique um valor aqui.
  • O sétimo valor especifica o tamanho da interseção comum de A, B e C. Para um gráfico com apenas dois círculos, não especifique um valor aqui.

Com os diagramas de Venn, todos os valores são proporcionais, não absolutos. Isso significa que um gráfico com os valores 10,20 e 30 será semelhante a um gráfico com os valores 100,200,300 (se o tipo de codificação aceitar esses valores).

Descrição Exemplo

Um diagrama de Venn com três círculos.

Diagrama de Venn com interseção de três círculos, um círculo é azul e os outros são verdes
cht=v
chd=t:100,80,60,30,30,30,10

Para especificar um gráfico de dois círculos, especifique zero para o círculo C e não especifique valores de sobreposição que incluam C. Diagrama de Venn com interseção de três círculos, um círculo é azul e os outros são verdes
cht=v
chd=t:100,100,0,50

Cores da série chco

É possível especificar as cores de todas as séries, cada série ou apenas uma delas usando o parâmetro chco.

Sintaxe

chco=<color_1>,...,<color_n>
<cor>
Cor da série, no formato hexadecimal RRGGBB. Especifique cores diferentes para séries diferentes adicionando valores de cores separados por vírgula. Se você tiver menos cores que as séries, a última cor será repetida, mas nos gráficos de Venn, cores idênticas podem dificultar a leitura do gráfico.
Descrição Exemplo
Uma cor diferente para cada círculo. Diagrama de Venn com interseção de três círculos, um círculo é azul e os outros são verdes
chco=FF6342,ADDE63,63C6DE
Se houver menos cores que círculos, a última cor especificada será repetida. No entanto, isso dificulta a leitura do gráfico.

Diagrama de Venn com interseção de três círculos, um círculo é azul e os outros são verdes
chco=00FF00,0000FF

Recursos padrão

Os demais recursos nesta página são recursos de gráficos padrã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

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_título>
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.

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

<dados_da_série_de_dados>
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 especificar ambos, separe-os com um caractere de barra. É possível adicionar um 's' a qualquer valor se quiser que entradas de legenda vazias em chdl sejam ignoradas na legenda. Exemplos: chdlp=bv, chdlp=r, chdlp=bv|r, 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

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>|...
<tipo_de_preenchimento>
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. É necessário ter pelo menos duas cores com valores <color_centerpoint> diferentes 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>
<tipo_de_preenchimento>
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 <ângulo>.

 

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>
<tipo_de_preenchimento>
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 para preencher as 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 faixa adicional. 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 faixa adicional. 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