Grafici Venn

   

Questo documento descrive come creare diagrammi di Venn utilizzando l'API Chart.

Indice

Funzionalità specifiche del grafico

  1. Introduzione
  2. Tipi di grafici (cht)
  3. Colori serie (chco)

Funzionalità standard

  1. Titolo grafico (chtt, chts)
  2. Testo e stile della legenda del grafico (chdl, chdlp, chdls)
  3. Margini del grafico (chma)
  4. Riempimento sfondo (chf)
    1. Riempimenti solidi (chf)
    2. Riempimento sfumatura (chf)
    3. Riempimenti a righe (chf)

Introduzione

I diagrammi di Venn sono grafici con cerchi sovrapposti che indicano quanto gruppi diversi hanno in comune. I grafici supportano i diagrammi di Venn con due o tre cerchi. Specifica le dimensioni relative dei cerchi e la quantità di sovrapposizione tra loro.

Tipi di grafici (cht)

Specifica un diagramma di Venn con la seguente sintassi:

Sintassi

cht=v

La stringa di dati è un insieme di sette elementi, separati dal delimitatore appropriato per il formato dei dati, come descritto di seguito:

  • I primi tre valori specificano le dimensioni dei tre cerchi: A, B e C. Per un grafico con solo due cerchi, specifica il valore zero come terzo valore.
  • Il quarto valore specifica la dimensione dell'intersezione di A e B.
  • Il quinto valore specifica la dimensione dell'intersezione di A e C. Per un grafico con solo due cerchi, non specificare alcun valore qui.
  • Il sesto valore specifica la dimensione dell'intersezione di B e C. Per un grafico con solo due cerchi, non specificare alcun valore qui.
  • Il settimo valore specifica la dimensione dell'intersezione comune di A, B e C. Per un grafico con solo due cerchi, non specificare alcun valore qui.

Tieni presente che con i diagrammi di Venn, tutti i valori sono proporzionali, non assoluti. Ciò significa che un grafico con valori 10, 20, 30 sarà uguale a un grafico con valori 100.200.300 (se il tuo tipo di codifica accetta questi valori).

Descrizione Esempio

Un grafico di Venn a tre cerchi.

Diagramma di Venn con tre cerchi sovrapposti, uno blu e gli altri verdi
cht=v
chd=t:100,80,60,30,30,30,10

Per specificare un grafico a due cerchi, specifica il valore zero per il cerchio C e non specificare valori di sovrapposizione che includono C. Diagramma di Venn con tre cerchi sovrapposti, uno blu e gli altri verdi
cht=v
chd=t:100,100,0,50

Colori della serie chco

Puoi specificare i colori di tutte le serie, di ogni serie o di alcune serie utilizzando il parametro chco.

Sintassi

chco=<color_1>,...,<color_n>
<color>
Colore della serie, in formato esadecimale RRGGBB. Specifica colori diversi per serie diverse aggiungendo valori di colore separati da una virgola. Se hai meno colori rispetto alle serie, l'ultimo colore viene ripetuto, ma nei grafici di Venn, colori identici possono rendere il grafico difficile da leggere.
Descrizione Esempio
Un colore diverso per ogni cerchio. Diagramma di Venn con tre cerchi sovrapposti, uno blu e gli altri verdi
chco=FF6342,ADDE63,63C6DE
Se il numero di colori è inferiore ai cerchi, viene ripetuto l'ultimo colore specificato. Tuttavia, questo rende il grafico difficile da leggere.

Diagramma di Venn con tre cerchi sovrapposti, uno blu e gli altri verdi
chco=00FF00,0000FF

Funzionalità standard

Le altre funzionalità in questa pagina sono funzionalità standard dei grafici.

Formato colore

Specifica i colori utilizzando una stringa di 6 caratteri di valori esadecimali, oltre a due valori di trasparenza facoltativi, nel formato RRGGBB[AA]. Ad esempio:

  • FF0000 = rosso
  • 00FF00 = verde
  • 0000FF = blu
  • 000000 = nero
  • FFFFFF = bianco

AA è un valore di trasparenza facoltativo, dove 00 è completamente trasparente e FF è completamente opaco. Ad esempio:

  • 0000FFFF = blu fisso
  • 0000FF66 = blu trasparente

Torna all'inizio

Titolo grafico chtt, chts [Tutti i grafici]

Puoi specificare il testo del titolo, il colore e la dimensione dei caratteri del grafico.

Sintassi

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

 

chtt - Specifica il titolo del grafico.

