Grafici a dispersione

   

Questo documento descrive come creare grafici a dispersione utilizzando l'API Chart.

Indice

Funzionalità specifiche del grafico

  1. Panoramica
  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. Stili ed etichette degli assi
    1. Assi visibili (chxt)
    2. Intervallo asse (chxr)
    3. Etichette asse personalizzate (chxl)
    4. Posizioni etichette asse (chxp)
    5. Stili etichette asse (chxs)
    6. Segni di graduazione asse (chxtc)
  5. Riempimento sfondo (chf)
    1. Riempimenti solidi (chf)
    2. Riempimento sfumatura (chf)
    3. Riempimenti a righe (chf)
  6. Linee della griglia (chg)
  7. Indicatori dinamici (chem)
  8. Indicatori forma (chm)
  9. Indicatori di valore di testo e dati (chm)
  10. Indicatori di intervallo (chm=r|R)
  11. Indicatori linea (chm=D)
  12. Funzioni dei dati (chfd)

Introduzione

Un grafico a dispersione (o grafico a dispersione) è un insieme di singoli punti in un grafico bidimensionale. Facoltativamente, puoi specificare la dimensione dei singoli punti. Un grafico a dispersione può accettare solo una serie di dati. I grafici a dispersione sono ideali per rilevare raggruppamenti o pattern in molti punti dati che hanno due variabili (se ne hai una sola, considera un grafico a linee).

Devi fornire almeno due serie di dati: la prima serie specifica le coordinate x, la seconda le coordinate y.

Facoltativamente, puoi fornire una terza serie per specificare singole dimensioni in punti. Senza questa serie, tutti i punti verranno rivolti per impostazione predefinita a 10 pixel.

Tieni presente che se utilizzi chm per modificare la forma o il colore dei punti dati, i punti vengono scalati in base alle dimensioni fornite in chm.

Tipi di grafici (cht)

Specifica un grafico a dispersione con questa sintassi:

Sintassi

cht=s
chd=<x_values>|<y_values>[|<optional_point_sizes>]
Descrizione Esempio

L'indicatore predefinito per i punti dati è un cerchio blu. Per utilizzare forme o colori diversi, specifica gli indicatori di forma utilizzando il parametro chm come descritto nel resto di questa sezione.

Questo grafico varia la dimensione in punti includendo una terza serie di dati.

Grafico a dispersione con punti dati predefiniti di cerchi blu di dimensioni diverse in base a un terzo set di dati
cht=s
chd=t:
  12,87,75,41,23,96,68,71,34,9|
  98,60,27,34,56,79,58,74,18,76|
  84,23,69,81,47,94,60,93,64,54

Se vuoi simulare più serie mediante l'uso di colori, utilizza il parametro chco per specificare i singoli colori dei punti e colora i punti in modo appropriato per simulare due o più serie distinte.

Questo grafico ha tre serie di dati: la prima contiene i valori x, la seconda i valori y corrispondenti e il terzo la dimensione in punti corrispondente.

Il valore chco specifica il colore dei punti. Quando utilizzi un delimitatore della barra verticale e hai meno colori dei punti, a ogni n° punto viene assegnato il n° colore corrispondente. In questo caso, il primo, il terzo, il quinto punto e così via sono rossi (FF0000), mentre il secondo, il quarto, il sesto e così via sono blu (0000FF).

La legenda viene assegnata utilizzando il parametro chdl; le voci della legenda vengono assegnate a ogni colore uno alla volta.

 Grafico a dispersione con due serie
chd=t:
  12,87,75,41,23,96,68,71,34,9|
  98,60,27,34,56,79,58,74,18,76|
  84,23,69,81,47,94,60,93,64,54
chco=
  FF0000|0000FF
chdl=
  Cats|Dogs

Per variare la forma dei punti, utilizza gli indicatori di forma. Gli indicatori di forma si comportano in modo leggermente diverso nei grafici a dispersione rispetto agli altri grafici, a seconda del loro ordine nel parametro chm:

  • Prima posizione dopo chm: è la forma predefinita per tutti i punti. Gli unici valori rispettati nella prima voce chm sono dimensioni, colore e forma; tutti gli altri valori vengono ignorati. Ad esempio, se specifichi chm=d,FF0000,0,3,15, questo verrà applicato a tutti i punti, anche se hai specificato solo il punto 15.
  • Seconda posizione e posizione successiva dopo chm: gli indicatori specificati nella seconda posizione e in quelle successive si comportano come gli indicatori per tutti gli altri tipi di grafici.

Ulteriori suggerimenti sull'uso degli indicatori di forma:

  • Se il primo indicatore chm non è un valore di dati (chm=N) o un indicatore di forma, il grafico utilizzerà la forma predefinita integrata descritta sopra.
  • Il tipo di indicatore predefinito viene applicato prima a tutti gli indicatori; in seguito, tutti gli indicatori applicabili a un punto vengono applicati nell'ordine specificato o nell'ordine z specificato (se presente). Pertanto, elenca gli indicatori ingranditi, in modo che quelli successivi mascherano quelli precedenti, oppure aggiungi un indicatore predefinito iniziale con dimensione 0 per cancellare tutte le proprietà degli indicatori predefiniti visibili. Se un indicatore più in basso è più grande o ha più angoli rispetto agli indicatori più alti, potresti vederlo apparire dietro gli altri indicatori.
  • Quando utilizzi gli indicatori di forma, il colore dell'indicatore sostituisce il parametro chco per i punti, ma i colori della legenda continuano a utilizzare il parametro chco.
  • Se specifichi sia un indicatore di forma sia un terzo set di dati, la dimensione dell'indicatore specificata viene ridimensionata in base all'intervallo di valori dei dati. Ad esempio: 
    chd=t:10,10,10|10,20,30|10,50,100
chm=d,676767,0,4,30
    In questo caso, la scala dei dati è 0-100 (scala in formato di testo semplice) e la dimensione dell'indicatore è 30 (l'ultimo valore nel parametro chm), quindi un valore di dati 100 indica un indicatore a 30 pixel, un valore di dimensione 50 indica un indicatore a 15 pixel e così via.
Grafico a dispersione con punti dati predefiniti di cerchi blu di dimensioni diverse in base a un terzo set di dati
chm=d,FF0000,0,-1,15
Imposta la forma predefinita sul rombo (d)

chm=
  d,676767,0,3,10|
  s,000000,0,15:,8
Il valore predefinito è rombo (d), con indice 15 e successivi dei quadrati (s) sovrapposti ai rombi.

chd=t:
  12,75,23,68,34,87,41,96,71,9|
  98,27,56,58,18,60,34,79,74,76
chco=FF0000|0000FF
chdl=Cats|Dogs
chm=
  o,FFFFFF,0,4,0|
  o,FF0000,0,0:4,8|
  d,0000FF,0,5:9,10

Puoi anche aggiungere un indicatore a linee (chm=D) per collegare alcuni o tutti i punti in un grafico a dispersione:

  • Il primo indicatore chm=N*x* mostra il valore dell'asse X di ogni punto dati.
  • Il secondo e il terzo indicatore chm=o e chm=s creano i cerchi e i quadrati
  • Il quarto indicatore chm=D traccia la linea che collega i quadrati verdi. Specifica il colore, la serie (0), i punti (3-8), lo spessore delle linee (1) e l'ordine z della linea.
chd=t:
  20,80,60,90,40,90,10,20|
  90,40,20,60,50,90,50,20
chm=
  N*x*,000000,0,,10|
  o,FF0000,0,0:2,10,-1|
  s,00FF00,0,3:8,10,-1|
  D,00000066,0,3:8,1,0

Ecco come creare una linea di tracciamento attraverso i punti senza fare affidamento sui punti visibili:

  • Specifica i punti di dispersione nei dati:
    chd=t:
      12,16,16,24,26,28,41,51,66,68|
      16,14,22,34,22,31,31,48,71,64
  • Aggiungi i punti che descrivono la linea di traccia alla fine dei dati (gli ultimi tre punti mostrati di seguito):
    chd=t:
      12,16,16,24,26,28,41,51,66,68,13,45,81|
      16,14,22,34,22,31,31,48,71,64,15,38,84
  • Aggiungi un indicatore di mascheramento per nascondere tutti i punti di dispersione: chm=o,0000FF,0,-1,0 (la dimensione dei punti zero rende tutti i punti invisibili).
  • Aggiungi un indicatore per mostrare tutti i punti di dispersione, tranne i punti delle linee di traccia (gli ultimi tre punti di dati): o,FF0000,0,0:9:,5
  • Infine, aggiungi un indicatore di linea e collegalo agli ultimi tre punti dei dati: D,000000,1,10:,1,-1 Si tratta di una linea nera larga 1 pixel, collegata a punti dati 10 e oltre. Gli abbiamo dato -1 z-index per posizionarlo dietro i punti di dispersione.

I grafici a dispersione non possono essere utilizzati come grafici composti, quindi non puoi aggiungere altre serie per descrivere la linea.

Non puoi specificare una linea tratteggiata con questo metodo, ma puoi specificare il colore e lo spessore della linea.

 Traccia una linea con punti nascosti:

chd=t:
  12,16,16,24,26,28,41,51,66,68,13,45,81|   16,14,22,34,22,31,31,48,71,64,15,38,84
chm=
  o,0000FF,0,-1,0|
  o,FF0000,0,0:9:,5|
  D,000000,1,10:,1,-1

Torna all'inizio

 

Colori della serie chco

Specifica il colore dei punti utilizzando il parametro chco. Puoi specificare un singolo colore per tutti i punti, una sfumatura o colori per singoli punti.

Sintassi

chco=<single_color>
  or
chco=<point_1_color>|...|<point_n_color>
  or
chco=<gradient_start>,...,<gradient_end> (only with third data series)
<color>
Colore dei punti, in formato esadecimale RRGGBB. Esistono diversi formati:
  • Specifica un singolo colore da applicare a tutti i punti.
  • Per applicare singoli colori a singoli punti, specifica un colore per punto, con un delimitatore barra verticale.
  • Se specifichi singoli colori dei punti, ma hai meno colori dei punti, a ogni n° punto viene assegnato il nth colore corrispondente. In questo modo puoi creare un grafico a dispersione con più serie.
  • Per applicare un gradiente di colore, devi includere una terza serie di dati (che determina le dimensioni dei punti). Includi due o più colori separati da virgole per applicare una mappa a gradiente di colore ai punti in base alla dimensione del punto.

Funzionalità standard

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

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

Stili ed etichette degli assi [A linee, a barre, Google-o-meter, Radar, a dispersione]

Puoi specificare quali assi visualizzare nel grafico e assegnare loro etichette, posizioni, intervalli e stili personalizzati.

