Questa pagina descrive come creare una serie di callout, fumetti, segnaposto e altri elementi grafici che possono essere richiesti per URL o aggiunti come indicatori su altri grafici.
Indice
Introduzione
L'API Chart consente di creare una varietà di callout, segnaposto o fumetti interessanti che combinano testo e immagini. Questi elementi sono chiamati icone dinamiche.
Puoi creare un'immagine icona dinamica freestanding
oppure posizionare un'icona dinamica sopra il grafico come tipo di indicatore utilizzando
il parametro chem. In questa pagina viene descritto come creare icone dinamiche sotto forma di immagini indipendenti o di indicatori su un altro grafico. La pagina di riferimento delle
icone dinamiche delle infografiche descrive tutti
i tipi di indicatori dinamici disponibili.
La sintassi per la creazione di un'icona dinamica varia a seconda che tu voglia un'icona freestanding o un indicatore dinamico in un altro grafico.
Icone indipendenti
Puoi richiedere un'immagine icona dinamica nello stesso modo in cui richiedi un qualsiasi altro grafico. Un'icona dinamica freestanding supporta un insieme di parametri diverso rispetto agli altri grafici:
| Parametro | Obbligatorio o facoltativo | Descrizione |
|---|---|---|
chst=<icon_string_constant> |
Obbligatorio | Descrive quale tipo di icona creare.
|
chld=<icon_data> |
Obbligatorio | I dati specifici utilizzati per descrivere le dimensioni, la rotazione, il testo e altri dati richiesti dell'icona.
|
cht |
NON UTILIZZATO | I grafici a icone dinamiche indipendenti non utilizzano il parametro cht. |
chs |
NON UTILIZZATO | I grafici a icone dinamiche indipendenti non utilizzano il parametro chs. |
chd |
NON UTILIZZATO | Utilizza il parametro chld per trasmettere i dati a un'icona dinamica autonoma. |
Esempio
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
Indicatori dinamici
Puoi incorporare un'icona dinamica come tipo di indicatore su diversi tipi di grafici utilizzando il parametro chem. Per scoprire come, consulta la documentazione di chem.
Esempio
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
Funzionalità comuni delle icone
Alla maggior parte delle icone possono essere associate stringhe di testo o ombre.
Stringhe di testo
Tutto il testo visualizzato passato all'API Chart deve avere la codifica UTF-8 e quindi essere codificato come URL.
L'operazione riguarda solo i caratteri non sicuri per l'URL (i caratteri sicuri per l'URL sono per lo più
le lettere dell'alfabeto latino a-z sia maiuscoli che minuscoli, oltre a un piccolo
insieme di punteggiatura). Ad esempio, il valore UTF-8 e con codifica URL per la lettera "è" è "%C3%A8", mentre per il carattere cinese 駅 è "%E9%A7%85". La maggior parte dei browser consente di utilizzare un valore non codificato nella stringa dell'URL (ad esempio, 駅) e lo codifica per te in background.
Tuttavia, è possibile che un utente che visualizza l'URL del grafico utilizzi un browser
che non dispone di questa funzionalità. Di solito, conviene utilizzare la codifica UTF-8 e utilizzare la codifica URL per tutti i caratteri non ASCII
nelle stringhe di testo. Tieni presente che questo vale solo per il testo mostrato in fumetti o segnaposto, non per i simboli &, | o altri caratteri che fanno parte della sintassi dell'URL.
Quando utilizzi il parametro chem per specificare indicatori di icone dinamici, devi anche eseguire l'escape di alcuni caratteri nel testo, come descritto nella documentazione di chem.
Ombre
Puoi aggiungere ombre a molte icone o persino disegnare ombre per alcune icone senza l'icona stessa.
Icone con shadowing 
Molte di queste icone possono essere tracciate con o senza ombre. Se lo shadowing è un'opzione, il nome dell'icona avrà una versione che termina con _withshadow e un'altra versione senza questo suffisso. Puoi specificare un'icona con una delle due intestazioni, a seconda che tu voglia o meno l'ombra.
Ecco un esempio di fumetto di testo medio e segnaposto con e senza ombre:
 chst=d_bubble_icon_text_big |
 chst=d_bubble_icon_text_big_withshadow |
 chst=d_map_pin_icon |
 chst=d_map_pin_icon_withshadow |