<chart_title>
Titolo da mostrare per il grafico. Non puoi specificare dove viene visualizzata, ma puoi facoltativamente specificare le dimensioni e il colore del carattere. Utilizza un segno + per indicare gli spazi e una barra verticale ( |) per indicare le interruzioni di riga.

 

chts [Facoltativo] - Colori e dimensioni del carattere per il parametro chtt.

<color>
Il colore del titolo, in formato esadecimale RRGGBB. Il colore predefinito è nero.
<font_size>
Dimensione del carattere del titolo, in punti.
<opt_alignment>
[Facoltativo] Allineamento del titolo. Scegli uno dei seguenti valori stringa sensibili alle maiuscole: "l" (sinistra), "c" (centrata) "r" (destra). Il valore predefinito è "c".

 

Esempi

Descrizione Esempio

Un grafico con un titolo, che utilizza colori e dimensioni del carattere predefiniti.

Specifica uno spazio con un segno più (+).

Utilizza una barra verticale (|) per forzare un'interruzione di riga.

chts non è specificato qui.

Grafico a barre verticali con titolo
chtt=Site+visitors+by+month|
January+to+July

Un grafico con un titolo blu a 20 punti allineato a destra.

Grafico a barre verticali con blu, 20 pixel, titolo
chtt=Site+visitors
chts=FF0000,20,r

Torna all'inizio

Testo della legenda del grafico e stile chdl, chdlp, chdls [Tutti i grafici]

La legenda è una sezione laterale del grafico che fornisce una piccola descrizione testuale di ogni serie. Puoi specificare il testo associato a ogni serie in questa legenda e specificare la posizione nel grafico in cui deve essere visualizzata.

Consulta anche chma per scoprire come impostare i margini intorno alla legenda.

Nota sui valori di stringa: nelle stringhe di etichette sono ammessi solo caratteri sicuri per l'URL. Per sicurezza, esegui la codifica URL di tutte le stringhe contenenti caratteri non compresi nel set di caratteri 0-9a-zA-Z. Puoi trovare un codificatore di URL nella documentazione di Google sulla visualizzazione.

Sintassi

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

 

chdl - Il testo di ogni serie, da visualizzare nella legenda.

<data_series_label>
Il testo delle voci della legenda. Ogni etichetta si applica alla serie corrispondente nell'array chd. Utilizza un segno + per uno spazio. Se non specifichi questo parametro, il grafico non riceverà una legenda. Non è possibile specificare un'interruzione di riga in un'etichetta. In genere la legenda si espande per contenere il testo della legenda e l'area del grafico si riduce per inserirla.

chdlp - [Facoltativo] La posizione della legenda e l'ordine delle relative voci. Puoi specificare <position> e/o <label_order>. Se li specifichi entrambi, separali con una barra. Puoi aggiungere una "s" a qualsiasi valore se vuoi che le voci della legenda vuote in chdl vengano ignorate nella legenda. Esempi: chdlp=bv, chdlp=r, chdlp=bv|r, chdlp=bvs|r

<opt_position>
[Facoltativo] Specifica la posizione della legenda nel grafico. Per specificare una spaziatura interna aggiuntiva tra la legenda e l'area del grafico o il bordo dell'immagine, utilizza il parametro chma. Scegli uno dei seguenti valori:
  • b: legenda nella parte inferiore del grafico, voci legenda in una riga orizzontale.
  • bv: legenda nella parte inferiore del grafico, voci legenda in una colonna verticale.
  • t: legenda nella parte superiore del grafico, voci legenda in una riga orizzontale.
  • tv: legenda nella parte superiore del grafico, voci legenda in una colonna verticale.
  • r - [Predefinito] Legenda a destra del grafico e voci della legenda in una colonna verticale.
  • l: legenda a sinistra del grafico, voci legenda in una colonna verticale.
<opt_label_order>
[Facoltativo] L'ordine in cui le etichette vengono mostrate nella legenda. Scegli uno dei seguenti valori:
  • l: [valore predefinito per le legende verticali] Visualizza le etichette nell'ordine assegnato a chdl.
  • r: visualizza le etichette nell'ordine inverso a quello assegnato a chdl. È utile nei grafici a barre in pila per mostrare la legenda
    nello stesso ordine in cui appaiono le barre.
  • a - [Valore predefinito per le legende orizzontali] Ordinamento automatico: si intende indicativamente l'ordinamento in base alla lunghezza, dal valore più corto, misurato in blocchi da 10 pixel. Quando due elementi hanno la stessa lunghezza (divisi in blocchi da 10 pixel), verrà visualizzato per primo quello elencato per primo.
  • 0,1,2... - Ordine delle etichette personalizzate. Si tratta di un elenco di indici di etichette in base zero da chdl, separati da virgole.

