Importante: sebbene i grafici Google dinamici e interattivi vengano gestiti attivamente, abbiamo ufficialmente ritirato i grafici statici Google nel 2012. È stato disattivato il 18 marzo 2019.
In questa pagina viene descritto come creare una serie di callout, fumetti, segnaposto e altri elementi grafici che possono essere creati utilizzando un URL.
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- Introduzione
- Sintassi
- Tipi di icone
- Bolle
- Pin
- Note di stile divertenti
- Note sulle previsioni meteo
- Blocchi di testo con caratteri con contorni (solo testo)
- Blocchi di testo con caratteri con contorni (Testo + icona)
- Elenco di flag e icone disponibili
- Stringhe di testo
- Ombre
Introduzione
Puoi creare una varietà di callout, segnaposto o fumetti interessanti che combinano testo e immagini. Questi elementi sono chiamati icone dinamiche.
Sintassi
URL principale: https://chart.googleapis.com/chart?
Le icone dinamiche supportano i seguenti parametri dopo il carattere ? nell'URL principale:
| 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.
|
Tipi di icone
| Tipo | Esempi |
|---|---|
| Bolle: scegli bolle di testo piccole o grandi, con o senza icone. |     |
| Segnaposto: i tipi di segnaposto possono essere semplici, speciali o inclinati e possono avere un'icona, una lettera singola o stringhe di testo più lunghe. |       |
| Note di stile divertenti con testo e titolo facoltativo |  |
| Note sulle previsioni meteo con titolo, testo e icona meteo |  |
| Blocco di testo con contorni multilinea, nessuna icona |  |
| Blocco di testo con contorno a riga singola con icona |   |
Bolle
Le bolle sono disponibili in varie combinazioni di funzionalità: di dimensioni grandi o piccole, con o senza icona, testo su una riga o su più righe. La seguente tabella descrive i tipi di bolle e la relativa sintassi. La descrizione di ciascun valore parametro è riportata sotto la tabella.
Alcune note aggiuntive:
- Tutte le bolle si ridimensionano per adattarsi alla larghezza e all'altezza del testo inserito.
- La costante di bolla supporta una variante che termina con
_withshadow. Se utilizzi la variante_withshadow, viene aggiunta un'ombra sotto il fumetto.
| Testo | Icona | Sintassi | Solo ombra | Esempio |
|---|---|---|---|---|
| Una riga | No | chst= |
chst= |
 chst=d_bubble_text_small |
| Una riga | Yes | chst= |
chst= |
 chst=d_bubble_icon_text_small |
| Una riga | Yes |
chst= |
chst= |
 chst=d_bubble_icon_text_big |
| Multilinea | No | chst= |
chst= |
 chst=d_bubble_texts_big |
| Multilinea | Yes |
|
chst= |
 chst=d_bubble_icon_texts_big |
Sintassi
- <icon_string>
- Una stringa che specifica una delle icone descritte alla fine del documento.
- <frame_style>
- La direzione della coda. Scegli le seguenti costanti di direzione della coda:
bb- Cornice a palloncino, coda in basso a sinistra
bbtl- Inquadratura a palloncino, coda in alto a sinistra
bbtr- Inquadratura a palloncino, coda in alto a destra
bbbr: cornice a palloncino, coda in basso a destra
bbT- Montatura a palloncino, senza coda
edge_bl: cornice perimetrale, coda sul bordo inferiore, estremità sinistra
edge_bc: cornice sul bordo, coda sul bordo inferiore, centrata
edge_br: cornice perimetrale, coda sul bordo inferiore, estremità destra
edge_tl: cornice perimetrale, coda sul bordo superiore, estremità sinistra
edge_tc: cornice sul bordo, coda sul bordo superiore, centrata
edge_tr: cornice perimetrale, coda sul bordo superiore, estremità destra
edge_lt: cornice di bordo, coda sul bordo sinistro, estremità superiore
edge_lc: cornice sul bordo, coda sul bordo sinistro, centrata
edge_lb: cornice perimetrale, coda sul bordo sinistro, estremità inferiore
edge_rt: cornice perimetrale, coda sul bordo destro, estremità superiore
edge_rc: cornice sul bordo, coda sul bordo destro, centrata
edge_rb: cornice perimetrale, coda sul bordo destro, estremità inferiore
- <fill_color>
- Il colore di riempimento delle bolle, sotto forma di colore esadecimale HTML a sei cifre.
- <text_color>
- Il colore del testo, espresso come colore esadecimale HTML a sei cifre.
- <text>
- Una singola riga di testo nel fumetto per una riga. Gli spazi devono essere costituiti da segni +.
- <text_line_1>|...|<text_line_n>
- Una o più righe di testo, per fumetti di testo su più righe. Ogni riga è separata dal simbolo |. La prima riga viene visualizzata più grande e in grassetto. Gli spazi devono essere sostituiti con il segno +.
Solo ombra
Per i fumetti, puoi anche disegnare l'ombra libera utilizzando la sintassi mostrata nella tabella in alto. Esempi:
 chst= |
 chst= |
 chst= |
 chst= |
 chst= |