Non tutti i grafici mostrano le linee degli assi per impostazione predefinita. Puoi specificare esattamente quali assi devono essere visualizzati nel grafico utilizzando il parametro chxt. Le linee dell'asse predefinite non mostrano numeri. Per mostrare i numeri, devi specificare un asse nel parametro chxt.

Puoi scegliere di visualizzare i numeri degli assi che riflettono i valori dei dati oppure puoi specificare assi personalizzati. Per impostazione predefinita, vengono visualizzati i valori numerici, con valori scalati da 0 a 100. Tuttavia, puoi modificare l'intervallo utilizzando chxr per visualizzare qualsiasi intervallo e puoi definire i valori (ad esempio, per mostrare simboli di valuta o posizioni decimali) utilizzando chxs.

Se scegli di utilizzare valori personalizzati, ad esempio "Lun, Mar, Mer", puoi utilizzare il parametro chxl. Per posizionare queste etichette in posizioni specifiche lungo l'asse, utilizza il parametro chxp.

Infine, puoi utilizzare i parametri chxs e chxtc per specificare colore, dimensione, allineamento e altre proprietà delle etichette dell'asse personalizzato e numerico.

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.

Questa sezione tratta i seguenti argomenti:

Assi visibili chxt

I grafici a barre, a linee, radar e a dispersione mostrano per impostazione predefinita uno o due assi, ma queste linee non includono valori. Per visualizzare i valori sulle linee degli assi o per cambiare gli assi visualizzati, devi utilizzare il parametro chxt. Per impostazione predefinita, i valori dell'asse vanno da 0 a 100, a meno che non li ridimensiona in modo esplicito utilizzando la proprietà chxr. Per nascondere tutte le linee degli assi in un grafico a linee, specifica :nda dopo il valore del tipo di grafico nel parametro cht (esempio: cht=lc:nda).

Per impostazione predefinita, gli assi superiore e inferiore non mostrano segni di graduazione in base ai valori, mentre li mostrano gli assi sinistro e destro. Puoi modificare questo comportamento utilizzando il parametro chxs.

Sintassi

chxt=
  <axis_1>
    ,...,
  <axis_n>
<axis>
Un asse da mostrare nel grafico. Gli assi disponibili sono:
  • x - Asse x inferiore
  • t - Asse x superiore [non supportato da Google-o-Meter]
  • y: Asse Y sinistro
  • r - Asse y destro [non supportato da Google-o-Meter]

Puoi specificare più assi dello stesso tipo, ad esempio: cht=x,x,y. In questo modo, due insiemi di assi x vengono impilati nella parte inferiore del grafico. Ciò è utile quando aggiungi etichette personalizzate lungo un asse che mostra valori numerici (vedi l'esempio di seguito). Gli assi vengono tracciati dall'interno verso l'esterno, quindi se hai x,x, la prima x si riferisce alla copia più interna, la x successiva si riferisce alla copia successiva verso l'esterno e così via.

 

Esempi

Descrizione Esempio

Questo esempio mostra un grafico a linee con asse X, Y, superiore (t) e destro (r).

Poiché non vengono specificate etichette, il grafico mostra un intervallo predefinito da 0 a 100 per tutti gli assi.

Tieni presente che, per impostazione predefinita, gli assi superiore e inferiore non mostrano segni di graduazione accanto alle etichette.

Grafico a linee con le etichette: 0, 20, 40, 60, 80 e 100 a sinistra e a destra e le etichette: 0, 25, 50, 75 e 100 sopra e sotto
chxt=x,y,r,t
Puoi includere più insiemi di etichette per ogni asse includendo lo stesso valore più di una volta. Questo esempio mostra due serie di assi x e due serie di assi y. Ciò non è particolarmente utile quando si utilizzano solo le etichette dell'asse predefinite, come mostrato qui. Tuttavia, puoi specificare etichette personalizzate per ogni copia di ciascun asse utilizzando il parametro 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=200x125 />x,

<img <code="" dir="ltr" src="/static/chart/image/images/chart_42.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200xl=25%

Questo esempio mostra un grafico a barre orizzontali con assi x, y, t superiore e r destro.

Le etichette dell'asse sono omesse, pertanto l'API Chart visualizza un intervallo da 0 a 100 per l'asse x e per l'asse t.

L'intervallo per l'asse y e per l'asse r è determinato dal numero di barre. In questo caso, ci sono cinque barre, quindi l'API Chart visualizza un intervallo da 0 a 4. La prima etichetta è centrata alla base della prima barra, la seconda etichetta è centrata alla base della seconda barra e così via.

Grafico a linee con le etichette: 0, 20, 40, 60, 80 e 100 a sinistra e a destra e le etichette: 0, 25, 50, 75 e 100 sopra e sotto
chxt=x,y,r,t
Puoi eliminare gli assi predefiniti in un grafico a linee specificando :nda dopo il tipo di grafico. Grafico a linee con assi nascosti
cht=lc:nda

Torna all'inizio

Intervallo asse chxr

Puoi specificare l'intervallo di valori che vengono visualizzati su ciascun asse in modo indipendente utilizzando il parametro chxr. Tieni presente che questa operazione non modifica solo la scala degli elementi del grafico, ma solo la scala delle etichette dell'asse. Se vuoi che i numeri degli assi descrivano i valori effettivi dei dati, imposta <start_val> e <end_val> rispettivamente sui valori inferiore e superiore dell'intervallo di formato dei dati. Per ulteriori informazioni, consulta Scalabilità dell'asse.

Devi rendere visibile un asse utilizzando il parametro chxt se vuoi specificarne l'intervallo.

Per specificare i valori personalizzati dell'asse, utilizza il parametro chxl.

Sintassi

Separa gli intervalli di etichette di più assi utilizzando il carattere barra verticale ( | ).

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<axis_index>
A quale asse applicare le etichette. Si tratta di un indice in base zero nell'array degli assi specificato da chxt. Ad esempio, l'asse r è 1 in chxt=x,r,y.
<start_val>
Un numero che definisce il valore basso dell'asse.
<end_val>
Un numero che definisce il valore alto di questo asse.
<opt_step>
[Facoltativo] Il passo di conteggio tra i segni di graduazione sull'asse. Non esiste un valore predefinito per i passaggi. Questo viene calcolato per provare a mostrare un insieme di etichette ben distanziate.

 

Esempi

Descrizione Esempio

Questo esempio mostra gli assi y sinistro e destro (y e r) e un asse x (x).

Ogni asse ha un intervallo definito. Poiché non vengono specificate etichette o posizioni, i valori vengono presi dall'intervallo specificato e sono distribuiti uniformemente all'interno di quell'intervallo. Nel grafico a linee, i valori sono distribuiti uniformemente lungo l'asse x.

La direzione dell'asse è invertita per l'asse r (indice 2), perché il primo valore (1000) è maggiore dell'ultimo (0).


chxt=x,y,r
chxr=
  0,0,500|
  1,0,200|
  2,1000,0

In questo esempio, i valori sono specificati per l'asse x.

Le etichette dell'asse sono distribuite uniformemente lungo l'asse. Per il parametro <opt_step> è specificato un valore pari a cinque (5).

Grafico a barre con 200, 300 e 400 sull&#39;asse x chxt=x
chxr=0,10,50,5

Torna all'inizio

Etichette asse personalizzate chxl

Puoi specificare le etichette personalizzate dell'asse delle stringhe su qualsiasi asse utilizzando il parametro chxl. Puoi specificare tutte le etichette che vuoi. Se visualizzi un asse (utilizzando il parametro chxt) e non specifichi etichette personalizzate, verranno applicate le etichette numeriche standard. Per specificare un intervallo numerico personalizzato, utilizza invece il parametro chxr.

Per impostare posizioni specifiche lungo l'asse delle etichette, utilizza il parametro chxp.

Sintassi

Specifica un set di parametri per ogni asse da etichettare. Separa più insiemi di etichette utilizzando il carattere barra verticale ( | ).

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>
<axis_index>
A quale asse applicare le etichette. Questo è un indice nell'array di parametri chxt. Ad esempio, se disponi di chxt=x,x,y,y, l'indice 0 corrisponde al primo asse X e 1 corrisponde al secondo asse X.
<label_1>| ... |<label_n>
Una o più etichette da posizionare lungo questo asse. Possono essere valori di stringhe o numerici; le stringhe non devono essere racchiuse tra virgolette. label_1 è mostrata nella posizione più bassa sull'asse, mentre label_n viene mostrata nella posizione più alta. Le etichette aggiuntive vengono distanziate uniformemente tra loro. Indica gli spazi con un segno +. Non è possibile specificare un'interruzione di riga in un'etichetta. Separa le etichette con una barra verticale. Nota: non posizionare una barra verticale dopo l'etichetta finale nel parametro chxl.

 

Esempi

Descrizione Esempio

Questo grafico mostra come aggiungere etichette personalizzate a due assi. Nota come i valori sono distribuiti uniformemente e come l'ultimo valore chxl non termina con una barra verticale.

 Grafico a linee con 0 e 100 a sinistra, A, B e C a destra, gen, luglio, gennaio, luglio e gennaio sugli assi x e 2005, 2006 e 2007 in basso
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

Questo esempio include le etichette degli assi y sinistro e destro (y e r). Include inoltre due insiemi di valori per l'asse x (x). Potresti aggiungere segni di graduazione sull'asse y utilizzando chxs.

Grafico a linee con 0 e 100 a sinistra, A, B e C a destra, gen, luglio, gennaio, luglio e gennaio sugli assi x e 2005, 2006 e 2007 in basso
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

Questo esempio include le etichette degli assi Y sinistro e destro (y e r). Include anche due insiemi di valori per l'asse x (x). Nota le etichette vuote per l'insieme inferiore dell'asse x, utilizzate per distanziare i valori.

In questo esempio vengono utilizzati i valori predefiniti per le etichette dell'asse Y sinistro.

Grafico a barre con 0 e 100 a sinistra, A, B e C a destra, Gen, Luglio, Gen, Luglio e Gen sugli assi X e 2005, 2006 e 2007 in basso
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

Se vuoi aggiungere un'etichetta generica per descrivere un intero asse (ad esempio, per etichettare un asse come "costo" e un altro "studente"), utilizza la proprietà chxt per aggiungere un altro asse su ogni lato, poi utilizza chxl per aggiungere una singola etichetta personalizzata su ogni lato e chxp per distanziare l'asse al centro dell'asse.
chxt=x,x,y,y
chxl=1:|Martinis|3:|Score
chxp=1,50|3,50

Torna all'inizio

Posizioni etichetta asse chxp

Puoi specificare quali etichette dell'asse mostrare, utilizzando le etichette predefinite o le etichette personalizzate specificate mediante chxl. Se non specifichi posizioni esatte utilizzando questo parametro, le etichette verranno distanziate in modo uniforme e con un valore di passo predefinito lungo gli assi. Se non specifichi chxl, le etichette del segno di spunta saranno i valori predefiniti (di solito i valori dei dati o i numeri a barre nei grafici a barre).

Sintassi

Separa più set di posizionamento utilizzando il carattere barra verticale (|).

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>
<axis_index>
L'asse per il quale stai specificando le posizioni. Questo è un indice nell'array di parametri chxt. Ad esempio, se disponi di chxt=x,x,y,y, l'indice 0 corrisponde al primo asse X, 1 al secondo asse X e così via.
<label_1_position>,...,<label_n_position>
La posizione dell'etichetta lungo l'asse. Si tratta di un elenco di valori numerici separati da virgole, in cui ogni valore imposta la posizione dell'etichetta corrispondente nell'array chxl: la prima voce si applica alla prima etichetta e così via. La posizione è un valore nell'intervallo per quell'asse. Tieni presente che il valore sarà sempre 0-100, a meno che tu non abbia specificato un intervallo personalizzato utilizzando chxr. Devi avere tante posizioni quante sono le etichette per quell'asse.

 

Esempi

Descrizione Esempio

Questo esempio include le etichette dell'asse R in posizioni specificate nel grafico. Il testo dell'etichetta viene specificato utilizzando il parametro chxl.

Le etichette con la posizione specificata 0 vengono posizionate in basso all'asse y o r oppure a sinistra dell'asse x o t.

Le etichette con la posizione specificata 100 vengono posizionate nella parte superiore dell'asse y o r oppure a destra dell'asse x o t.

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

Questo esempio mostra la visualizzazione dei valori predefiniti delle etichette, ma solo in posizioni specificate.

chxp=1,10,35,75: l'asse y dovrebbe mostrare solo tre etichette: 10, 35 e 75. Poiché non è specificato alcun testo di etichetta personalizzata, questi valori dell'asse vengono mostrati. Nota come non è necessario separare uniformemente le etichette quando utilizzi chxp. Se chxp non fosse stato specificato qui, la distanza predefinita del valore dell'etichetta sull'asse y sarebbe ogni 20 unità, come mostrato nel secondo grafico.

 Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75
Grafico a linee con posizioni degli assi predefinite.
chxt=x,y
chxp non specificato

Torna all'inizio

Stili delle etichette asse chxs

Puoi specificare la dimensione, il colore e l'allineamento del carattere per le etichette dell'asse, sia per le etichette personalizzate sia per i valori predefiniti delle etichette. Tutte le etichette sullo stesso asse hanno lo stesso formato. Se disponi di più copie di un asse, puoi formattarle in modo diverso. Puoi anche specificare il formato di una stringa di etichette, ad esempio per mostrare simboli di valuta o zeri finali.

Per impostazione predefinita, gli assi superiore e inferiore non mostrano segni di graduazione in base ai valori, mentre gli assi sinistro e destro li mostrano.

Sintassi

I valori di più assi devono essere separati mediante una barra verticale (|).

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>
L'asse a cui si applica. Si tratta di un indice in base zero nel parametro chxt.
<opt_format_string>
[Facoltativo] Si tratta di una stringa di formato facoltativa che, se utilizzata, segue subito dopo il numero di indice dell'asse senza una virgola intermedia. Inizia con una lettera letterale N seguita dai seguenti valori, tutti facoltativi: La sintassi della stringa di formattazione è la seguente:
       N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
Ecco il significato di ogni elemento:
  • <preceding_text>: testo letterale che precede ogni valore.
  • *...*: un blocco facoltativo racchiuso tra due asterischi letterali, in cui puoi specificare i dettagli di formattazione per i numeri. I seguenti valori sono supportati e sono tutti facoltativi:
    • <number_type>: il formato numerico per i valori numerici. Scegli una delle seguenti opzioni:
      • f: formato con virgola mobile [predefinito]. Valuta anche la possibilità di specificare la precisione con il valore <decimal_places>.
      • p: formato percentuale. Viene aggiunto automaticamente il simbolo %. Nota: quando utilizzi questo formato, i valori dei dati compresi tra 0,0 e 1,0 vengono mappati a 0-100% (ad esempio, 0,43 verrà mostrato come 43%).
      • e - Formato di notazione scientifica.
      • c<CUR>: formatta il numero nella valuta specificata, con l'indicatore di valuta appropriato. Sostituisci <CUR> con un codice valuta di tre lettere. Esempio: cEUR per gli euro. Puoi trovare un elenco di codici sul sito web ISO, anche se non tutti i simboli sono supportati.
    • <decimal_places>: un numero intero che specifica quante posizioni decimali mostrare. Il valore viene arrotondato (non troncato) a questa lunghezza. Il valore predefinito è 2.
    • z: vengono visualizzati gli zeri finali. Il valore predefinito è no.
    • s: vengono visualizzati i separatori dei gruppi. Il valore predefinito è no.
    • x o y: visualizza i dati della coordinata x o y, come specificato. Il significato dei dati x varia in base al tipo di grafico: fai delle prove con il grafico per capire cosa significano. Il valore predefinito è "y".
  • <following_text>: testo letterale da seguire ogni valore.
<opt_label_color>
Il colore da applicare al testo dell'asse (ma non alla linea dell'asse), in formato esadecimale RRGGBB. Il colore della linea dell'asse viene specificato separatamente utilizzando opt_axis_color. L'impostazione predefinita è in grigio.
<opt_font_size>
[Facoltativo] specifica la dimensione del carattere in pixel. Questo parametro è facoltativo.
<opt_alignment>
[Facoltativo] Allineamento delle etichette. Per gli assi superiore o inferiore, descrive in che modo l'etichetta si allinea al segno di spunta sopra o sotto; per gli assi sinistro o destro, descrive in che modo l'etichetta si allinea all'interno del riquadro di delimitazione, che tocca l'asse. Specifica uno dei seguenti numeri:
  • -1 - In alto o in basso: le etichette si trovano a destra dei segni di graduazione; A sinistra o a destra: le etichette sono allineate a sinistra nell'area. Predefinita per le etichette dell'asse R.
  • 0: in alto o in basso: le etichette sono centrate sui segni di graduazione; a sinistra o a destra: le etichette sono centrate nella loro area. Predefinita per le etichette degli assi X e T.
  • 1 - In alto o in basso: le etichette sono a sinistra dei segni di graduazione; A sinistra o a destra: le etichette sono allineate a destra nell'area. Valore predefinito per le etichette dell'asse y.