chdls - [Facoltativo] Specifica il colore e la dimensione del carattere del testo della legenda.

<color>
Il colore del testo della legenda, in formato esadecimale RRGGBB.
<size>
La dimensione in punti del testo della legenda.

 

Esempi

Descrizione Esempio

Due esempi di leggende. Specifica il testo della legenda nello stesso ordine della serie di dati.

Grafico a linee rosso, blu e verde con legende corrispondenti

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

Diagramma di Venn con due cerchi più piccoli racchiusi da un cerchio più grande


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

Il primo grafico mostra le voci della legenda orizzontale (chdlp=t, il layout predefinito è orizzontale) e il secondo mostra le voci della legenda verticale inferiore (chdlp=bv).

Diagramma di Venn con due cerchi più piccoli racchiusi da un cerchio più grande
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


Diagramma di Venn con due cerchi più piccoli racchiusi da un cerchio più grande
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

Questo esempio mostra la modifica della dimensione del carattere.

Diagramma di Venn con due cerchi più piccoli racchiusi da un cerchio più grande
chdls=0000CC,14

Torna all'inizio

Margini del grafico chma [Tutti i grafici]

Puoi specificare la dimensione dei margini del grafico, in pixel. I margini vengono calcolati verso l'interno rispetto alla dimensione del grafico specificata (chs); l'aumento della dimensione del margine non aumenta la dimensione totale del grafico, ma piuttosto riduce l'area del grafico, se necessario.

Per impostazione predefinita, i margini sono l'importo rimasto dopo il calcolo delle dimensioni del grafico. Questo valore predefinito varia in base al tipo di grafico. I margini specificati sono un valore minimo. Se l'area del grafico lascia spazio per i margini, la dimensione del margine sarà quella restante. Non puoi ridurre i margini più piccoli del necessario per legende ed etichette. Ecco un diagramma che mostra le parti di base di un grafico:

Margine, area della legenda e area del grafico

I margini del grafico includono le etichette dell'asse e l'area legenda. L'area della legenda si ridimensiona automaticamente per adattarsi esattamente al testo, a meno che non specifichi una larghezza maggiore utilizzando chma, nel qual caso la dimensione del margine verrà ampliata di più, restringendo l'area del grafico. Non puoi ritagliare una legenda specificando una dimensione troppo piccola, ma puoi fare in modo che occupi più spazio del necessario.

Suggerimento:in un grafico a barre, se le barre hanno una dimensione fissa (impostazione predefinita), non è possibile ridurre la larghezza dell'area del grafico. Devi specificare una dimensione della barra più piccola o ridimensionabile utilizzando chbh.

 

Sintassi

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
<left_margin>, <left_margin>, <left_margin>, <left_margin>
Dimensioni minime del margine intorno all'area del grafico, in pixel. Aumenta questo valore per includere una spaziatura interna in modo da evitare che le etichette dell'asse tocchino i bordi del grafico.
<opt_legend_width>, <opt_legend_height>
[Facoltativo] Larghezza del margine intorno alla legenda, in pixel. Utilizzalo per evitare che la legenda si trovi in corrispondenza dell'area del grafico o dei bordi dell'immagine.

 

Esempi

Descrizione Esempio

In questo esempio, il grafico ha un margine minimo di 30 pixel su ogni lato. Poiché la legenda del grafico ha una larghezza superiore a 30 pixel, il margine sul lato destro è impostato sulla stessa larghezza della legenda del grafico e differisce dagli altri margini.

Le etichette dell'asse si trovano al di fuori dell'area del grafico e sono pertanto tracciate all'interno dello spazio a margine.

Grafico a linee con sfondo grigio e margini su ogni lato.
chma=30,30,30,30

Per aggiungere un margine intorno alla legenda, imposta un valore per i parametri <opt_legend_width> e <opt_legend_height>.

In questo esempio, la legenda ha una larghezza di circa 60 pixel. Se imposti <opt_legend_width> su 80 pixel, il margine si estende a 20 pixel al di fuori della legenda.

Grafico a linee con sfondo grigio e margini su ogni lato.
chma=20,20,20,30|80,20

Torna all'inizio

Riempimento sfondo chf [Tutti i grafici]

Puoi specificare i colori e gli stili di riempimento per l'area dei dati del grafico e/o per l'intero sfondo del grafico. I tipi di riempimento includono riempimenti a tinta unita, riempimenti a strisce e gradienti. Puoi specificare riempimenti diversi per aree diverse (ad esempio, l'intera area del grafico o solo l'area dei dati). Il riempimento dell'area del grafico sovrascrive il riempimento dello sfondo. Tutti i riempimenti vengono specificati utilizzando il parametro chf e puoi mescolare diversi tipi di riempimento (solidi, strisce, gradienti) nello stesso grafico separando i valori con una barra verticale ( | ). I riempimenti delle aree del grafico sovrascriveranno i riempimenti dello sfondo del grafico.