Segnaposto
Puoi creare una serie di segnaposto con icone e/o brevi stringhe di testo. Ecco i tipi di segnaposto disponibili.
| Tipo di segnaposto | Fumetto costante | Esempi |
|---|---|---|
| Segnaposto semplice con una lettera singola o un'icona |
|
  |
| Segnaposto inclinato/stellato con singola lettera o icona |
|
    |
| Spina scalabile, ruotabile e su più righe | chst=d_map_spin |
 |
Segnaposto normale
con lettera singola o icona 
Si tratta di una piccola puntina in posizione verticale che può contenere una piccola icona o una singola lettera.
Sintassi delle lettere
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
Sintassi delle icone
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- <character>
- [Solo testo in primo piano] Un singolo carattere di testo.
- <icon_string>
- [Solo segnaposto icone] Una stringa che specifica una delle icone descritte alla fine di questo documento.
- <fill_color>
- Il colore di riempimento delle bolle, sotto forma di colore esadecimale HTML a sei cifre.
- <text_color>
- [Solo segnaposto di testo] Il colore del testo, sotto forma di colore esadecimale HTML a sei cifre.
Solo ombra
Per disegnare l'ombra solo per questo tipo di segnaposto, utilizza questa sintassi:
chst=d_map_pin_shadow
Il parametro chld non è richiesto solo per un'ombra.
Esempi
 chst=d_map_pin_letter_withshadow |
 chst=d_map_pin_letter |
 chst=d_map_pin_icon |
 chst=d_map_pin_shadow |
Segnaposto inclinato/speciale con singola
lettera o icona 
Si tratta di un piccolo segnaposto che può essere inclinato a sinistra o a destra oppure con una stella sovrapposta. I contenuti del segnaposto possono essere un singolo carattere o una piccola icona.
Sintassi delle lettere
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
Sintassi delle icone
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- <pin_style>
- Lo stile della puntina. Scegli una delle seguenti costanti:
pin
pin_star
pin_sleft
pin_sright
- <icon_string>
- [Segnaposto icone] Una stringa che specifica una delle icone descritte alla fine del documento.
- <character>
- [Segnaposto di testo] Un singolo carattere di testo.
- <fill_color>
- Il colore di riempimento delle bolle, sotto forma di colore esadecimale HTML a sei cifre.
- <text_color>
- [Segnaposto di testo] Il colore del testo, sotto forma di colore esadecimale HTML a sei cifre.
- <star_fill_color>
- [Segnaposto a stella] Il colore di riempimento della stella, espresso come colore esadecimale HTML a sei cifre.
Solo ombra
Per disegnare l'ombra solo per questo tipo di segnaposto, utilizza questa sintassi:
chst=d_map_xpin_shadow chld=<pin_style>
Esempi
 chst=d_map_xpin_letter |
 chst=d_map_xpin_letter |
 chst=d_map_xpin_icon |
 chst=d_map_xpin_shadow |