Ombre indipendenti 
Alcuni tipi di icone consentono di tracciare la propria ombra autonomamente. Questa operazione può essere utile se utilizzi diverse icone ombreggiate sovrapposte su una grafica e sono così vicine che l'ombra di una di una si sovrappone a un'altra. Ad esempio, ecco due bolle con ombra, prima disegnata da Robert e poi da Alice:
Nota come l'ombra di Alice copre parzialmente Robert. Per risolvere il problema, puoi disegnare prima l'ombra di Alice, poi il fumetto di Robert e infine Alice senza ombra. Forse non del tutto realistici in termini di illuminazione e ombre, ma evita di oscurare una bolla con l'ombra di un'altra:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
Tutti gli indicatori specificano lo stesso ordine z di 1 (py=1), pertanto vengono tracciati nell'ordine indicato, sopra gli elementi del grafico (la linea del grafico). Prima viene disegnata l'ombra di Alice, poi la bolla di Robert
sopra e infine la bolla di Alice
sopra.
Consulta la documentazione relativa al tipo di icona specifico per sapere se puoi tracciare da solo la relativa ombra.
Icone contestuali
Puoi specificare un'icona che varia il colore, le dimensioni o l'archiviazione a seconda del punto a cui è assegnata. Questi tipi di icone sono disponibili solo come indicatori di icone dinamici (parametro chem), non come icone indipendenti.
Queste icone possono essere visualizzate per una serie diversa da quella che specifica colore, dimensioni o sovrapposizione di informazioni. Ciò significa che il valore ds del parametro chem specifica la serie su cui visualizzare l'icona, ma i valori per determinare la dimensione o il colore dell'icona sono specificati nei parametri indicati di seguito. Un buon uso di ciò è utilizzare una serie di dati nascosti per i dati delle icone, ma mostrare le icone su una linea o una barra visibile. Ecco alcuni esempi:
| Icona visualizzata nella serie di origine | Icona visualizzata in serie non di origine | Icona che utilizza le serie nascoste |
|---|---|---|
 |
 |
 |
chem=
|
chem=
|
chd=t1:
|
Tipi di indicatori di contesto
| Tipo di indicatore | Valore di chem s |
Esempio |
|---|---|---|
| Variante di colore | s=cm_color |
 |
| Variante di taglia | s=cm_size |
 |
| Variazione di colore e taglia | s=cm_color_size |
 |
| Variante sovrapposta | s=cm_repeat |
 |
| Impilamento e variazione di colore | s=cm_repeat_color |
 |
Stringhe di allineamento per le icone contestuali
Le icone contestuali supportano una stringa di allineamento facoltativa per specificare un allineamento e un offset dell'icona rispetto al punto dati. La sintassi di questa stringa è la seguente:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- Due lettere che descrivono l'allineamento dell'icona al punto. Tra gli esempi vi sono
tl(in alto a sinistra) erb(in basso a destra). Consulta la descrizione del parametro alignment_string del parametrochemper una scheda e una descrizione complete. - h_anchor_offset
- [Facoltativo] L'offset orizzontale del punto di ancoraggio, in pixel. I valori incluso zero devono essere preceduti da + o -. Importante: devi codificare + come %2B.
- v_anchor_offset
- [Facoltativo] L'offset verticale del punto di ancoraggio, in pixel. I valori incluso zero devono essere preceduti da + o -. Importante: devi codificare + come %2B.
Tieni presente che puoi anche utilizzare il componente of del parametro chem per specificare gli offset orizzontali e verticali. Se specifichi i valori sia del componente of che di h_anchor_offset v_anchor_offset, tutti gli offset verranno applicati all'icona.
Esempi:
 hb-0-0Orizzontale centrale in basso Nessun offset |
 lb-0-0In basso a sinistra Nessun offset |
 rb-0-0In basso a destra Nessun offset |
 ht-0-0Parte superiore orizzontale Nessun offset |
 hb-20-0Orizzontale al centro, in basso -20 orizzontali 0 verticali |
 hb%2b20-0Orizzontale al centro in basso +20 orizzontali 0 verticali |
 hb-0%2b10Orizzontale al centro in basso 0 orizzontali +10 verticali |
 hb-0-20Orizzontale al centro in basso 0 orizzontali -20 verticali |
