Paradas de Venn

   

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

Sumário

Recursos específicos para gráficos Introdução Tipos de gráfico (cht) Cores da série (chco)

Recursos padrão Título do gráfico (chtt, chts) Estilo e texto da legenda do gráfico (chdl, chdlp, chdls) Margens do gráfico (chma) Preenchimentos do plano de fundo (chf) Preenchimentos sólidos (chf) Preenchimentos gradiente (chf) Preenchimento listrado (chf)

Introdução

Os diagramas de Venn são gráficos com círculos sobrepostos que indicam o que 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 o nível 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 apropriado para seu 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.

Nos diagramas de Venn, todos os valores são proporcionais, não absolutos. Isso significa que um gráfico com os valores 10,20,30 terá a mesma aparência que um gráfico com 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.	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 nenhum valor de sobreposição que inclua C.	cht=v chd=t:100,100,0,50

Cores da série chco

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

Sintaxe

chco=<color_1>,...,<color_n>

<color>

Cor da série, no formato hexadecimal RRGGBB. Especifique cores diferentes para séries diferentes adicionando valores de cor separados por vírgula. Se houver menos cores do que 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.	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.	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 valores hexadecimais de seis caracteres, mais 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 contínuo
• 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.

<chart_title>

Título a ser exibido no gráfico. Não é possível especificar onde ele aparece, mas é possível definir o tamanho e a cor da fonte. Use um sinal de + para indicar espaços e uma barra vertical ( |) para indicar quebras de linha.

 

chts [opcional]: cores e tamanho da fonte para o parâmetro chtt.

<color>

A cor do título, no formato hexadecimal RRGGBB. A cor padrão é preto.

<font_size>

Tamanho da fonte do título, em pontos.

<opt_alignment>

[Opcional] Alinhamento do título. Escolha um dos seguintes valores de string, diferenciando maiúsculas de minúsculas: "l" (esquerda), "c" (centralizado) "r" (direita). O padrão é "c".

 

Exemplos

Descrição	Exemplo
Gráfico com título, que usa a cor e o tamanho da fonte padrão. Especifique um espaço com um sinal de adição (+). Use uma barra vertical (|) para forçar uma quebra de linha. chts não está especificado aqui.	chtt=Site+visitors+by+month| January+to+July
Gráfico com título azul, alinhado à direita e de 20 pontos.	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 textual de cada série. Você pode especificar o texto associado a cada série nessa legenda e especificar onde ela deve aparecer no gráfico.

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

Observação sobre os valores de string:somente caracteres seguros de URL são permitidos nas strings de rótulo. Por questões de segurança, codifique para uso em URL todas as strings que contenham caracteres que não façam parte do conjunto de caracteres 0-9a-zA-Z. Você encontra um codificador de URL na documentação de visualização do Google.

Sintaxe

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

 

chdl: o texto de cada série a ser exibido na legenda.

<data_series_label>

O texto das entradas de legenda. Cada rótulo se aplica à série correspondente na matriz chd. Use um sinal de adição (+) no espaço. Se você não especificar esse parâmetro, o gráfico não receberá uma legenda. Não há como especificar uma quebra de linha em um rótulo. A legenda normalmente se expande para conter o texto da legenda, e a área do gráfico será reduzida para acomodar a legenda.

chdlp : [opcional] a posição da legenda e a ordem das entradas de legenda. É possível especificar <position> e/ou <label_order>. Se você especificar ambos, separe-os com um caractere de barra. Adicione um "s" a qualquer valor se quiser que entradas de legenda vazias em chdl sejam ignoradas na legenda. Exemplos: chdlp=bv, chdlp=r, chdlp=bv|r e chdlp=bvs|r.

<opt_position>

[Opcional] Especifica a posição da legenda no gráfico. Para especificar mais padding entre a legenda e a área do gráfico ou a borda da imagem, use o parâmetro chma. Escolha um destes valores:

• b: legenda na parte inferior do gráfico, entradas de legenda em uma linha horizontal.
• bv: legenda na parte inferior do gráfico, entradas de legenda em uma coluna vertical.
• t: legenda na parte superior do gráfico, entradas de legenda em uma linha horizontal.
• tv: legenda na parte superior do gráfico, entradas de legenda em uma coluna vertical.
• r - [Padrão] legenda à direita do gráfico, entradas de legenda em uma coluna vertical.
• l: legenda à esquerda do gráfico, entradas de legenda em uma coluna vertical.