Riempimento continuo chf [Tutti i grafici]

Puoi specificare un riempimento in tinta unita per l'area dello sfondo e/o del grafico oppure assegnare un valore di trasparenza all'intero grafico. Puoi specificare più riempimenti utilizzando il carattere barra verticale (|). (Maps: solo sfondo).

Sintassi

chf=<fill_type>,s,<color>|...
<fill_type>
La parte del grafico che viene riempita. Specifica uno dei seguenti valori:
  • bg - Riempimento sfondo
  • c: riempimento dell'area del grafico. Non supportato per i grafici a mappa.
  • a: rendi l'intero grafico (sfondi inclusi) trasparente. Le prime sei cifre di <color> vengono ignorate e solo le ultime due (il valore di trasparenza) vengono applicate all'intero grafico e a tutti i riempimenti.
  • b<index>: riempimenti solidi a barre (solo grafici a barre). Sostituisci <index> con l'indice della serie delle barre da riempire con un colore a tinta unita. L'effetto è simile a specificare chco in un grafico a barre. Per un esempio, consulta Colori delle serie con grafico a barre.
s
Indica un riempimento in tinta unita o con trasparenza.
<color>
Il colore di riempimento, in formato esadecimale RRGGBB. Per le lucidi, le prime sei cifre vengono ignorate, ma devono essere comunque incluse.

 

Esempi

Descrizione Esempio

Questo esempio riempie lo sfondo del grafico con il grigio chiaro (EFEFEF).

Grafico a linee rosse con riempimento dell&#39;area nera.

chf=bg,s,EFEFEF

Questo esempio riempie lo sfondo del grafico con il grigio chiaro (EFEFEF) e riempie l'area del grafico in nero (000000).

Grafico a linee rosse con area grafico nera e sfondo grigio chiaro.

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

Questo esempio applica una trasparenza del 50% all'intero grafico (80 in esadecimale corrisponde a 128, ovvero circa il 50% di trasparenza). Nota che lo sfondo della cella della tabella viene mostrato attraverso il grafico.

Grafico a dispersione con punti in blu e trasparenza al 50%.

chf=a,s,00000080

Torna all'inizio

Riempimento di sfumatura chf [A linee, a barre, Google-o-meter, Radar, Scatter,Venn]

Puoi applicare uno o più riempimenti gradienti ad aree o sfondi del grafico. I riempimenti sfumati passano da un colore a un altro. (Grafici a torta, o-metro Google, solo sfondo).

Ogni riempimento sfumato specifica un angolo e due o più colori ancorati a una posizione specificata. Il colore varia a mano a mano che si sposta da un ancoraggio all'altro. Devi avere almeno due colori con valori <color_centerpoint> diversi, in modo che uno possa dissolversi nell'altro. Ogni gradiente aggiuntivo è specificato da una coppia <color>,<color_centerpoint>.

Sintassi

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
<fill_type>
L'area del grafico da riempire. Uno dei seguenti valori:
  • bg - Riempimento sfondo
  • c: riempimento dell'area del grafico.
  • b<index>: riempimenti a gradiente a barre (solo grafici a barre). Sostituisci <indice> con l'indice della serie delle barre da riempire con una sfumatura. Per un esempio, consulta Colori delle serie con grafico a barre.
lg
Specifica un riempimento gradiente.
<angolo>
Un numero che specifica l'angolo del gradiente da 0 (orizzontale) a 90 (verticale).
<color>
Il colore di riempimento, in formato esadecimale RRGGBB.
<color_centerpoint>
Specifica il punto di ancoraggio per il colore. Il colore inizierà a sbiadirsi da questo punto mentre si avvicina a un altro ancoraggio. L'intervallo di valori va da 0,0 (bordo inferiore o sinistro) a 1,0 (bordo superiore o destro), inclinato con l'angolo specificato da <angle>.

 

Esempi

Descrizione Esempio

L'area del grafico ha un gradiente lineare orizzontale, specificato con un angolo di zero gradi (0).

I colori sono pesca (FFE7C6), centrato sul lato sinistro (posizione 0.0) e blu (76A4FB) centrato sul lato destro (posizione 1.0).

Lo sfondo del grafico è disegnato in grigio (EFEFEF).

Grafico a linee grigio scuro con sfondo grigio chiaro e area grafico in gradiente lineare da bianco a blu da sinistra a destra