Blocco del testo con scalabilità e rotazione 
Si tratta di un segnaposto che puoi ridimensionare manualmente per includere stringhe di testo più lunghe. Puoi anche ruotare il segnaposto di un valore personalizzato e controllare dimensioni e colore del carattere.
Sintassi
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- <scale_factor>
- Un fattore di ridimensionamento per specificare la dimensione del segnaposto. Si tratta di un numero in virgola mobile positivo, dove 0,5 è la dimensione dei segnaposto non in scala. 0,25 corrisponde a metà di questa dimensione, 1 corrisponde al doppio di questa dimensione e così via.
- <rotation_deg>
- La rotazione del segnaposto, in gradi. Sono consentiti valori positivi e negativi. Specifica 0 per un segnaposto verticale.
- <fill_color>
- Il colore di riempimento delle bolle, sotto forma di colore esadecimale HTML a sei cifre.
- <font_size>
- Le dimensioni del carattere del testo, in pixel.
- <font_style>
- "_" (trattino basso) per il testo normale o "b" per il testo in grassetto.
- <text_line_1>...<text_line_n>
- Una o più righe di testo, delimitate da | caratteri.
Esempi
 chst=d_map_spin |
 chst=d_map_spin |
 chst=d_map_spin |
Note di stile divertenti
Puoi creare una varietà di note di testo nei modelli di novità, ad esempio una nota adesiva o un fumetto. Se vuoi, puoi includere una riga del titolo nella nota.
Queste note hanno una dimensione fissa e non cresceranno o si ridurranno per adattarsi alle dimensioni del testo.
Sintassi
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- cst
- Specifica
d_fnote_titleper una nota con un titolo od_fnoteper una nota senza titolo. In una nota con un titolo, la prima riga di testo viene formattata come titolo (più grande e in grassetto). - <note_type>
- Una stringa che descrive la forma della nota. Scegli una delle stringhe di tipo di nota nella tabella seguente.
- <note_size>
- 1 (uno) per una nota grande o 2 per una nota piccola. Le dimensioni dei modelli sono fisse; i modelli non crescono o si restringono per adattarsi al testo. Prova entrambe le dimensioni per vedere quale contiene meglio il testo.
- <text_color>
- Il colore del testo, sotto forma di colore esadecimale a sei cifre; i valori alfa non sono accettati.
- <text_alignment>
- L'allineamento per tutto il testo, inclusa l'intestazione. Scegli uno dei seguenti
valori:
- l - ("L") allineato a sinistra
- h - Allineata al centro
- r - Allineato a destra
- <text_line_1>| ...|<text_line_n>
- Il testo della nota. Utilizza il carattere | per indicare una nuova riga. Se
chst=d_fnote_title, la prima riga di testo viene formattata come titolo.
Modelli per i tipi di nota
I seguenti modelli sono supportati per i modelli di note. La stringa note_type per ciascuno è mostrata sotto il modello.
Nota: le stringhe di testo sono sensibili alle maiuscole.
 arrow_d |
 balloon |
 pinned_c |
 sticky_y |
 taped_y |
 thought |
Esempi
| Descrizione | Esempio |
|---|---|
Nota con un titolo: chst=d_fnote_title. La prima riga di testo viene utilizzata come titolo. La dimensione della nota è grande (1). |
 chst=d_fnote_title |
Nota senza titolo: chst=d_fnote.il testo è centrato. |
 chst=d_fnote |
Un modello utile per una vecchia barzelletta. |
|
Note sulle previsioni meteo
Puoi creare una nota con un'icona indicatore meteo. Layout simile alle note con uno stile divertente, ma il colore del testo è sempre nero, il testo è sempre allineato a sinistra e puoi avere solo da una a tre righe di testo.
Queste note hanno una dimensione fissa e non cresceranno o si ridurranno per adattarsi alle dimensioni del testo.
Sintassi
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- cst
d_weatherindica una nota meteo.- <note_type>
- Il modello da utilizzare per questa nota. Utilizza una delle stringhe per le note elencate nell'elenco di note in stile divertente sopra.
- <weather_icon>
- Una delle stringhe di icone meteo nella tabella seguente. Una nota può utilizzare una sola icona meteo.
- <title>|<line_2>|<line_3>
- Il titolo, più altre due righe di testo (queste righe di testo aggiuntive sono facoltative). Il titolo è più grande e in grassetto.
Icone meteo
Ecco un elenco delle icone meteo supportate, che mostra la stringa weather_icon per ognuna.
Nota: le stringhe di testo sono sensibili alle maiuscole.
 clear-night-moon |
 cloudy-heavy |
 cloudy-sunny |
 cloudy |
 rain |
 rainy-sunny |
 snow |
 snowflake |
 snowy-sunny |
 sunny-cloudy |
 sunny |
 thermometer-cold |
 thermometer-hot |
 thunder |
 windy |