<opt_label_order>

[opcional] A ordem em que os rótulos são mostrados na legenda. Escolha um destes valores:

• l - [Padrão para legendas verticais] Exibe rótulos na ordem informada para chdl.
• r: mostra rótulos na ordem inversa, conforme fornecido para chdl. Isso é útil em gráficos de barras empilhadas para mostrar a legenda
  na mesma ordem em que as barras aparecem.
• a - [Padrão para legendas horizontais] Ordem automática: aproximadamente, significa classificar por comprimento, mais curto primeiro, conforme medido em blocos de 10 pixels. Quando dois elementos tiverem o mesmo comprimento (divididos em blocos de 10 pixels), o que estiver listado primeiro aparecerá primeiro.
• 0,1,2...: ordem dos rótulos personalizados. Esta é uma lista de índices de rótulos baseados em zero do chdl, separados por vírgulas.

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

<color>

A cor do texto da legenda, no formato hexadecimal RRGGBB.

<size>

O tamanho do ponto do texto da legenda.

 

Exemplos

Descrição	Exemplo
Dois exemplos de legendas. Especifique o texto da legenda na mesma ordem que sua série de dados.	chdl=NASDAQ|FTSE100|DOW chco=FF0000,00FF00,0000FF chdl=First|Second|Third chco=ff0000,00ff00,0000ff
O primeiro gráfico demonstra entradas de legenda horizontais (chdlp=t, o layout padrão é horizontal) e o segundo demonstra entradas de legenda verticais inferiores (chdlp=bv).	chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=t chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=bv
Este exemplo demonstra a mudança do tamanho da fonte.	chdls=0000CC,14

Voltar ao início

Margens do gráfico chma [Todos os gráficos]

Você pode especificar o tamanho das margens do gráfico em pixels. As margens são calculadas internamente a partir do tamanho especificado do gráfico (chs). Aumentar o tamanho da margem não aumenta o tamanho total do gráfico, mas reduz a área do gráfico, se necessário.

As margens são, por padrão, o espaço que sobra depois que o tamanho do gráfico é calculado. Seu valor padrão varia de acordo com o tipo de gráfico. As margens especificadas são um valor mínimo. Se a área do gráfico deixar espaço para margens, o tamanho delas será o que sobrar. Você não pode apertar as margens menores do que o necessário para legendas e rótulos. Veja um diagrama que mostra as partes básicas de um gráfico:

As margens do gráfico incluem os rótulos do eixo e a área da legenda. A área da legenda é redimensionada automaticamente para ajustar o texto exatamente, a menos que você especifique uma largura maior usando chma. Nesse caso, a margem vai aumentar mais, apertando a área do gráfico. Não é possível cortar uma legenda especificando um tamanho muito pequeno, mas você pode fazer com que ela ocupe mais espaço do que o necessário. Dica:em um gráfico de barras, se as barras tiverem um tamanho fixo (o padrão), a largura da área do gráfico não poderá ser reduzida. Especifique um tamanho de barra menor ou redimensionável usando chbh.

 

Sintaxe

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>

<left_margin>, <right_margin>, <top_margin>, <bottom_margin>

Tamanho mínimo da margem ao redor da área do gráfico, em pixels. Aumente esse valor para incluir padding para evitar que os rótulos dos eixos encostem nas bordas do gráfico.

<opt_legend_width>, <opt_legend_height>

[Opcional] Largura da margem ao redor da legenda, em pixels. Use esse método para evitar que a legenda fique perto da área do gráfico ou das bordas da imagem.

 

Exemplos

Descrição	Exemplo
Nesse exemplo, o gráfico tem uma margem mínima de 30 pixels em cada lado. Como a legenda do gráfico tem mais de 30 pixels de largura, a margem do lado direito é definida como a largura da legenda do gráfico e é diferente das outras margens. Os rótulos dos eixos estão fora da área do gráfico e, portanto, são desenhados no espaço da margem.	chma=30,30,30,30
Para adicionar uma margem ao redor da legenda, defina um valor para os parâmetros <opt_legend_width> e <opt_legend_height>. Neste exemplo, a legenda tem largura de aproximadamente 60 pixels. Se você definir <opt_legend_width> como 80 pixels, a margem se estenderá por 20 pixels fora da legenda.	chma=20,20,20,30|80,20