Variazione di colore (cm_color)
Puoi variare il colore di un indicatore contestuale del grafico in base al punto che rappresenta. È necessario specificare un intervallo di colori e il valore dei dati verrà ridimensionato su un colore corrispondente all'interno dell'intervallo.
Sintassi
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- <icon_shape>
- L'icona da utilizzare. Specifica una stringa ID che identifica una delle immagini elencate alla fine della pagina.
- <color_data_series>
- L'indice in base zero della serie di dati utilizzato per variare il colore delle icone.
- <low_color>
- Il valore del colore basso nell'intervallo, sotto forma di colore esadecimale HTML di tre o sei cifre (nessun simbolo #). Questo valore è associato al valore più basso possibile nell'intervallo di dati disponibili.
- <middle_color>
- Il valore di colore centrale nell'intervallo, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #). Questo valore è associato al valore medio nell'intervallo di dati disponibili.
- <high_color>
- Il valore del colore più alto nell'intervallo, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #). Questo valore è associato al valore più alto possibile nell'intervallo di dati disponibile.
- <icon_size>
- Le dimensioni dell'icona, in pixel. Sono supportati i seguenti valori: 12, 16, 24.
- <outline_color>
- Il colore dei contorni dell'icona, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #).
- <alignment>
- Una stringa facoltativa che descrive l'allineamento e l'offset dell'icona.
Esempio
|
 chem=y;s=cm_color; |
Variante di dimensione (cm_size)
Puoi variare la sola dimensione di un indicatore del grafico contestuale, in base alla serie di dati di tua scelta.
Sintassi
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- <icon_type>
- La forma dell'icona. Scegli uno dei seguenti valori:
maps_pin,diskosquare. - <size_data_series>
- L'indice in base zero della serie di dati utilizzato per variare le dimensioni delle icone.
- <zero_value_size>
- La dimensione di base dell'icona, con il valore minimo dei dati per la serie.
- <size_multiplier>
- Un fattore di scala delle dimensioni. Questo valore viene moltiplicato per la differenza tra il valore dei dati di ogni icona e il valore minimo della serie per calcolare le dimensioni finali dell'icona. Pertanto, un'icona con valore dati pari a 0 non sarà interessata da questo moltiplicatore.
- <min_size>
- Le dimensioni minime di qualsiasi icona, in pixel.
- <outline_color>
- Il colore dei contorni dell'icona, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #).
- <fill_color>
- Il colore di riempimento dell'icona, sotto forma di colore esadecimale HTML di tre o sei cifre (nessun simbolo #).
- <alignment>
- Una stringa facoltativa che descrive l'allineamento e l'offset dell'icona.
Esempi
| Un esempio di base. L'icona con valore zero viene visualizzata con la dimensione del valore zero, ovvero 30 pixel. Le dimensioni aumentano di pari passo con i dati. |  chd=t:0,10,20,30,40,50,60,70 |
In questo esempio, le icone prendono i dati sulle dimensioni dalla linea gialla, ma vengono visualizzate sulla linea blu.
|
 chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Variante di colore e dimensione (cm_color_size)
Puoi variare il colore e le dimensioni di un indicatore del grafico contestuale, in base alla serie di dati di tua scelta.
Sintassi
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- <icon_type>
- La forma dell'icona. Scegli uno dei seguenti valori:
maps_pin,diskosquare. - <color_data_series>
- L'indice in base zero della serie di dati utilizzato per variare il colore delle icone.
- <low_color>
- Il valore del colore basso nell'intervallo, sotto forma di colore esadecimale HTML di tre o sei cifre (nessun simbolo #). Questo valore è associato al valore più basso possibile nell'intervallo di dati disponibili.
- <middle_color>
- Il valore di colore centrale nell'intervallo, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #). Questo valore è associato al valore medio nell'intervallo di dati disponibili.
- <high_color>
- Il valore del colore più alto nell'intervallo, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #). Questo valore è associato al valore più alto possibile nell'intervallo di dati disponibile.
- <size_data_series>
- L'indice in base zero della serie di dati utilizzato per variare le dimensioni delle icone.
- <zero_value_size>
- La dimensione di base dell'icona, con il valore minimo dei dati per la serie.
- <size_multiplier>
- Un fattore di scala delle dimensioni. Questo valore viene moltiplicato per la differenza tra il valore dei dati di ogni icona e il valore minimo della serie per calcolare le dimensioni finali dell'icona. Pertanto, un'icona con valore dati pari a 0 non sarà interessata da questo moltiplicatore.
- <min_size>
- Le dimensioni minime di qualsiasi icona, in pixel.
- <outline_color>
- Il colore dei contorni dell'icona, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #).
- <alignment>
- Una stringa facoltativa che descrive l'allineamento e l'offset dell'icona.
Esempi
In questo esempio vengono utilizzate due righe. I segnaposto utilizzano i dati sui colori della serie su cui vengono visualizzati, ma usano i dati sulle dimensioni delle altre serie.
|
 chd=s:0akAZtnkmi,nbMPJOKXXS |
