Important:Bien que les graphiques Google dynamiques et interactifs soient activement gérés, nous avons officiellement abandonné les graphiques statiques Google Image depuis 2012. Il a été désactivé le 18 mars 2019.
Cette page explique comment créer divers types d'accroches, de bulles, d'épingles et d'autres éléments graphiques à l'aide d'une URL.
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- Introduction
- Syntaxe
- Types d'icônes
- Bulles
- Épingles
- Notes de style amusantes
- Notes sur les prévisions météo
- Blocs de texte avec police encadrée (texte uniquement)
- Polices encadrées de blocs de texte (Texte + Icône)
- Liste des indicateurs et des icônes disponibles
- Chaînes de texte
- Ombres
Présentation
Vous pouvez créer diverses accroches, épingles ou bulles intéressantes combinant du texte et des images. Ces éléments sont appelés icônes dynamiques.
Syntaxe
URL racine:https://chart.googleapis.com/chart?
Les icônes dynamiques sont compatibles avec les paramètres suivants après le signe ? dans l'URL racine:
| Paramètres | Obligatoire ou facultatif | Description |
|---|---|---|
chst=<icon_string_constant> |
Obligatoire | Décrit le type d'icône à créer.
|
chld=<icon_data> |
Obligatoire | Les données spécifiques utilisées pour décrire la taille, la rotation, le texte et d'autres données requises de l'icône.
|
Types d'icônes
| Type | Exemples |
|---|---|
| Bulles : choisissez des bulles de texte petites ou grandes, avec ou sans icône. |     |
| Épingles : les repères peuvent être simples, suivis ou inclinés, et peuvent comporter une icône, une seule lettre ou des chaînes de texte plus longues. |       |
| Notes amusantes avec texte et titre facultatif |  |
| Notes de prévisions météo avec titre, texte et icône météo |  |
| Bloc de texte multiligne avec contours, pas d'icône |  |
| Bloc de texte avec contours sur une seule ligne avec icône |   |
Bulles
Les bulles peuvent se décliner en plusieurs combinaisons d'éléments géographiques: grande ou petite taille, avec ou sans icône, ou texte sur une seule ou plusieurs lignes. Le tableau suivant décrit les types de bulles et la syntaxe de chacun d'entre eux. La description de chaque valeur de paramètre est décrite sous le tableau.
Quelques remarques supplémentaires:
- Toutes les bulles sont redimensionnées pour s'adapter à la largeur et à la hauteur du texte que vous saisissez.
- La constante de bulle accepte une variante se terminant par
_withshadow. Si vous utilisez la variante_withshadow, une ombre est ajoutée sous votre bulle.
| Texte | Icon | Syntaxe | Ombre uniquement | Exemple |
|---|---|---|---|---|
| Une seule ligne | No | chst= |
chst= |
 chst=d_bubble_text_small |
| Une seule ligne | Yes | chst= |
chst= |
 chst=d_bubble_icon_text_small |
| Une seule ligne | Yes |
chst= |
chst= |
 chst=d_bubble_icon_text_big |
| Multiligne | No | chst= |
chst= |
 chst=d_bubble_texts_big |
| Multiligne | Yes |
|
chst= |
 chst=d_bubble_icon_texts_big |