<opt_axis_or_tick>
[Facoltativo; non supportato in Google-o-meter] Indica se mostrare segni di graduazione e/o linee degli assi per questo asse. I segni di graduazione e le linee degli assi sono disponibili solo per gli assi più interni (ad esempio, non sono supportati per gli assi esterni di due assi X). Utilizza uno dei seguenti valori:
  • l ("L" minuscola) - Traccia solo la linea dell'asse.
  • t: traccia solo i segni di graduazione. I segni di graduazione sono le piccole linee accanto alle etichette dell'asse.
  • lt - [Predefinito] Disegna una linea dell'asse e segni di graduazione per tutte le etichette.
  • _: (trattino basso): non vengono tracciate linee dell'asse né segni di graduazione. Se vuoi nascondere una linea dell'asse, utilizza questo valore.
<tick_color>
[Facoltativo; non supportato in Google-o-meter] Il colore del segno di spunta in formato esadecimale RRGGBB. L'impostazione predefinita è in grigio.
<opt_axis_color>.
[Facoltativo] Il colore della linea dell'asse, in formato esadecimale RRGGBB. L'impostazione predefinita è in grigio.

 

Esempi

Descrizione Esempio

La dimensione e il colore del carattere sono specificati per il secondo asse X (gennaio, feb, mar).

Grafico a linee con i valori minimo, medio e massimo a sinistra, 0, 1, 2, 3 e 4 a destra, da 0 a 100 sull&#39;asse x e gennaio, febbraio e marzo in blu sotto

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
     1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13,0,t

Le dimensioni, il colore e l'allineamento del carattere sono specificati per l'asse Y destro. I segni di spunta, ma non le linee degli assi, sono tracciati.

Grafico a linee con numeri da 0 a 100 lungo l&#39;asse x, gennaio, febbraio, marzo sotto, da 0 a 4 sull&#39;asse y e segni di spunta rossi con testo blu per i valori minimo, medio e massimo a destra.

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
     2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