Variante di sovrapposizione (cm_repeat)
Puoi variare l'altezza di una pila di icone in base al valore dei dati in un punto specifico.
Sintassi
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- L'icona da utilizzare. Specifica una stringa ID che identifica una delle immagini elencate alla fine della pagina.
- <repeat_series_index>
- L'indice in base zero della serie di dati utilizzato per calcolare quante icone posizionare in questo punto.
- <scaling_factor>
- Il valore della serie di dati di origine viene ridimensionato su un valore compreso tra 0 e 1 e moltiplicato per questo valore per determinare quanti indicatori posizionare in questo punto. I valori parziali vengono troncati.
- <stacking_direction>
- Direzione di sovrapposizione: "h" (minuscolo) per orizzontale o "V" (maiuscole) per verticale.
- <icon_size>
- Le dimensioni di ogni indicatore, espresse in pixel. Sono supportati i seguenti valori: 12, 16, 24.
- <fill_color>
- Il colore di riempimento dell'icona, sotto forma di colore esadecimale HTML di tre o sei cifre (nessun simbolo #).
- <outline_color>
- Il colore dei contorni dell'icona, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #).
- <spacing>
- Lo spazio da inserire tra ciascun indicatore in una pila, in pixel.
- <alignment>
- Una stringa facoltativa che descrive l'allineamento e l'offset dell'icona.
Esempio
In questo esempio viene utilizzata una seconda serie di dati fittizia. Non viene visualizzata nel grafico, ma viene utilizzata come un modo per distribuire uniformemente tutti gli stack, a partire dalla parte inferiore del grafico.
|
 chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Impilamento e variazione di colore (cm_repeat_color)
Puoi modificare l'altezza e il colore di una pila di icone in base al valore dei dati in un punto specifico.
Sintassi
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- L'icona da utilizzare. Specifica una stringa ID che identifica una delle immagini elencate alla fine della pagina.
- <repeat_series_index>
- L'indice in base zero della serie di dati utilizzato per calcolare quante icone posizionare in questo punto.
- <scaling_factor>
- Il valore della serie di dati di origine viene ridimensionato su un valore compreso tra 0 e 1 e moltiplicato per questo valore per determinare quanti indicatori posizionare in questo punto. I valori parziali vengono troncati.
- <stacking_direction>
- Direzione di sovrapposizione: "h" (minuscolo) per orizzontale o "V" (maiuscole) per verticale.
- <icon_size>
- Le dimensioni di ogni indicatore, espresse in pixel. Sono supportati i seguenti valori: 12, 16, 24.
- <color_data_series>
- L'indice in base zero della serie di dati utilizzato per variare il colore delle icone.
- <low_color>
- Il valore del colore basso nell'intervallo, sotto forma di colore esadecimale HTML di tre o sei cifre (nessun simbolo #). Questo valore è associato al valore più basso possibile nell'intervallo di dati disponibili.
- <middle_color>
- Il valore di colore centrale nell'intervallo, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #). Questo valore è associato al valore medio nell'intervallo di dati disponibili.
- <high_color>
- Il valore del colore più alto nell'intervallo, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #). Questo valore è associato al valore più alto possibile nell'intervallo di dati disponibile.
- <outline_color>
- Il colore dei contorni dell'icona, sotto forma di colore esadecimale HTML a tre o sei cifre (nessun simbolo #).
- <spacing>
- Lo spazio da inserire tra ciascun indicatore in una pila, in pixel.
- <alignment>
- Una stringa facoltativa che descrive l'allineamento e l'offset dell'icona.
Esempio
|
 chem= |