Voltar ao início

Preenchimento de plano de fundo chf [Todos os gráficos]

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

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

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

Sintaxe

chf=<fill_type>,s,<color>|...

<fill_type>

A parte do gráfico que está sendo preenchida. Especifique um destes valores:

• bg: preenchimento do plano de fundo
• c: preenchimento da área do gráfico. Incompatível com gráficos de mapa.
• a: deixa o gráfico inteiro transparente, incluindo o plano de fundo. Os seis primeiros dígitos de <color> são ignorados, e apenas os dois últimos (o valor de transparência) são aplicados ao gráfico inteiro e aos preenchimentos.
• b<index>: preenchimento sólido de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchida com uma cor sólida. O efeito é semelhante à especificação de chco em um gráfico de barras. Consulte Cores da série do gráfico de barras para conferir um exemplo.

s

Indica um preenchimento sólido ou transparente.

<color>

A cor de preenchimento, no formato hexadecimal RRGGBB. Para transparências, os seis primeiros dígitos são ignorados, mas precisam ser incluídos mesmo assim.

 

Exemplos

Descrição	Exemplo
Neste exemplo, o plano de fundo do gráfico é preenchido com cinza claro (EFEFEF).	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).	chf=c,s,000000| bg,s,EFEFEF
Esse exemplo aplica uma transparência de 50% ao gráfico inteiro (80 em hexadecimal é 128, ou cerca de 50% de transparência). Observe o plano de fundo das células da tabela aparecendo no gráfico.	chf=a,s,00000080

Voltar ao início

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

Você pode aplicar um ou mais preenchimentos gradientes à área do gráfico ou plano de fundo. Os preenchimentos em gradiente são esmaecimentos de uma cor para outra. Gráficos de pizza e Googleômetro: somente para segundo plano.

Cada preenchimento de gradiente especifica um ângulo e, em seguida, duas ou mais cores ancoradas em um local especificado. A cor varia à medida que se move de uma âncora para outra. Você precisa ter pelo menos duas cores com valores <color_centerpoint> diferentes, para que uma delas possa aparecer gradualmente. Cada gradiente adicional é 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. Opções:

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

lg

Especifica um preenchimento de gradiente.

<ângulo>

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 vai começar a esmaecer a partir desse ponto à medida que se aproximar de outra âncora. O intervalo de valor é de 0,0 (borda de baixo 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) centralizado no lado direito (posição 1.0). O plano de fundo do gráfico é desenhado em cinza (EFEFEF).	chf=   c,lg,0,   FFE7C6,0,(pêssego)   76A4FB,1 (azul)
A área do gráfico tem um gradiente linear diagonal (do canto inferior esquerdo ao canto superior direito), especificado com um ângulo de 45 graus (45). Pêssego (FFE7C6) é a primeira cor especificada. A parte inferior esquerda do gráfico está em pêssego. Azul (6A4FB) é a segunda cor especificada. O canto superior direito do gráfico está em azul. Especificamos um deslocamento de 0, 75 para proporcionar um pico de azul que esmaece em direção ao canto superior direito. O plano de fundo do gráfico é desenhado em cinza (EFEFEF).	chf=   c,lg,45,   FFE7C6,0, (pêssego)   76A4FB,0.75 (azul)
A área do gráfico tem um gradiente linear vertical (de cima para baixo), especificado com um ângulo de 90 graus (90). Azul (76A4FB) é a primeira cor especificada. A parte superior do gráfico está totalmente em azul. Pêssego (FFE7C6) é a segunda cor especificada. A parte inferior do gráfico está em pêssego puro. O plano de fundo do gráfico é desenhado em cinza (EFEFEF).	chf=   c,lg,90,   FFE7C6,0, (pêssego)   76A4FB,0.5 (azul)

Voltar ao início

 

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

Você pode especificar um preenchimento listrado para a área do gráfico ou para o gráfico inteiro Gráficos de pizza e Googleômetro: somente para 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. Opções:

• bg: preenchimento do plano de fundo
• 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 preenchida com listras. Consulte Cores da série do gráfico de barras para conferir um exemplo.

ls

Especifica o preenchimento de listras lineares.

<ângulo>

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

<color>

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

<width>

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

 

Exemplos

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

Voltar ao início