chf=
  c,lg,0,
  FFE7C6,0,
(pesca)
  76A4FB,1
(blu)

L'area del grafico ha un gradiente lineare diagonale (dal basso a sinistra in alto a destra), specificato con un angolo di quarantacinque gradi (45).

Pesca (FFE7C6) è il primo colore specificato. La parte in basso a sinistra del grafico è pesca pura.

Blu (6A4FB) è il secondo colore specificato. L'angolo in alto a destra del grafico è di colore blu puro. Nota come specifichiamo un offset di 0,75, per ottenere un picco di blu che si dissolve verso l'angolo in alto a destra.

Lo sfondo del grafico è disegnato in grigio (EFEFEF).

Grafico a linee grigio scuro con sfondo grigio chiaro e area grafico in gradiente lineare diagonale da bianco a blu da basso a sinistra in alto a destra

chf=
  c,lg,45,
  FFE7C6,0,
(pesca)
  76A4FB,0.75
(blu)

L'area del grafico ha un gradiente lineare verticale (dall'alto verso il basso), specificato con un angolo di novanta gradi (90).

Blu (76A4FB) è il primo colore specificato. La parte superiore del grafico è di colore blu puro.

Pesca (FFE7C6) è il secondo colore specificato. La parte inferiore del grafico è pesca pura.

Lo sfondo del grafico è disegnato in grigio (EFEFEF).

Grafico a linee grigio scuro con sfondo grigio chiaro e area grafico in gradiente lineare verticale da bianco a blu dal basso verso l&#39;alto

chf=
  c,lg,90,
  FFE7C6,0,
(pesca)
  76A4FB,0.5
(blu)

Torna all'inizio

 

Riempimento a righe chf [A linee, a barre, Google-o-meter, Radar, Scatter, Venn]

Puoi specificare un riempimento a strisce sullo sfondo per l'area del grafico o per l'intero grafico. (Grafici a torta, o-metro Google, solo sfondo).

Sintassi

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
<fill_type>
L'area del grafico da riempire. Uno dei seguenti valori:
  • bg - Riempimento sfondo
  • c - Riempimento dell'area del grafico
  • b<index>: riempimenti a strisce a barre (solo grafici a barre). Sostituisci <index> con l'indice della serie delle barre da riempire con strisce. Per un esempio, consulta Colori delle serie con grafico a barre.
ls
Specifica il riempimento a strisce lineari.
<angolo>
L'angolo di tutte le strisce rispetto all'asse Y. Utilizza 0 per le strisce verticali o 90 per le strisce orizzontali.
<color>
Il colore di questa striscia, in formato esadecimale RRGGBB. Ripeti <color> e <width> per ogni striscia aggiuntiva. Devi avere almeno due strisce. Le strisce si alternano fino a quando il grafico non viene riempito.
<width>
La larghezza di questa striscia, da 0 a 1, dove 1 rappresenta l'intera larghezza del grafico. Le strisce vengono ripetute fino a quando il grafico non viene riempito. Ripeti i colori <color> e <width> per ogni striscia aggiuntiva. Devi avere almeno due strisce. Le strisce si alternano fino a quando il grafico non viene riempito.

 

Esempi

Descrizione Esempio
  • bg,ls,0: le strisce sullo sfondo si riempiono con strisce a un angolo di zero gradi rispetto all'asse y (parallelo all'asse y). Le strisce riempiono lo sfondo del grafico e l'area del grafico.
  • CCCCCC,0.15: la prima striscia è di colore grigio scuro, larga il 15% rispetto al grafico.
  • FFFFFF,0.1: la seconda striscia è bianca, larga 10% rispetto al grafico.
Grafico a linee blu con strisce alternate grigie e bianche da sinistra a destra
chf=
  bg,ls,0,
  CCCCCC,0.15,
  FFFFFF,0.1
  • c,ls,90: area del grafico con strisce orizzontali a un'angolazione di novanta gradi dall'asse y. Le strisce riempiono l'area del grafico, ma lo sfondo del grafico è omesso.
  • 999999,0.25: la prima striscia è di colore grigio scuro, larga 25% rispetto al grafico.
  • CCCCCC,0.25: come la prima striscia, ma in grigio più chiaro.
  • FFFFFF,0.25: come la prima striscia, ma bianca.
Grafico a linee blu con strisce grigio scuro, grigio chiaro, bianco e grigio scuro dal basso verso l&#39;alto
chf=
  c,ls,90,
  999999,0.25,
  CCCCCC,0.25,
  FFFFFF,0.25

Torna all'inizio