Syntaxe
- <icon_string>
- Chaîne spécifiant l'une des icônes décrites à la fin de ce document.
- <frame_style>
- Sens de l'arrière. Choisissez l'une des constantes de direction de la queue suivantes :
bb: cadre d'infobulle, queue en bas à gauche
bbtl: cadre d'infobulle, queue en haut à gauche
bbtr: cadre d'infobulle, queue en haut à droite
bbbr: cadre d'infobulle, queue en bas à droite
bbT: cadre d'infobulle, sans queue
edge_bl: cadre de bord, queue au bord inférieur, extrémité gauche
edge_bc: cadre sur le bord, queue au bord inférieur, centré
edge_br: cadre de bord, queue au bord inférieur, extrémité droite
edge_tl: cadre de bord, queue en haut, extrémité gauche
edge_tc: cadre de bord, queue en haut, centré
edge_tr: cadre de bord, queue en haut, extrémité droite
edge_lt: cadre de bord, queue sur le bord gauche, haut
edge_lc: cadre de bord, queue sur le bord gauche, centré
edge_lb: cadre de bord, queue sur le bord gauche, extrémité inférieure
edge_rt: cadre de bord, queue sur le bord droit, haut
edge_rc: cadre de bord, queue sur le bord droit, centré
edge_rb: cadre de bord, queue sur le bord droit, extrémité inférieure
- <fill_color>
- Couleur de remplissage de la bulle, sous la forme d'une couleur hexadécimale HTML à six chiffres.
- <text_color>
- Couleur du texte, sous forme de couleur hexadécimale HTML à six chiffres.
- <text>
- Une seule ligne de texte pour les bulles d'une ligne. Les espaces doivent être des signes +.
- <text_line_1>|...|<text_line_n>
- Une ou plusieurs lignes de texte, pour les bulles de texte multilignes. Chaque ligne est séparée par un signe |. La première ligne s'affiche en caractères de grande taille et en gras. Les espaces doivent être remplacés par +.
Ombre uniquement
Pour les bulles, vous pouvez également dessiner l'ombre autoportante à l'aide de la syntaxe présentée dans le tableau ci-dessus. Exemples :
 chst= |
 chst= |
 chst= |
 chst= |
 chst= |
Épingles
Vous pouvez créer divers types d'épingles avec des icônes et/ou de courtes chaînes de texte. Voici les types de repères disponibles.
| Type d'épingle | Constante des bulles | Exemples |
|---|---|---|
| Repère simple avec une seule lettre ou icône |
|
  |
| Repère incliné/étoile avec une seule lettre ou icône |
|
    |
| Codes multilignes évolutifs, rotatifs et multilignes | chst=d_map_spin |
 |