Questo grafico include tre set di dati e mostra tre insiemi di etichette degli assi, una per serie. Ogni insieme di etichette viene formattato utilizzando una stringa di formattazione personalizzata, come descritto qui:

  • 0N*e,000000|
    • 0 indica la prima serie di dati
    • N indica una stringa di formattazione
    • * indica l'inizio degli indicatori di formato
    • e indica la notazione scientifica
    • * indica la fine degli indicatori di formato
    • 000000 indica testo in nero.
  • 1N*cUSD*Mil,FF0000|
    • 1 indica la seconda serie
    • N indica una stringa di formattazione
    • * indica l'inizio degli indicatori di formato
    • c indica un indicatore di valuta
    • USD specifica il dollaro statunitense come indicatore di valuta da utilizzare
    • * indica la fine degli indicatori di formato
    • Mil è un valore letterale che segue la stringa
    • FF0000 indica il testo in rosso.
  • 2N*sz2*,0000FF
    • 2 indica la terza serie
    • N indica una stringa di formattazione
    • * indica l'inizio degli indicatori di formato
    • s consente di mostrare gli indicatori di raggruppamento (nelle impostazioni internazionali dell'inglese americano, che prevede una virgola ogni tre zeri)
    • z2 significa che mostra due zeri finali
    • 0000FF indica testo blu.

Gli intervalli delle etichette dell'asse vengono impostati utilizzando il parametro chxr (axis_index, start, end, step). Se non viene configurato, il valore predefinito sarà 0-100.
chd=s:
  984sttvuvkQIBLKNCAIi,
  DEJPgq0uov17zwopQODS,
  AFLPTXaflptx159gsDrn
chxr=
  0,0,1000000,250000|
  1,0,60|
  2,0,5000
chxs=
  0N*e,000000|
  1N*cUSD*Mil,FF0000|
  2N*sz2*,0000FF

Torna all'inizio

Stili segni di spunta asse chxtc

Puoi specificare segni di spunta lunghi per assi specifici. In genere, viene utilizzato per estendere un segno di spunta su tutta la lunghezza di un grafico. Utilizza il parametro chxs per modificare il colore del segno di spunta.

I valori di più assi devono essere separati mediante una barra verticale (|). I valori all'interno di una serie devono essere separati da una virgola.

Sintassi

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>
<axis_index>
L'asse a cui si applica. Si tratta di un indice in base zero nel parametro chxt. Separa i valori dei diversi assi utilizzando un delimitatore a barre.
<tick_length_1>,...,<tick_length_n>
Lunghezza dei segni di graduazione su quell'asse, in pixel. Se viene specificato un singolo valore, questo verrà applicato a tutti i valori. Se viene specificato più di un valore, i segni di graduazione dell'asse ciclico attraverso l'elenco di valori per quell'asse. I valori positivi vengono disegnati al di fuori dell'area del grafico e ritagliati dai bordi del grafico. Il valore positivo massimo è 25. I valori negativi vengono tracciati all'interno dell'area del grafico e ritagliati dai bordi dell'area.

 

Esempi

Descrizione Esempio

Esempio di utilizzo di chxtc per creare lunghi segni di graduazione rossi. La lunghezza del segno di spunta in questo caso supera la larghezza dell'area del grafico, ma viene ritagliata per adattarla al grafico.

  • chxt=x,y,r,x: mostra un asse sinistro, uno destro e due assi inferiori.
  • chxl=2:|min|average|max|3:|Jan|Feb|Mar - Il testo dell'etichetta assegnato all'asse "r" (lato destro) e agli assi X esterni.
  • chxp=2,10,35,95 - Posizioni delle etichette personalizzate lungo l'asse r (indice=2) delle tre etichette.
  • chxs=2,0000dd,13,-1,t,FF0000: stili di etichetta dell'asse per l'asse r: colore del testo, dimensione del testo, allineato a sinistra, con segni di spunta rossi.
  • chxtc=1,10|2,-180: lunghezze di graduazione degli assi per gli assi y e r. Il primo valore specifica segni di graduazione di 10 pixel, fuori dall'asse. Il secondo valore specifica i segni di spunta lunghi 180 pixel all'interno dell'asse; il numero negativo indica che il segno di spunta entra all'interno dell'asse e che viene ritagliato per adattarlo al grafico.

Grafico a linee con numeri da 0 a 100 lungo l&#39;asse x, gennaio, febbraio, marzo sotto, da 0 a 4 sull&#39;asse y e lunghi segni di spunta rossi con testo blu per i valori minimo, medio e massimo a destra.

chxt=x,y,r,x
chxl=
  2:|min|average|max|
  3:|Jan|Feb|Mar
chxp=2,10,35,95
chxs=
  2,0000dd,13,-1,t,FF0000
chxtc=1,10|2,-180
Questo grafico mostra le lunghezze dei segni di graduazione alternati. chxtc specifica due valori di lunghezza dei segni di graduazione per l'asse y (5 e 15) e i segni di graduazione riportati nel grafico si alternano tra i due valori.
chxt=x,y
chxtc=
  1,5,15

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

Linee della griglia chg [A linee, a barre, Radar, a dispersione]

Puoi specificare le linee della griglia continue o tratteggiate nel grafico utilizzando il parametro chg.

Questo parametro non consente di specificare lo spessore o il colore delle linee. Per scoprire altri modi per creare linee sul grafico, consulta gli indicatori di forma (chm digita h, H, v o V), gli indicatori di intervallo (chm) e i segni di graduazione asse (chxtc).

Sintassi

chg=
  <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>
<x_axis_step_size>, <y_axis_step_size>
È utile per calcolare quante linee della griglia x o y mostrare sul grafico. 100 / step_size = quante linee della griglia nel grafico. Pertanto, 20,25 significa 5 linee verticali della griglia e 4 linee orizzontali della griglia.
<opt_dash_length>, <opt_space_length>
[Facoltativo] Utilizzato per definire le linee della griglia tratteggiate. Il primo parametro è la lunghezza di ogni trattino di linea, in pixel. Il secondo parametro è la spaziatura tra i trattini, in pixel. Specifica 0 nel campo <opt_space_length> di una linea continua. I valori predefiniti sono 4,1.
<opt_x_offset>,<opt_y_offset>
[Facoltativo] Il numero di unità, in base alla scala del grafico, per sfalsare rispettivamente le linee della griglia x e y. Possono essere valori positivi o negativi. Se specifichi questo valore, devi specificare anche tutti i valori precedenti. I valori predefiniti sono 0,0.

 

Esempi

Descrizione Esempio

Questi esempi utilizzano solo i parametri <x_axis_step_size> e <y_axis_step_size>. Per impostazione predefinita, l'API Chart visualizza una griglia tratteggiata.

 Grafico a linee con 5 linee della griglia tratteggiate verticali e due orizzontali di colore grigio chiaro
chg=20,50
Grafico a linee con 5 linee della griglia tratteggiate verticali e due orizzontali di colore grigio chiaro
chg=20,50

Questo esempio utilizza spazi più ampi per visualizzare linee della griglia più chiare (1,5).

 Grafico a linee con 5 linee della griglia tratteggiate verticali e due orizzontali sbiadite, grigio chiaro
chg=20,50,1,5

Per visualizzare le linee continue della griglia, specifica zero (0) per il parametro <opt_space_length>.

Questo grafico specifica anche un offset dell'asse x pari a 10.

 Grafico a linee con 5 linee verticali e due orizzontali grigliate di colore grigio chiaro
chg=20,50,1,0,10

Questo grafico mostra un offset dell'asse x di 10 e un offset dell'asse y di 20.

 Grafico a linee con 5 linee verticali e due orizzontali grigliate di colore grigio chiaro
chg=20,50,3,3,10,20

Torna all'inizio

Indicatori di icone dinamiche chem [a barre, a linee, radar, a dispersione]

Crea il grafico e specifica una o più icone dinamiche come valori chimici. La sintassi di chem è la seguente. Tutti gli elementi delimitati da punto e virgola in viola sono facoltativi e possono essere omessi completamente nell'URL. Puoi includere più indicatori includendo più stringhe di sintassi delimitate da un carattere |. Per scoprire di più sulle icone dinamiche, consulta la pagina delle icone dinamiche.

Puoi anche incorporare un grafico all'interno di un altro grafico sotto forma di icona dinamica. Consulta la sottosezione Grafici incorporati di seguito.

chem=
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
   |...|
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
s=<icon_string_constant>
Una costante dell'indicatore di stringa per un'icona dinamica, dalla pagina delle icone dinamiche. Questa costante è quasi uguale al parametro chst per le icone indipendenti. Tuttavia, nel punto in cui la stringa dell'icona indipendente inizia con "d_", devi rimuovere il prefisso per ottenere l'indicatore di icona dinamica equivalente. Esempio: icona indipendente: d_bubble_icon_text_small; indicatore icona dinamica equivalente: bubble_icon_text_small.
d=<marker_data_string>
I dati richiesti per questo particolare tipo di indicatore. Contiene la stessa stringa che verrebbe utilizzata in un parametro chld per un'icona indipendente equivalente, tranne che tutti i delimitatori | devono essere sostituiti da virgole (ricorda di utilizzare le virgole invece degli indicatori barra verticale per il testo multilinea). Tieni presente che all'interno della stringa di dati devi anche eseguire l'interpretazione letterale dei seguenti caratteri con il segno @: barra verticale ( | ) , at ( @ ), uguale a ( = ), virgola ( , ), punto e virgola ( ; ). Esempi: hello@,+world, 5@@10+cents+each.
ds=<which_series>
[Facoltativo] L'indice in base zero della serie di dati a cui appartiene questo indicatore. Il valore predefinito è 0.
dp=<which_points>
[Facoltativo] Specifica quali punti dati vengono utilizzati per tracciare gli indicatori. Il valore predefinito è 0 (primo punto della serie). Utilizza uno dei seguenti formati:
  • n.d: su quale punto dati tracciare l'indicatore, dove n.d è l'indice in base zero nella serie. Se specifichi un valore non intero, la frazione indica un punto intermedio calcolato. Ad esempio, 3,5 indica a metà strada tra il punto 3 e il punto 4.
  • range,<start>,<end>,<step>: traccia un indicatore su ogni punto dati del passaggio in un intervallo compreso tra inizio e fine inclusi. I valori di inizio e fine sono valori di indice e possono essere numeri in virgola mobile per indicare i valori intermedi. Tutti i valori sono facoltativi. I valori predefiniti sono: start=0, end=ultimo elemento, step=1. Se salti un valore, devi comunque includere virgole intermedie, ma non le virgole finali vuote. Esempi: dp=range,0,4 disegna un indicatore sugli elementi da 0 a 4; dp=range,5,10,2 disegna un indicatore sugli elementi 5, 7 e 9; dp=range,2 disegna punti sul terzo punto e quelli successivi; dp=range,3,,1.5 disegna indicatori ogni 1, 5 punti dati dal quarto all'ultimo.
  • all - Disegna un indicatore su ogni elemento. Equivale a range,0,end_index. Esempio: dp=all
  • every,n - Disegna un indicatore su ogni ennesimo indicatore. Esempio: dp=every,2 disegna un indicatore sugli elementi 0, 2 e 4.
py=<z_order>
[Facoltativo] Il livello su cui disegnare l'indicatore, rispetto ad altri indicatori e a tutti gli altri elementi del grafico. Si tratta di un numero in virgola mobile compreso tra -1,0 e 1,0 inclusi, dove -1,0 è la parte inferiore e 1,0 è la parte superiore. Gli elementi del grafico (linee e barre) sono appena sotto lo zero. Se due indicatori hanno lo stesso valore, vengono disegnati nell'ordine indicato dall'URL. Il valore predefinito è 0,0 (appena sopra gli elementi del grafico).
po=<x,y>
[Facoltativo] Una posizione assoluta sul grafico in cui disegnare l'indicatore. x e y sono due numeri in virgola mobile, dove 0,0,0,0 è l'angolo in basso a sinistra e 1,0,1,0 è l'angolo in alto a destra.
of=<x_offset,y_offset>
[Facoltativo] Un numero di pixel per compensare l'icona rispetto alla sua posizione normale. x_offset e y_offset sono numeri interi positivi o negativi. È importante specificare questo valore in un'icona dinamica incorporata, perché l'indicatore sarà centrato verticalmente e orizzontalmente sul punto, il che significa che il punto probabilmente non sarà allineato con l'indicatore di dati. Un buon offset per un perno verticale è of=0,22, mentre un buon offset per un perno inclinato è of=-12,20 o of=12,20, a seconda della direzione dell'inclinazione, ma potresti dover fare diverse prove. Il valore predefinito è 0,0.

 

Esempi

Descrizione Esempio
Ecco alcuni esempi della stessa icona dinamica creata come immagine indipendente e utilizzata come indicatore in un grafico a linee.

Grafico 1: https://chart.googleapis.com/chart?chs=300x140&cht=lc&chco=FF9900,224499&
chd=t:75,74,66,30,10,5,3,1&chls=1|1&
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0&chm=v,ccccFF,0,::.2,2

Grafico 2: https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

Grafico a linee con indicatore dinamico dell&#39;icona.
chem=
  y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0

Stesso indicatore icona dinamico dell&#39;immagine indipendente.


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

Tieni presente che un indicatore dinamico dell'icona verrà centrato sul punto orizzontalmente e verticalmente. Pertanto, se utilizzi un'icona dinamica con una coda, quest'ultima non sarà sul punto del grafico, ma sarà al centro dell'indicatore. Il primo grafico centra il segno sul punto dati 3, il che in realtà pone la coda un po' a destra del segno sulla linea.

Il secondo grafico utilizza il valore of per spostare la coda dell'indicatore sopra il punto dati desiderato. Un buon offset per un pin obliquo è -12,20.
chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1

chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1;
  of=-12,0

Per includere più icone dinamiche, ripeti la stringa di sintassi, delimitata dal carattere |.

Questo esempio mostra un intervallo, nonché due singoli indicatori.

Nota come i perni verticali sono spostati di 0,22 e il perno obliquo ha un offset di 12,20 per allineare i punti dei pin con le serie che descrivono.
chem=
  y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|
  y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|
  y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5
Ciò dimostra un indicatore di testo multilinea. L'indicatore deve essere spostato dopo l'aggiunta del testo, perché la bolla si ridimensiona per adattarsi al testo e viene ricentrato sul grafico. Nota come le nuove righe del testo sono indicate da virgole nella stringa di dati d.
chem=y;
  s=bubble_texts_big;
  d=bbbr,FFC6A5,000000,Outlier,Forgot+to+feed;
  ds=0;
  dp=13;
  of=-120,2

Grafici incorporati

Puoi incorporare un grafico all'interno di un altro utilizzando la sintassi delle icone dinamiche.

Sono disponibili due stili di indicatori di grafici incorporati: grafici incorporati in una bolla e grafici incorporati senza bolla. Ecco alcuni esempi:

Grafico senza bolle
Grafico con fumetto
Grafico senza fumetto

Di seguito sono riportate le specifiche dei parametri s=<icon_string_constant>;d=<marker_data_string>, sia per i grafici non a bolle che per quelli incorporati a bolle (i parametri descritti sopra non sono descritti di nuovo qui):

Sintassi

Non-bubble:
  chem=y;s=ec;d=<alignment_string>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

Bubble:
  chem=y;s=ecb;d=<frame_type>,<padding>,<frame_color>,<fill_color>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>
alignment_string
[Solo senza bolle] Indica quale parte del grafico incorporato senza bolle è bloccata nel punto dati. Scegli una delle costanti stringa a due lettere nel seguente diagramma:Stringhe di allineamento
chart_data
I dati relativi al grafico incorporato. Questo è tutto ciò che segue https://chart.googleapis.com/chart? nell'URL del grafico da incorporare. Utilizza lo strumento riportato di seguito o segui le regole elencate sotto lo strumento.
frame_type
[Solo fumetto] Una delle costanti di stile del frame dell'icona dinamica.
spaziatura interna
[Solo bolla] Spaziatura interna all'interno del fumetto, in pixel.
frame_color
[Solo fumetto] Colore del frame, come una stringa di colore HTML a sei cifre senza il segno #. Esempio: FF00FF.
fill_color
[Solo bolla] Colore di riempimento delle bolle, sotto forma di stringa di colore HTML a sei cifre senza il segno #. Esempio: FF00FF.

Dati dei grafici incorporati

Usa il seguente strumento di conversione per generare la stringa del grafico oppure genera manualmente la stringa del grafico seguendo le regole fornite dopo lo strumento.

Regole per la conversione manuale

1. Innanzitutto, sostituisci tutti i seguenti caratteri nelle coppie parametro e valore con i seguenti valori, nell'ordine mostrato:

Sostituisci Con questo
%7C o %7c
|
@
@@
%
%25
,
@,
|
@|
;
@;
&
%26
=
%3D

2. Quindi sostituisci tutti i valori & e = nelle coppie parameter1=value1&parameter2=value2... con le virgole.

Torna all'inizio

Indicatori di forma chm [a barre, a linee, radar, a dispersione]

Puoi specificare indicatori grafici per tutti i punti dati o singoli punti di un grafico. Se due o più indicatori occupano lo stesso punto, gli indicatori vengono disegnati nell'ordine in cui appaiono nel parametro chm. Puoi anche creare indicatori di testo sui punti dati. Questa procedura è illustrata nella sezione Indicatori di punti dati.

Puoi combinare gli indicatori di forma con qualsiasi altro parametro chm utilizzando una barra verticale ( |) per separare i parametri chm.

Sintassi

Specifica un set dei seguenti parametri per ogni serie da contrassegnare. Per contrassegnare più serie, crea set di parametri aggiuntivi, delimitati da una barra verticale. Non è necessario eseguire il markup di tutte le serie. Se non assegni indicatori a una serie di dati, non saranno presenti indicatori.

Gli indicatori di forma si comportano in modo leggermente diverso nei grafici a dispersione. Per ulteriori informazioni, consulta la documentazione.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[Facoltativo] Se anteponi al tipo di indicatore il carattere @ facoltativo, <opt_what_points> deve utilizzare il formato x:y.
<marker_type>
Il tipo di indicatore da utilizzare. Specifica uno dei seguenti tipi:
  • a - Freccia
  • c - Croce
  • C: rettangolo. Se è un indicatore rettangolo, devi avere almeno due serie di dati, dove la serie 0 specifica il bordo inferiore e la serie 1 il bordo superiore. <size> specifica la larghezza del rettangolo in pixel.
  • d - Diamante
  • E - Indicatore con barra di errore ( ) Questo indicatore richiede due serie di dati per creare: un valore per il punto inferiore e il punto corrispondente nella seconda serie per il punto superiore. Espone anche una sintassi estesa di tipo <size>: line_thickness[:top_and_bottom_width], dove top_and_bottom_width è facoltativo. Vedi il seguente esempio.
  • h: linea orizzontale nel grafico a un'altezza specificata. L'unico formato valido per il parametro <opt_which_points> è opt_which_points.
  • H: linea orizzontale che attraversa l'indicatore di dati specificato. Questo supporta una sintassi estesa <size> che consente di specificare una lunghezza esatta della linea: line_thickness[:length], dove :length è facoltativo e viene utilizzata per impostazione predefinita la larghezza dell'intera area del grafico.
  • o - Cerchia
  • s - Quadrato
  • v: linea verticale dall'asse x al punto dati
  • V: linea verticale di lunghezza regolabile. Questo supporta una sintassi estesa per il valore <size>, che consente di specificare una lunghezza esatta della riga: line_thickness[:length], dove :length è facoltativo e viene utilizzata per impostazione predefinita l'altezza completa dell'area del grafico. L'indicatore è centrato sul punto dati.
  • x - Una X
<color>
Il colore degli indicatori per questa serie, in formato esadecimale RRGGBB.
<series_index>
L'indice in base zero della serie di dati su cui tracciare gli indicatori. Ignorati per gli indicatori h e per quelli che specificano la posizione in base alla posizione x/y (inizia con il carattere @). Puoi utilizzare le serie di dati nascoste come fonte per gli indicatori; consulta Grafici composti per ulteriori informazioni. I grafici a barre verticali raggruppati supportano una sintassi estesa speciale per allineare gli indicatori a barre specifiche.
<opt_which_points>
[Facoltativo] Su quali punti disegnare gli indicatori. Il valore predefinito è Tutti gli indicatori. Utilizza uno dei seguenti valori:
  • n.d: dove tracciare l'indicatore. Il significato dipende dal tipo di indicatore:
    • Tutti i tipi tranne h: su quali punti dati tracciare l'indicatore, dove n.d è l'indice in base zero della serie. Se specifichi un valore non intero, la frazione indica un punto intermedio calcolato. Ad esempio, 3,5 indica a metà strada tra il punto 3 e il punto 4.
    • h: un numero compreso tra 0,0 e 1,0, dove 0,0 è la parte inferiore del grafico e 1,0 è la parte superiore del grafico.
  • -1: traccia un indicatore su tutti i punti dati. Puoi anche lasciare vuoto questo parametro per disegnare su tutti i punti dati.
  • -n - Disegna un indicatore su ogni n° punto dati. Valore in virgola mobile; se n è inferiore a 1, il grafico calcolerà automaticamente punti intermedi aggiuntivi. Ad esempio, -0,5 inserisce il doppio degli indicatori rispetto ai punti dati.
  • start:end:n: traccia un indicatore su ogni n° punto dati in un intervallo, dai valori di indice start a end (inclusi). Tutti i parametri sono facoltativi (potrebbero essere assenti), pertanto un rapporto 3::1 verrebbe dal quarto all'ultimo, passaggio 1, e se ometti completamente questo parametro viene utilizzato il valore predefinito first:last:1. Tutti i valori possono essere numeri in virgola mobile. start ed end possono essere negativi, in modo da contare all'indietro dall'ultimo valore. Se start e end sono entrambi negativi, assicurati che siano indicati in valori crescenti (ad esempio, -6:-1:1). Se il valore del passaggio n è inferiore a 1, calcolerà punti dati aggiuntivi interpolando i valori dei dati forniti. I valori predefiniti sono first:last:1
  • x:y: traccia un indicatore in un punto specifico x/y del grafico. Questo punto non deve necessariamente trovarsi su una linea. Per utilizzare questa opzione, aggiungi il carattere @ prima del tipo di indicatore. Specifica le coordinate come valori in virgola mobile, dove 0:0 è l'angolo in basso a sinistra del grafico e 1:1 è l'angolo in alto a destra del grafico. Ad esempio, per aggiungere un rombo rosso di 15 pixel al centro di un grafico, utilizza @d,FF0000,0,0.5:0.5,15.
<size>
Le dimensioni dell'indicatore, in pixel. La maggior parte utilizza un singolo valore numerico per questo parametro. Gli indicatori V, H e S supportano la sintassi <size>[:width], in cui la seconda parte facoltativa specifica la lunghezza della linea o dell'indicatore.
<opt_z_order>
[Facoltativo] Il livello su cui disegnare l'indicatore, rispetto ad altri indicatori e a tutti gli altri elementi del grafico. Si tratta di un numero in virgola mobile compreso tra -1,0 e 1,0 inclusi, dove -1,0 è la parte inferiore e 1,0 è la parte superiore. Gli elementi (righe e barre) del grafico sono appena inferiori a zero. Se due indicatori hanno lo stesso valore, vengono tracciati nell'ordine indicato dall'URL. Il valore predefinito è 0,0 (appena sopra gli elementi del grafico).
<opt_offset>
[Facoltativo] Consente di specificare gli offset orizzontali e verticali dalla posizione specificata. Ecco la sintassi, che utilizza un delimitatore : reserved:<horizontal_offset>:<vertical_offset>. Se specificato, puoi includere un valore ,, vuoto nella stringa del parametro chm per <opt_z_order>. Esempi: o,FF9900,0,4,12,,:10 o,FF9900,0,4,12.0,,:-10:20 o,FF9900,0,4,12,1,::20
  • preorder: lascia vuoto.
  • <horizontal_offset>: un numero positivo o negativo che specifica l'offset orizzontale, in pixel. Facoltativo; lascia vuoto se non viene utilizzato.
  • <vertical_offset>: un numero positivo o negativo che specifica l'offset verticale, in pixel. Facoltativo; lascia vuoto se non viene utilizzato.

 

Esempi

Descrizione Esempio

Ecco un esempio di vari indicatori di forma e linea.

  • a,990066,0,0.0,9.0: freccia viola, prima serie, primo punto, dimensione 9.
  • c,FF0000,0,1.0,20.0 - Croce rossa, prima serie, secondo punto, dimensione 9.
  • d,80C65A,0,2,20.0 - Rombo verde, prima serie, terzo punto, dimensione 9.
  • H,000000,0,3,1:40: linea orizzontale nera, prima serie, punto dati 3, largo un pixel, lungo quaranta pixel.
  • o,FF9900,0,4.0,12.0: cerchio arancione, prima serie, quinto punto, dimensione 12.
  • s,3399CC,0,5.0,11.0: quadrato blu, prima serie, sesto punto, dimensione 11.
  • v,BBCCED,0,6.0,1.0: linea verticale fino al punto, prima serie, settimo punto, larghezza di un pixel.
  • V,3399CC,0,7.0,1.0: linea verticale dal basso verso l'alto del grafico, prima serie, ottavo punto, larghezza di un pixel.
  • x,FFCC33,0,8.0,20.0: "X" gialla, prima serie, nono punto, dimensione 20.
  • H,FFFF00,0,9,2: linea orizzontale gialla per la larghezza del grafico nel punto dati 9.
  • h,FF0000,0,0.5,1: linea orizzontale rossa all'altezza designata, prima serie, a metà del grafico, larghezza di un pixel.
 Grafico a linee con indicatori
chm=
  a,990066,0,0.0,9.0|
  c,FF0000,0,1.0,20|
  d,80C65A,0,2.0,20.0|
  H,000000,0,3,1:40|
  o,FF9900,0,4.0,12.0|
  s,3399CC,0,5.0,11.0|
  v,BBCCED,0,6,1.0|
  V,3399CC,0,7,1.0|
  x,FFCC33,0,8,20|
  H,FFFF00,0,9,2|
  h,FF0000,0,0.5,1

Ecco un esempio in cui vengono utilizzati i rombi per una serie di dati e i cerchi per l'altra.

Se due o più indicatori occupano lo stesso punto, vengono disegnati nell'ordine in cui appaiono nel parametro chm. In questo caso, il cerchio è il primo indicatore specificato con chm, quindi viene disegnato per primo. Il rombo viene specificato e disegnato per secondo, di conseguenza viene disegnato sopra il cerchio.

 Nel grafico a linee, una linea ha cerchi di 15 pixel su ogni punto dati, mentre l&#39;altra linea ha 10 pixel di diamanti. Viene tracciato un rombo sul punto comune a entrambe le linee
chm=
  o,FF9900,0,-1,15.0|
  d,FF0000,1,-1,10.0

Questo è un grafico a linee con un indicatore ogni secondo punto dati (-2 significa a vicenda a intervalli).

 Grafico a linee con indicatore ogni secondo punto
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-2,6
Ecco un grafico a linee con un numero di indicatori doppio rispetto ai punti dati (-0,5 significa ogni mezzo punto). Grafico a linee con indicatore ogni secondo punto
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-.5,6
Questo esempio mostra come utilizzare gli indicatori h e v per creare linee della griglia con colori e spessore personalizzati. Il valore dell'ordine z (l'ultimo valore) è impostato su -1, in modo che le linee della griglia vengano tracciate sotto la linea di dati.
Grafico a linee con indicatore ogni secondo punto
chm=
  h,76A4FB,0,0:1:.2,2,-1|
  V,76A4FB,0,::2,0.5,-1