Esempi
| Descrizione | Esempio |
|---|---|
Una nota meteo con un titolo e due righe su un modello di stile taped_y. |
|
| Un pensiero per l'inverno. |
|
Blocchi di testo con caratteri con contorni (solo testo)
Puoi creare un blocco di testo con contorni con sfondo bianco. Se vuoi un'icona di testo +, valuta l'utilizzo della variazione a riga singola, che supporta un'icona.
Sintassi
chst=d_text_outline chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>
- <text_fill_color>
- Il colore di riempimento del testo. È un colore esadecimale a sei cifre; i valori alfa non sono accettati.
- <font_size>
- Un numero che specifica la dimensione del carattere, in pixel.
- <text_alignment>
- L'allineamento per tutto il testo, inclusa l'intestazione. Scegli uno dei seguenti
valori:
- l - ("L") allineato a sinistra
- h - Allineata al centro
- r - Allineato a destra
- <outline_color>
- Il colore dei contorni del testo. Questo è un colore esadecimale a sei cifre; i valori alfa non sono accettati.
- <font_weight>
- Testo normale o in grassetto. Sottolinea "_" per il testo normale e "b" per il testo in grassetto.
- <text_line_1>| ...|<text_line_n>
- Il testo della nota. Utilizza il carattere | per indicare una nuova riga. Se
chst=d_fnote_title, la prima riga di testo viene formattata come titolo.
Esempi
 chst=d_text_outline |
 chst=d_text_outline |
Blocchi di testo con contorni (testo + icona) 
Puoi creare una singola riga di testo delineato più un'icona in alto, a sinistra, in basso o a destra del blocco. Se non hai bisogno di un'icona, utilizza il blocco di testo con carattere delineato.
Sintassi
chst=<icon_position_string> chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>
- <icon_position_string>
- Specifica la posizione in cui viene visualizzata l'icona nella casella di testo. Scegli uno dei seguenti valori:
d_simple_text_icon_below- Posiziona l'icona nella parte inferiore della casella:
d_simple_text_icon_above: posiziona l'icona nella parte superiore della casella:
d_simple_text_icon_left- Posiziona l'icona a sinistra della casella:
d_simple_text_icon_right: posiziona l'icona a destra della casella:
- <text>
- Il testo da mostrare. Una sola riga; utilizza + per gli spazi.
- <font_size>
- Un numero che specifica la dimensione del carattere, in pixel.
- <font_fill_color>
- Il colore di riempimento del testo, sotto forma di stringa di sei cifre. I valori alpha non sono supportati.
- <icon_name>
- Uno dei nomi delle icone elencati in fondo a questo documento.
- <icon_size>
- L'altezza dell'icona, in pixel. Sono supportati i seguenti valori: 12, 16, 24.
- <icon_fill_color>
- Il colore dell'icona, come una stringa di sei cifre. I valori alpha non sono supportati.
- <icon_and_text_border_color>
- Il colore del bordo intorno all'icona e al testo, come una stringa di sei cifre. I valori alpha non sono supportati.
Elenco di icone e flag disponibili
Le seguenti immagini possono essere utilizzate nelle icone dinamiche utilizzando il parametro appropriato.
Nota: le stringhe di testo sono sensibili alle maiuscole
Nota: le icone sono disponibili solo nelle seguenti dimensioni: 12, 16, 24.
Icone di base
Icone di Glyphish.com
Queste icone sono di Joseph Wain / glyphish.com. Questo lavoro è concesso in licenza secondo la licenza Creative Commons Attribuzione 3.0 degli Stati Uniti.
Flag
Ecco le bandiere per alcuni paesi e territori.
Stringhe di testo
Tutto il testo visualizzato inviato nella richiesta 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 il tuo URL immagine utilizzi un browser che non esegue questa operazione. Di solito, è preferibile codificare con UTF-8 e URL 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.
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 talmente vicine che l'ombra di una di una si sovrappone a un'altra. Consulta la documentazione relativa al tipo di icona specifico per sapere se puoi tracciare da solo la relativa ombra.