Repère simple avec une seule lettre ou une icône 
Il s'agit d'une petite épingle verticale qui peut contenir une petite icône ou une seule lettre.
Syntaxe des lettres
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
Syntaxe des icônes
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- <caractère>
- [Repères de texte uniquement] Un seul caractère de texte.
- <icon_string>
- [Repères d'icône uniquement] Chaîne spécifiant l'une des icônes décrites à la fin de ce document.
- <fill_color>
- Couleur de remplissage de la bulle, sous la forme d'une couleur hexadécimale HTML à six chiffres.
- <text_color>
- [Codes du texte uniquement] Couleur du texte, sous forme de couleur hexadécimale HTML à six chiffres.
Ombre uniquement
Pour dessiner l'ombre uniquement pour ce type de repère, utilisez la syntaxe suivante:
chst=d_map_pin_shadow
Le paramètre chld n'est pas obligatoire uniquement pour les ombres.
Exemples
 chst=d_map_pin_letter_withshadow |
 chst=d_map_pin_letter |
 chst=d_map_pin_icon |
 chst=d_map_pin_shadow |
Épingle inclinée/Suivi avec une seule lettre ou icône 
Il s'agit d'un petit repère qui peut être incliné vers la gauche ou la droite, ou qui présente un chevauchement en étoile. Le contenu du repère peut être un caractère unique ou une petite icône.
Syntaxe des lettres
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
Syntaxe des icônes
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- <pin_style>
- Style d'épingle. Choisissez l'une des constantes suivantes :
pin
pin_star
pin_sleft
pin_sright
- <icon_string>
- [Repères d'icône] Chaîne spécifiant l'une des icônes décrites à la fin de ce document.
- <caractère>
- [Repères de texte] : un seul caractère de texte.
- <fill_color>
- Couleur de remplissage de la bulle, sous la forme d'une couleur hexadécimale HTML à six chiffres.
- <text_color>
- [Codes du texte] Couleur du texte, sous forme de couleur hexadécimale HTML à six chiffres.
- <star_fill_color>
- [Repères de l'étoile] Couleur de remplissage de l'étoile, sous forme de couleur hexadécimale HTML à six chiffres.
Ombre uniquement
Pour dessiner l'ombre uniquement pour ce type de repère, utilisez la syntaxe suivante:
chst=d_map_xpin_shadow chld=<pin_style>
Exemples
 chst=d_map_xpin_letter |
 chst=d_map_xpin_letter |
 chst=d_map_xpin_icon |
 chst=d_map_xpin_shadow |
Repère de texte avec mise à l'échelle et rotation 
Il s'agit d'une épingle que vous pouvez ajuster manuellement pour inclure des chaînes de texte plus longues. Vous pouvez également faire pivoter le repère jusqu'à une certaine valeur, et contrôler la taille et la couleur de la police.
Syntaxe
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- <scale_factor>
- Facteur de scaling permettant de spécifier la taille du repère. Il s'agit d'un nombre à virgule flottante positif, où 0,5 correspond à la taille des repères non mis à l'échelle. 0,25 aurait la moitié de cette taille, 1 correspondrait au double de cette taille, et ainsi de suite.
- <rotation_deg>
- Rotation de l'épingle, en degrés. Les valeurs positives et négatives sont autorisées. Indiquez 0 pour un repère vertical.
- <fill_color>
- Couleur de remplissage de la bulle, sous la forme d'une couleur hexadécimale HTML à six chiffres.
- <font_size>
- Taille de police du texte, en pixels.
- <font_style>
- Utilisez soit un trait de soulignement ("_") pour le texte normal, soit un "b" pour le texte en gras.
- <text_line_1>...<text_line_n>
- Une ou plusieurs lignes de texte, délimitées par des caractères |.
Exemples
 chst=d_map_spin |
 chst=d_map_spin |
 chst=d_map_spin |
Notes de style amusantes
Vous pouvez créer diverses notes textuelles dans des modèles de nouveauté, telles qu'une note autocollante ou une bulle de pensée. Vous pouvez éventuellement inclure une ligne de titre dans la note.
Ces notes ont une taille fixe ; leur taille et leur taille ne s'agrandissent pas ou ne se rétrécissent pas pour s'adapter à la taille de votre texte.
Syntaxe
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- chst
- Indiquez
d_fnote_titlepour une note avec titre oud_fnotepour une note sans titre. Dans une note associée à un titre, la première ligne de texte est mise en forme comme un titre (en plus grand et en gras). - <note_type>
- Chaîne décrivant la forme de la note. Choisissez l'une des chaînes de type de note dans le tableau ci-dessous.
- <note_size>
- 1 (un) pour une grande note ou 2 pour une petite note. La taille des modèles est fixe. Les modèles n'augmentent ni ne se rétrécissent pour s'adapter au texte. Testez les deux tailles pour déterminer laquelle retient le mieux votre texte.
- <text_color>
- Couleur du texte, sous forme de couleur hexadécimale à six chiffres. Les valeurs alpha ne sont pas acceptées.
- <text_alignment>.
- Alignement de tout le texte, y compris l'en-tête. Choisissez l'une des valeurs suivantes :
- l - ("L") Aligné à gauche
- h - Aligné au centre
- r - Aligné à droite
- <text_line_1>| ...|<text_line_n>
- Texte de la note. Utilisez le caractère | pour indiquer une nouvelle ligne. Lorsque la valeur est
chst=d_fnote_title, la première ligne de texte est mise en forme en tant que titre.
Modèles de types de notes
Les modèles suivants sont compatibles avec les modèles de notes. La chaîne note_type pour chacun est affichée sous le modèle.
Remarque:Les chaînes de texte sont sensibles à la casse.
 arrow_d |
 balloon |
 pinned_c |
 sticky_y |
 taped_y |
 thought |
Exemples
| Description | Exemple |
|---|---|
Note avec titre: chst=d_fnote_title. La première ligne de texte est utilisée comme titre. La taille correspond à une grande note (1). |
 chst=d_fnote_title |
Remarque sans titre: chst=d_fnote.Le texte est centré. |
 chst=d_fnote |
Un modèle utile pour une vieille blague. |
|
Remarques sur les prévisions météo
Vous pouvez créer une note avec une icône d'indicateur météo. Une mise en page semblable aux notes de style amusantes, mais la couleur du texte est toujours noire, le texte est toujours aligné à gauche et vous ne pouvez utiliser qu'une à trois lignes de texte.
Ces notes ont une taille fixe ; elles ne s'agrandissent pas ou ne se réduisent pas pour s'adapter à la taille de votre texte.
Syntaxe
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- chst
d_weatherindique une note météo.- <note_type>
- Modèle à utiliser pour cette note. Utilisez l'une des chaînes de notes répertoriées dans la liste de notes amusante ci-dessus.
- <weather_icon>
- Une des chaînes d'icône Météo dans le tableau ci-dessous. Une note peut prendre une seule icône météo.
- <title>|<line_2>|<line_3>
- Le titre et jusqu'à deux lignes de texte supplémentaires (ces lignes de texte supplémentaires sont facultatives) Le titre est plus grand et en gras.
Icônes météo
Voici une liste d'icônes météo acceptées, affichant la chaîne weather_icon pour chacune d'elles.
Remarque:Les chaînes de texte sont sensibles à la casse.
 clear-night-moon |
 cloudy-heavy |
 cloudy-sunny |
 cloudy |
 rain |
 rainy-sunny |
 snow |
 snowflake |
 snowy-sunny |
 sunny-cloudy |
 sunny |
 thermometer-cold |
 thermometer-hot |
 thunder |
 windy |
Exemples
| Description | Exemple |
|---|---|
Note météo avec un titre et deux lignes sur un modèle de style taped_y. |
|
| Un vœu pieux pour l'hiver. |
|
Blocs de texte avec police encadrée (texte uniquement)
Vous pouvez créer un bloc de texte avec contours sur fond blanc. Si vous souhaitez ajouter du texte et une icône, vous pouvez utiliser la variété sur une seule ligne, qui accepte les icônes.
Syntaxe
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>
- Couleur de remplissage du texte. Il s'agit d'une couleur hexadécimale à six chiffres. Les valeurs alpha ne sont pas acceptées.
- <font_size>
- Nombre indiquant la taille de la police, en pixels.
- <text_alignment>.
- Alignement de tout le texte, y compris l'en-tête. Choisissez l'une des valeurs suivantes :
- l - ('L')Aligné à gauche
- h - Aligné au centre
- r - Aligné à droite
- <outline_color>
- Couleur du contour du texte. Il s'agit d'une couleur hexadécimale à six chiffres. Les valeurs alpha ne sont pas acceptées.
- <font_weight>
- Texte normal ou en gras. Trait de soulignement "_" pour le texte normal et "b" pour le texte en gras.
- <text_line_1>| ...|<text_line_n>
- Texte de la note. Utilisez le caractère | pour indiquer une nouvelle ligne. Lorsque la valeur est
chst=d_fnote_title, la première ligne de texte est mise en forme en tant que titre.
Exemples
 chst=d_text_outline |
 chst=d_text_outline |
Polices avec contours encadrés (texte + icône) 
Vous pouvez créer une seule ligne de texte avec contour et une icône en haut, à gauche, en bas ou à droite du bloc. Si vous n'avez pas besoin d'icône, utilisez le bloc de texte avec police encadrée.
Syntaxe
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>
- Spécifie l'emplacement de l'icône dans la zone de texte. Choisissez l'une des valeurs suivantes :
d_simple_text_icon_below: place l'icône au bas de la boîte :
d_simple_text_icon_above: place l'icône sur le dessus de la boîte :
d_simple_text_icon_left: place l'icône à gauche de la case :
.d_simple_text_icon_right: place l'icône à droite de la case :
- <text>
- Texte à afficher. Une seule ligne ; utilisez "+" pour les espaces.
- <font_size>
- Nombre indiquant la taille de la police, en pixels.
- <font_fill_color>
- Couleur de remplissage du texte, sous forme de chaîne de six chiffres. Les valeurs alpha ne sont pas acceptées.
- <icon_name>
- C'est l'un des noms d'icônes énumérés au bas de ce document.
- <icon_size>
- Hauteur de l'icône en pixels. Les valeurs suivantes sont acceptées: 12, 16, 24.
- <icon_fill_color>
- Couleur de l'icône, sous forme de chaîne de six chiffres. Les valeurs alpha ne sont pas acceptées.
- <icon_and_text_border_color>
- Couleur de la bordure autour de l'icône et du texte, sous forme de chaîne de six chiffres. Les valeurs alpha ne sont pas acceptées.
Liste des indicateurs et des icônes disponibles
Les images suivantes peuvent être utilisées dans les icônes dynamiques en utilisant le paramètre approprié.
Remarque:Les chaînes de texte sont sensibles à la casse.
Remarque:Les icônes ne sont disponibles que dans les tailles suivantes: 12, 16, 24.
Icônes de base
Icônes du site Glyphish.com
Ces icônes sont de Joseph Wain / glyphish.com. Ce travail est concédé sous licence Creative Commons Attribution 3.0 aux États-Unis.
Indicateurs
Voici les drapeaux de certains pays et territoires.
Chaînes de texte
Tout le texte à afficher envoyé dans la requête doit être encodé au format UTF-8, puis au format URL.
Cela ne concerne que les caractères non compatibles avec les URL (il s'agit principalement de lettres de l'alphabet latin (a à z) en majuscules et en minuscules, plus un petit signe de ponctuation). Par exemple, la valeur encodée au format URL et UTF-8 pour la lettre "è" est "%C3%A8" et "%E9%A7%85" pour le caractère chinois 駅. La plupart des navigateurs vous permettent d'utiliser une valeur non encodée dans la chaîne d'URL (par exemple, 駅) et l'encodent pour vous en arrière-plan.
Cependant, il est possible que l'utilisateur qui consulte l'URL de votre image utilise un navigateur qui ne propose pas cette fonctionnalité. Il est donc généralement préférable d'encoder en URL et en UTF-8 tous les caractères non-ASCII dans les chaînes de texte. Notez que cela ne s'applique qu'au texte affiché dans des bulles ou des épingles, et non pour le caractère "&", "|" ou d'autres caractères qui font partie de la syntaxe de l'URL.
Ombres
Vous pouvez ajouter des ombres à de nombreuses icônes, voire dessiner des ombres pour certaines icônes sans l'icône elle-même.
Icônes bloquées 
La plupart de ces icônes peuvent être dessinées avec ou sans ombres. Si l'exécution d'un blocage est possible, la version du nom de l'icône se termine par _withshadow et une autre version sans cette fin. Vous pouvez spécifier une icône avec l'une ou l'autre extrémité, selon que vous souhaitez utiliser l'ombre ou non.
Voici un exemple de bulle de texte moyenne et d'épingle avec et sans ombres:
 chst=d_bubble_icon_text_big |
 chst=d_bubble_icon_text_big_withshadow |
 chst=d_map_pin_icon |
 chst=d_map_pin_icon_withshadow |
Ombres autoportantes 
Certains types d'icônes vous permettent de dessiner leur ombre seul. Cela peut s'avérer utile si vous utilisez plusieurs icônes ombrées qui se chevauchent sur un élément graphique et qu'elles sont si proches que l'ombre d'une ombre se trouve sur un autre graphique. Consultez la documentation de votre type d'icône spécifique pour savoir s'il est possible de dessiner son ombre seul.