Questo grafico aggiunge linee di riempimento verticale a un grafico a linee:

  • v: linee verticali nel grafico
  • FF0000 - Linee rosse
  • 0 - Indice della serie
  • : :.5 - Indicatore di intervallo: dall'inizio alla fine, ogni 0,5 punti.
  • 2: spessore 2 pixel.
 Grafico a linee con indicatore ogni secondo punto
chm=
  v,FF0000,0,::.5,2
In questo esempio vengono aggiunti una freccia e un indicatore di testo al grafico utilizzando le coordinate esatte. Il primo indicatore D è la linea di traccia sotto le barre. Il secondo indicatore è la freccia, mentre il terzo è il testo della freccia.
chm=
  D,003971,1,0,3|
  @a,000000,0,.25:.75,7|
  @tExpected,000000,0,.35:.85,10
Una linea orizzontale fissa a un punto dati specifico (H) può essere utile per mostrare valori relativi o per enfatizzare l'altezza di un valore di dati su un grafico.
chm=H,FF0000,0,18,1

Questo grafico mostra gli indicatori che possono specificare lo spessore e la lunghezza delle linee nel parametro <size>.

  • E,000000,0,6,1:20: barra di errore nera con linee larghe da 1 pixel e barre superiore e inferiore lunghe 20 pixel. La parte inferiore è ancorata alla serie 0 punto 8, la parte superiore è ancorata alla serie 1 punto 8.
  • H,990066,1,2,5:50: viola, linea orizzontale larga cinque pixel, lunga cinque pixel e centrata nel punto dati 2.
  • V,3399CC,0,8,3:50- Linea verticale blu, larga 3 pixel, lunga cinquanta pixel, centrata sul punto dati 8.
 title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,50380%7"
chm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

Torna all'inizio

Indicatori di testo e valore dei dati chm [A barre, a linee, Radar, a dispersione]

Puoi etichettare punti specifici del grafico con testo personalizzato o con versioni formattate dei dati in quel punto.

Puoi combinare qualsiasi indicatore chm utilizzando una barra verticale ( |) per separare i set di parametri chm.

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

Specifica un set dei seguenti parametri per ogni serie da contrassegnare. Per contrassegnare più serie, crea set di parametri aggiuntivi, delimitati da una barra verticale. Non è necessario eseguire il markup di tutte le serie. Se non assegni indicatori a una serie di dati, non saranno presenti indicatori.

chm=
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
    |...|
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<marker_type>
Il tipo di indicatore da utilizzare. Puoi scegliere tra i seguenti tipi:
  • f<text>: un flag contenente testo. Specifica il carattere "f" seguito da testo personalizzato con codifica URL. Per evitare le virgole negli indicatori di testo, anteponi il segno \ alla virgola. Esempio: fHello\,+World!
  • t<text>: un semplice indicatore di testo. Specifica il carattere "t" seguito da testo con codifica URL personalizzato. Per evitare le virgole negli indicatori di testo, anteponi il segno \ alla virgola. Esempio: tHello\,+World!
  • A<text>: un indicatore di annotazione. È simile a un indicatore di bandiera, ma gli indicatori coordineranno la loro posizione in modo che non si sovrappongano. L'unico formato valido per <opt_which_points> è opt_which_points, per indicare l'indice di un punto della serie.
  • N<formatting_string>: il valore dei dati in questo punto, con formattazione facoltativa. Se non utilizzi il parametro chds (scalabilità personalizzata), viene restituito l'esatto valore codificato; se lo utilizzi con qualsiasi tipo di formato, il valore verrà scalato nell'intervallo specificato. Guarda un esempio di chds con indicatori numerici di seguito. Con questo tipo di indicatore in un grafico a barre in pila, se specifichi -1 per <series_index>, otterrai un indicatore che mostra la somma di tutti i valori in questa barra in pila. La sintassi della stringa di formattazione è la seguente:
           <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>.
    Tutti questi elementi sono facoltativi. Ecco il significato di ogni elemento:
    • <preceding_text>: testo che precede ogni valore.
    • *...*: un blocco facoltativo racchiuso tra due asterischi letterali, in cui puoi specificare i dettagli di formattazione per i numeri. I seguenti valori sono supportati e sono tutti facoltativi:
      • <number_type>: il formato numerico per i valori numerici. Scegli una delle seguenti opzioni:
        • f: formato con virgola mobile [predefinito]. Valuta anche la possibilità di specificare la precisione con il valore <decimal_places>.
        • p: formato percentuale. Viene aggiunto automaticamente il simbolo %. Nota: quando utilizzi questo formato, i valori dei dati compresi tra 0,0 e 1,0 vengono mappati a 0 e 100% (ad esempio, 0,43 verrà mostrato come 43%).
        • e - Formato di notazione scientifica.
        • c<CUR>: formatta il numero nella valuta specificata, con l'indicatore di valuta appropriato. Sostituisci <CUR> con un codice valuta di tre lettere. Esempio: cEUR per euro. Puoi trovare un elenco di codici sul sito web ISO, anche se non tutti i simboli sono supportati.
      • <decimal_places>: un numero intero che specifica quante posizioni decimali mostrare. Il valore viene arrotondato (non troncato) a questa lunghezza. Il valore predefinito è 2.
      • z: vengono visualizzati gli zeri finali. Il valore predefinito è no.
      • s: vengono visualizzati i separatori dei gruppi. Il valore predefinito è no.
      • x o y: visualizza i dati della coordinata x o y, come specificato. Il significato dei dati x varia in base al tipo di grafico: fai delle prove con il grafico per capire cosa significano. Il valore predefinito è "y".
    • <following_text>: testo da seguire ogni valore.
<color>
Il colore degli indicatori per questo set, in formato esadecimale RRGGBB.
<series_index>
L'indice in base zero della serie di dati su cui tracciare gli indicatori. Se si tratta di un grafico a barre in pila e il tipo di indicatore è N (valori dei punti dati), puoi specificare -1 per creare un indicatore del valore sommato per ogni pila di barre. Di seguito è riportato un esempio.
<opt_which_points>
[Facoltativo] Su quali punti disegnare gli indicatori. Il valore predefinito è "Tutti gli indicatori". Utilizza uno dei seguenti valori:
  • n.d: il punto dati su cui tracciare l'indicatore, dove n.d è l'indice in base zero nella serie. Se specifichi un valore non intero, la frazione indica un punto intermedio calcolato. Ad esempio, 3,5 indica a metà strada tra il punto 3 e il punto 4.
  • -1: traccia un indicatore su tutti i punti dati. Puoi anche lasciare vuoto questo parametro per disegnare su tutti i punti dati.
  • -n - Disegna un indicatore su ogni n° punto dati.
  • start:end:n: traccia un indicatore su ogni n° punto dati in un intervallo, dai valori dell'indice inizio a fine, inclusi. Tutti i parametri sono facoltativi (potrebbero non essere presenti), quindi un rapporto 3::1 corrisponde al valore dal quarto all'ultimo (passaggio 1) e, se questo parametro viene omesso completamente, viene usato il valore predefinito first:last:1. Tutti i valori possono essere numeri in virgola mobile. start ed end possono essere negativi, in modo da contare all'indietro dall'ultimo valore. Se sia start che end sono negativi, assicurati che siano elencati in valori crescenti (ad esempio, -6:-1:1). Se il valore del passo n è inferiore a 1, calcolerà punti dati aggiuntivi interpolando i valori dei dati forniti. I valori predefiniti sono first:last:1
  • x:y - [Non supportato per gli indicatori di tipo N] Disegna un indicatore in un punto x/y specifico del grafico. Questo punto non deve essere necessariamente posizionato su una linea. Per utilizzare questa opzione, aggiungi il carattere @ (@) prima del tipo di indicatore. Specifica le coordinate come valori in virgola mobile, dove 0:0 è l'angolo in basso a sinistra del grafico, 0.5:0.5 è il centro del grafico e 1:1 è l'angolo in alto a destra del grafico. Ad esempio, per aggiungere un rombo rosso di 15 pixel al centro di un grafico, utilizza @d,FF0000,0,0.5:0.5,15.
<size>
Le dimensioni dell'indicatore in pixel. Se si tratta di un grafico a dispersione con una terza serie di dati (utilizzata per specificare le dimensioni in punti), questo valore verrà scalato dall'intervallo di dati. Pertanto, se l'intervallo di dati è compreso tra 0 e 100 e <size> è 30, un valore dei dati pari a 100 corrisponde a una larghezza di 30 pixel, un valore dati pari a 50 corrisponde a una larghezza di 15 pixel e così via.
<opt_z_order>
[Facoltativo] Il livello su cui disegnare l'indicatore, rispetto ad altri indicatori e a tutti gli altri elementi del grafico. Si tratta di un numero in virgola mobile compreso tra -1,0 e 1,0 inclusi, dove -1,0 è la parte inferiore e 1,0 è la parte superiore. Gli elementi del grafico (linee e barre) sono appena inferiori a zero. Se due indicatori hanno lo stesso valore, vengono tracciati nell'ordine indicato dall'URL. Il valore predefinito è 0,0 (appena sopra gli elementi del grafico).
<opt_placement>
[Facoltativo] Ulteriori dettagli sul posizionamento che descrivono dove inserire questo indicatore rispetto al punto dati. Puoi specificare il posizionamento relativo orizzontale e/o verticale, nonché gli offset. La sintassi del posizionamento è una stringa con delimitatori : come mostrato qui. Tutti gli elementi sono facoltativi: <horizontal_and_vertical_justification>:<horizontal_offset>:<vertical_offset>. Se specificato, puoi includere un valore , vuoto nella stringa del parametro chm per <opt_z_order>. Esempi: N,000000,0,1,10,,b, N,000000,0,1,10,,lv e N,000000,0,1,10,,r::10.
horizontal_and_vertical_justification
Il punto di ancoraggio dell'indicatore. Questo si comporta in modo opposto alla giustificazione, quindi un ancoraggio a sinistra in realtà posiziona l'indicatore a destra del punto dati. Puoi scegliere un giustificatore orizzontale e/o verticale dall'elenco seguente:
  • Posizionamento orizzontale: "l", "h" o "r". Ancorato a sinistra, al centro o a destra, orizzontalmente. Il valore predefinito è "l".
  • Posizione verticale: "b", "v", "t". Ancorato in basso, al centro o in alto, in verticale. Il valore predefinito è "b".
  • Posizionamento relativo alle barre [solo grafici a barre]: "s", "c", "e" indica la base, il centro o la parte superiore di una barra. Per i grafici in pila, si riferisce alla sezione della barra per ogni serie, non all'intera barra. Se l'indice della serie specificato è -1 (totale dello stack), il valore è relativo all'intera barra. Questa opzione può essere combinata con i valori di posizionamento verticale, ad esempio "be" o "vs". Il valore predefinito è "e".
horizontal_offset
Un offset orizzontale per questo indicatore, in pixel. Il valore predefinito è 0.
vertical_offset
Un offset verticale per questo indicatore, in pixel. Valore predefinito dei grafici non a barre: 15; impostazione predefinita dei grafici a barre: 2.

Descrizione Esempio

Ecco un esempio di etichette dei valori su un grafico a barre.

Il primo grafico (N*p0*) specifica un indicatore del valore dei dati, con valori visualizzati come percentuale, arrotondati a zero cifre decimali, in nero, su tutti i valori, in testo a 11 punti. Tieni presente che i valori dei dati sono tutti compresi tra 0,0 e 1,0 e, in formato percentuale, vengono spostati in alto con due cifre decimali.

Il secondo grafico (N*cEUR1*) mostra gli stessi valori formattati come valori in euro, con una posizione decimale, in nero, su tutti i valori, in testo da 11 punti.

Grafico a barre con etichette percentuali sopra ogni barra
chm=
  N*p0*,000000,0,-1,11
chd=t:
  0.4356,0.3562,0.4834,0.575,0.673,0.6091

Grafico a barre con le etichette dell&#39;euro sopra ogni barra


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

Puoi utilizzare il parametro chds per scalare il valore numerico visualizzato. Puoi utilizzare chds per tutti i formati di dati, inclusa la codifica semplice ed estesa. Ciò non influirà sulle dimensioni della barra o sulle etichette dell'asse, ma solo sul valore dell'indicatore di dati.

Questo esempio mostra un grafico con valori con codifica semplice di 46, 39, 29, 30, 43, 41. L'intervallo di codifica semplice è compreso tra 0 e 61. . Il parametro chds definisce una scala personalizzata degli indicatori da 0 a 1, quindi i valori degli indicatori vengono ridimensionati in base a questo intervallo, ma non influiscono sull'altezza delle barre (se si trattasse di dati in formato di testo, anche le barre verranno ridimensionate).
chd=s:underp
chm=N,000000,0,-1,11
chds=0,1

Ecco un esempio di grafico con un'etichetta di testo nel punto minimo e un'etichetta con una bandiera nel punto massimo.

Grafico a linee con etichetta di testo blu da 10 pt e bandiera con testo rosso da 15 pt, disegnati sui punti dati di una linea verde tratteggiata.
chm=
  tMin,0000FF,0,1,10|
  fMax,FF0000,0,3,15
Questo esempio mostra un grafico in pila con i valori delle singole serie, oltre al totale della serie. Per mostrare i valori della serie in pila, è necessario utilizzare l'opzione di posizionamento "c"; in caso contrario, il valore della barra superiore si sovrapponga al valore della somma nella parte superiore di ogni barra.
chm=
  N,FF0000,-1,,12|
  N,000000,0,,12,,c|
  N,000000,1,,12,,c|
  N,ffffff,2,,12,,c
Altre dimostrazioni del funzionamento del posizionamento verticale e orizzontale. Questo esempio mostra varie combinazioni di valori di ancoraggio per i grafici a barre (che utilizzano s, c ed e per il posizionamento verticale). Nota come un ancoraggio a destra sposta un indicatore verso sinistra, mentre un ancoraggio in alto sposta un indicatore verso il basso e viceversa. I punti rossi indicano la base, il centro e la parte superiore di ciascuna barra. Il numero è il valore dei dati, fissato utilizzando valori di ancoraggio diversi per ogni barra.
chm=
  N,000000,0,0,10,,rs
  N,000000,0,1,10,,ls
  N,000000,0,2,10,,c
  N,000000,0,3,10,,e
  N,000000,0,4,10,,e::15
  N,000000,0,5,10,,e::-12
Gli indicatori di annotazione regolano automaticamente la posizione delle etichette in modo che non si sovrappongano. Il primo valore chm riguarda il riempimento della linea, i seguenti valori sono tutti indicatori di annotazione.
chm=B,C5D4B5BB,0,0,0
  AA,666666,0,3,15
  AB,666666,0,5,15
  AC,666666,0,24,15
  AD,666666,0,25,15
  AE,666666,0,26,15
  AF,666666,0,51,15
  AG,666666,0,60,15
  AH,666666,0,73,15
  AI,666666,0,80,15
  AJ,666666,0,99,15
Un altro esempio di indicatore di annotazione mostra l'altitudine delle città in Svizzera.

Torna all'inizio

Indicatori di intervallo chm [a barre, a candele, a linee, a radar, a dispersione]

Puoi colorare le bande orizzontali o verticali di riempimento dello sfondo per evidenziare aree specifiche di un grafico.

Puoi combinare qualsiasi indicatore chm utilizzando una barra verticale ( |) per separare i set di parametri chm.

Sintassi

Specifica un set dei seguenti parametri per ogni banda da tracciare. Per tracciare più bande, crea set di parametri aggiuntivi, delimitati da una barra verticale. Gli intervalli vengono tracciati nell'ordine specificato, quindi l'ultimo intervallo tracciato verrà tracciato sopra gli intervalli precedenti.

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>
<direction>
Specifica l'ombreggiatura orizzontale o verticale. Utilizza r per un intervallo orizzontale e R per un intervallo verticale.
<color>
Il colore dell'intervallo come formato RRGGBB numero esadecimale.
0
Prenotato: deve essere pari a zero.
<start_point>
La posizione iniziale dell'intervallo.
  • Per gli indicatori di intervallo orizzontale, è una posizione sull'asse y, dove 0.00 è la parte inferiore del grafico e 1.00 è la parte superiore del grafico.
  • Per gli indicatori di intervallo verticale, è una posizione sull'asse X, dove 0.00 è la sinistra del grafico e 1.00 è la destra del grafico.
<end_point>
La posizione finale dell'intervallo.
  • Per gli indicatori di intervallo orizzontale, è una posizione sull'asse y, dove 0.00 è la parte inferiore del grafico e 1.00 è la parte superiore del grafico.
  • Per gli indicatori di intervallo verticale, è una posizione sull'asse X, dove 0.00 è la sinistra del grafico e 1.00 è la destra del grafico.

 

Esempi

Descrizione Esempio

Gli indicatori di intervallo possono essere una linea sottile o una banda di colori.

  • r,E5ECF9,0,0.75,0.25: indicatore di intervallo, blu chiaro, (prenotato), 0,5 dell'altezza del grafico.
  • r,000000,0,0.1,0.11: l'indicatore di intervallo, nero, (prenotato), inizia dal punto 0.1 del percorso di salita dell'asse Y e termina al punto 0.11 del suo percorso sull'asse Y (una sottile linea nera).
 Grafico a linee con una banda orizzontale blu pallido che si estende dal 25% al 75% lungo l&#39;asse y e una sottile linea orizzontale che risale al 10% lungo l&#39;asse y.
chm=
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

Questo esempio mostra gli indicatori di intervallo verticale. Il primo indicatore è una linea rossa (FF0000), mentre il secondo è una banda azzurro (A0BAE9).

 Grafico a linee con una banda verticale celeste che si estende dal 25% al 75% lungo l&#39;asse x e una sottile linea verticale al 10% lungo l&#39;asse x
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25

Gli indicatori vengono tracciati nell'ordine specificato. In questo esempio, puoi vedere che l'indicatore rosso verticale è stato disegnato prima dell'indicatore orizzontale azzurro.

 Grafico a linee con una banda verticale blu e una banda orizzontale blu più chiara che si estende rispettivamente dal 25% al 75% lungo l&#39;asse x e y. Sottile linea rossa verticale e linea nera orizzontale sottile, al dieci percento lungo l&#39;asse x e y, rispettivamente
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25|
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

Ecco un esempio di grafico a linee che utilizza gli indicatori di intervallo per disegnare linee orizzontali deboli nel grafico nella linea dello zero, nella linea del punto medio e in alto.

 Sparkline con una singola linea gialla e tre linee orizzontali equidistanti
chm=
  r,000000,0,0.499,0.501|
  r,000000,0,0.998,1.0|
  r,000000,0,0.0,0.002

Torna all'inizio

Indicatori a linee chm=D [a barre, a candele, a linee, a dispersione, a dispersione]

Puoi aggiungere una linea che traccia i dati nel grafico. Il più delle volte, viene utilizzato nei grafici composti.

Per aggiungere più righe (o combinarla con qualsiasi altro indicatore chm), separa i set di parametri chm utilizzando un delimitatore barra verticale ( |). Non puoi creare un indicatore tratteggiato con questo parametro.

Sintassi 

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
G
Indica che si tratta di un indicatore di linea.
<color>
Il colore della linea, in formato esadecimale RRGGBB.
<series_index>
L'indice della serie di dati utilizzata per tracciare la linea. L'indice della serie di dati è 0 per la prima serie di dati, 1 per la seconda serie di dati e così via.
<which_points>
I punti di una serie da usare per tracciare la linea. Utilizza uno dei seguenti valori:
  • 0 - Vengono usati tutti i punti della serie.
  • start:end - Utilizza un intervallo specifico di punti nella serie, da start a end (indice in base zero). Puoi utilizzare i valori in virgola mobile anche per specificare i punti intermedi oppure lasciare vuoto il campo start o end per indicare rispettivamente il primo o l'ultimo punto dati. start e end possono essere negativi, come indice inverso rispetto all'ultimo valore. Se sia start che end sono negativi, assicurati di scriverli con un valore crescente (ad esempio, -6:-1).
<size>
Lo spessore della linea in pixel.
<opt_z_order>
[Facoltativo] Il livello su cui disegnare l'indicatore, rispetto ad altri indicatori e a tutti gli altri elementi del grafico. Si tratta di un numero in virgola mobile compreso tra -1,0 e 1,0 inclusi, dove -1,0 è la parte inferiore e 1,0 è la parte superiore. Gli elementi del grafico (linee e barre) sono appena inferiori a zero. Se due indicatori hanno lo stesso valore, vengono tracciati nell'ordine indicato dall'URL. Il valore predefinito è 0,0 (appena sopra gli elementi del grafico).

 

Esempi

Descrizione Esempio

Questo è un esempio di disegno di una linea di indicatore su un grafico a barre. L'ordine z è impostato su 1, quindi la linea è disegnata sopra le barre.

Questo esempio utilizza gli stessi dati sia per le barre sia per la riga di dati.		 Grafico a barre con indicatore a linee
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

Si tratta dello stesso grafico a barre, ma con una serie di dati aggiuntiva solo per la linea. Questo è un esempio di grafico composto. I grafici composti vengono creati aggiungendo ulteriori serie di dati al parametro chd, oltre a un valore a chd, che indica al grafico di "ignorare" le serie di dati aggiuntive.

Per ulteriori informazioni, consulta i grafici composti.

 Grafico a barre con indicatore a linee
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

Torna all'inizio

Funzioni dati chfd [Tutti chd i grafici]

Puoi specificare una funzione personalizzata da eseguire sui dati del grafico utilizzando la sintassi della funzione muParser. I dati utilizzati nella funzione possono provenire da una delle due origini seguenti:

  • Una serie di dati nel periodo chd. I dati vengono estratti dalla serie specificata in chd.
  • Un intervallo di valori dichiarati nel parametro chfd stesso. Devi dichiarare un valore di inizio, arresto e passo per un intervallo di dati arbitrario.

È importante notare che in tutti i casi devi assegnare l'output a una serie esistente in chd, che verrà sovrascritta dall'output della funzione. Il grafico viene visualizzato solo dopo che sono state elaborate tutte le funzioni, quindi se assegni più funzioni da generare per la stessa serie di dati, le funzioni verranno eseguite nell'ordine specificato, ma nel grafico verrà tracciato solo l'output della funzione finale. Tieni presente che puoi concatenare funzioni in modo che una funzione possa assumere come input una serie generata da una funzione precedente.

Per assegnare colori o indicatori chm a una linea di funzione, assegna i colori o gli indicatori all'indice della serie della funzione. Tieni presente che gli indicatori vengono posizionati in base ai dati dopo che sono stati manipolati dalla funzione.

Sintassi 

chfd=
  <output_series_index>,<function_data>,<function_string>
    |...|
  <output_series_index>,<function_data>,<function_string>
<output_series_index>
Indice in base zero di una serie di dati in chd in cui verrà scritto l'output della funzione. Tutti i dati esistenti verranno completamente sovrascritti dall'output della funzione. Se una serie non viene utilizzata come input per una funzione, la best practice prevede di assegnare un singolo valore fittizio a quella serie.
<function_data>
Le variabili e i dati da tracciare. I dati possono provenire da un intervallo da te definito o da una delle serie di dati chd. Puoi specificare più variabili per ogni funzione, utilizzando un delimitatore ; (;) per più variabili. Tieni presente che se definisci più variabili per una singola funzione e queste variabili hanno un numero diverso di punti, la funzione verrà interrotta quando raggiunge il primo endpoint. Ad esempio, se una funzione definisce sia x=1-5 passaggio 1 che y=1-10 passaggio 1, terminerà quando viene raggiunto il quinto punto.
    <variable_name>,<input_series_index>
         OPPURE
    <variable_name>,<start>,<end>,<step>
  • variable_name - Un nome stringa arbitrario per la variabile. Utilizzalo nella funzione definita da function_string.
  • input_series_index - L'indice di una serie di dati chd da utilizzare come dati di input.
  • start - Il valore iniziale numerico di un intervallo.
  • end - Il valore numerico finale di un intervallo.
  • step - Il valore del passaggio numerico da start a end. Può essere positivo o negativo, ma non può essere zero.
Esempi: x,0,100,1 dichiara una variabile denominata x con valori 0, 1, 2, ... 100. x,0,100,1;r,0,3.1,.1 dichiara la stessa variabile x più una variabile denominata r con valori 0, 0.1, 0.2, ..., 3.0, 3.1. x,0 dichiara una variabile denominata x che utilizza i dati della prima serie chd. Queste variabili verranno utilizzate da function_string. Non verranno tracciati sul grafico a meno che non li specifichi in function_string. Più piccolo è il passo, più fluido sarà il grafico.
<function_string>
La tua funzione, scritta con la sintassi muParser. La funzione viene applicata alle variabili e ai dati specificati in variable_data. Puoi fare riferimento solo alle variabili dichiarate in questo set di funzioni locali, non in un altro set di parametri chfd collegato. Le funzioni MuParser di riepilogo non sono supportate (min, max sum, avg). IMPORTANTE: ricorda di utilizzare %2B anziché + nelle tue funzioni.

 

Esempi

Descrizione Esempio

Un'onda sinusoidale semplice. Aspetti da tenere presenti:

  • chd=t:-1. Utilizziamo una variabile fittizia per i dati del grafico, perché i nostri dati sono dichiarati nel parametro chfd.
  • chco=FF0000: il colore rosso è specificato per la prima serie. Anche se non utilizziamo i dati di chd, per la funzione tracciata verrà usato il colore corrispondente per quella serie.
  • chfd=0,x,0,11,0.1,sin(x)*50%2B50 - Dichiariamo una variabile, chiamata x, con valori 0-11, incrementati di 0,1. È assegnato alla prima serie, il che significa che riceverà il primo colore della serie (FF0000). La funzione applicata a x è sin(x) * 50 + 50. Nota come dobbiamo codificare il segno + in quella funzione.

 

 Onda sinusoidale specificata da chfd
cht=lc
chd=t:-1
chco=FF0000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chxt=x,y
Questa riga utilizza i dati del parametro chd.
chd=t:5,10
chfd=0,x,0,x*4

Una combinazione di linee di funzioni e linee non funzionali.

Nota come i colori vengono specificati dal parametro colore della serie chco.

Nota il posizionamento degli indicatori nell'output della funzione; i punti dati vengono calcolati da start, end e step, quindi se l'intervallo è 0-11 passaggio 0,1, il punto 0 è 0, il punto 1 è 0,1 e così via, fino al punto 110, che ha un valore di 11.

 Una serie che utilizza chfd e una che utilizza chd per i propri dati.
chd=t:
  -1
  15,45
chco=
  FF0000,000000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chm=
  c,00A5C6,0,110,10
  a,00A5C6,0,60,10

Per definire una funzione in due dimensioni, utilizza un grafico lxy, assegna due serie fittizie e assegna una funzione a ciascuna.

  • 0,x,0,10,0.1,sin(x)*50%2B50 - La serie 0 (i valori dell'asse x) ha una variabile denominata x, con valori da 0 a 10, passaggio 0.1, e una funzione sin(x)*50 + 50
  • 0,y,0,10,0.1,sin(y)*50%2B50 - La serie 0 (i valori dell'asse y) ha una variabile denominata y, con valori da 0 a 10, passaggio 0.1, e una funzione sin(x)*50 + 50
 Un cerchio
cht=lxy
chd=t:-1|-1
chfd=
  0,x,0,10,0.1,sin(x)*50%2B50|
  1,y,0,10,0.1,cos(y)*50%2B50

Il parametro chfd ti consente di esprimere la tua creatività.

Prova a fare clic su queste immagini per aprirle e giocarci nella parte dei grafici che ti trascineranno in pista!

Torna all'inizio