Cette page explique comment créer différents types d'accroches, de bulles, d'épingles et d'autres éléments graphiques pouvant être demandés par URL ou ajoutés en tant que repères au-dessus d'autres graphiques.
Sommaire
Présentation
L'API Chart vous permet de créer diverses accroches, épingles ou bulles intéressantes combinant du texte et des images. Ces éléments sont appelés icônes dynamiques.
Vous pouvez créer une image d'icône dynamique autonome ou positionner une icône dynamique au-dessus de votre graphique en tant que type de repère à l'aide du paramètre chem
. Cette page explique comment créer des icônes dynamiques sous forme d'images autonomes ou de repères sur un autre graphique. La page de référence Icônes dynamiques de l'infographie décrit tous les types de types de repères dynamiques disponibles.
La syntaxe de création d'une icône dynamique varie selon que vous souhaitez utiliser une icône autonome ou un repère dynamique dans un autre graphique.
Icônes sur pied
Vous pouvez demander une image d'icône dynamique de la même manière que pour tout autre graphique. Une icône dynamique autonome accepte un ensemble de paramètres différent de celui des autres graphiques:
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.
|
cht |
NON UTILISÉ | Les graphiques avec icône dynamique autonome n'utilisent pas le paramètre cht . |
chs |
NON UTILISÉ | Les graphiques avec icône dynamique autonome n'utilisent pas le paramètre chs . |
chd |
NON UTILISÉ | Utilisez le paramètre chld pour transmettre des données à une icône dynamique autonome. |
Exemple
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
Repères dynamiques
Vous pouvez intégrer une icône dynamique en tant que type de repère sur différents types de graphiques à l'aide du paramètre chem
. Pour en savoir plus, consultez la documentation chem
.
Exemple
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
Caractéristiques courantes des icônes
La plupart des icônes peuvent être associées à des chaînes de texte ou à des ombres.
Chaînes de texte
Tout le texte à afficher transmis à l'API Chart 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 graphique 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.
Lorsque vous utilisez le paramètre chem
pour spécifier des repères d'icône dynamiques, vous devez également échapper certains caractères de votre texte, comme décrit dans la documentation chem
.
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 être 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 icône se superpose à une autre. Par exemple, voici deux bulles ombrées, Robert dessiné en premier, puis Alice:
Notez que l'ombre d'Alice recouvre en partie Robert. Pour résoudre ce problème, vous pouvez d'abord dessiner l'ombre d'Alice, puis la bulle Robert, et enfin Alice sans ombre. Cette approche n'est peut-être pas totalement réaliste en termes d'éclairage et d'ombres, mais elle évite de masquer une bulle avec l'ombre d'une autre:
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
Tous les repères indiquent le même ordre Z (py=1
). Ils sont donc dessinés dans l'ordre indiqué, au-dessus des éléments du graphique (la ligne du graphique). D'abord, l'ombre d'Alice est dessinée, puis la bulle Robert au-dessus et enfin la bulle Alice au-dessus.
Consultez la documentation de votre type d'icône spécifique pour savoir s'il est possible de dessiner son ombre seul.
Icônes contextuelles
Vous pouvez spécifier une icône dont la couleur, la taille ou l'empilement varie en fonction du point auquel elles sont attribuées. Ces types d'icônes ne sont disponibles que sous forme de repères d'icône dynamiques (paramètre chem
), et non en tant qu'icônes autonomes.
Ces icônes peuvent s'afficher sur une série autre que celle qui spécifie leur couleur, leur taille ou les informations d'empilement. Cela signifie que la valeur ds
du paramètre chem
spécifie la série sur laquelle afficher l'icône, mais que les valeurs permettant de déterminer sa taille ou sa couleur sont spécifiées dans les paramètres ci-dessous. Une bonne utilisation consiste à utiliser une série de données masquées pour les données d'icône, mais à afficher les icônes sur une ligne ou une barre visible. Voici quelques exemples :
Icône affichée sur la série de sources | Icône affichée sur une série non source | Icône utilisant une série masquée |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
Types de repères contextuels
Type de repère | Valeur de chem s |
Exemple |
---|---|---|
Variante de couleur | s=cm_color |
|
Variante de taille | s=cm_size |
|
Variantes de couleurs et de tailles | s=cm_color_size |
|
Variante de superposition | s=cm_repeat |
|
Empilement et variation de couleur | s=cm_repeat_color |
Chaînes d'alignement pour les icônes contextuelles
Les icônes contextuelles acceptent une chaîne d'alignement facultative pour spécifier un alignement et un décalage de l'icône par rapport au point de données. Cette chaîne a la syntaxe suivante:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- Deux lettres décrivant l'alignement de l'icône par rapport au point. Exemples :
tl
(angle supérieur gauche) etrb
(angle inférieur droit). Pour obtenir une liste complète et obtenir une description complète, consultez la description du paramètrechem
(alignment_string). - h_anchor_offset
- [Facultatif] Décalage horizontal du point d'ancrage, en pixels. Les valeurs y compris zéro doivent être précédées du signe + ou du signe -. Important:Vous devez encoder le signe "+" au format %2B.
- v_anchor_offset
- [Facultatif] Décalage vertical du point d'ancrage, en pixels. Les valeurs y compris zéro doivent être précédées d'un signe + ou d'un -. Important:Vous devez encoder le signe + au format %2B.
Notez que vous pouvez également utiliser le composant of
du paramètre chem
pour spécifier des décalages horizontaux et verticaux. Si vous spécifiez à la fois le composant of
et les valeurs h_anchor_offset v_anchor_offset
, tous les décalages sont appliqués à l'icône.
Exemples :
hb-0-0 Horizontalment centré en bas Aucun décalage |
lb-0-0 En bas à gauche Aucun décalage |
rb-0-0 En bas à droite Aucun décalage |
ht-0-0 Horizontal en haut Aucun décalage |
hb-20-0 Horizontalment centré en bas -20 horizontal 0 vertical |
hb%2b20-0 Horizontalement central bas +20 horizontal 0 vertical |
hb-0%2b10 Horizontalement central bas 0 horizontal +10 vertical |
hb-0-20 Horizontalement central bas 0 horizontal -20 vertical |
Variante de couleur (cm_color
)
Vous pouvez varier la couleur d'un repère de graphique contextuel en fonction du point qu'il représente. Vous devez spécifier une plage de couleurs. La valeur des données sera mise à l'échelle avec une couleur correspondante dans cette plage.
Syntaxe
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>
- Icône à utiliser. Spécifiez une chaîne d'ID identifiant l'une des images répertoriées à la fin de la page.
- <color_data_series>
- Indice basé sur zéro des séries de données permettant de varier la couleur des icônes.
- <low_color>
- Valeur de faible couleur de la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur la plus basse possible de la plage de données disponible.
- <middle_color>
- Valeur de couleur centrale dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur moyenne de la plage de données disponible.
- <high_color>
- Valeur de couleur la plus élevée de la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur la plus élevée possible de la plage de données disponible.
- <icon_size>
- Taille de l'icône, en pixels. Les valeurs suivantes sont acceptées: 12, 16, 24.
- <outline_color>
- Couleur du contour de l'icône, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #).
- <alignment>
- Chaîne facultative décrivant l'alignement et le décalage de l'icône.
Exemple
|
chem=y;s=cm_color; |
Variante de taille (cm_size
)
Vous pouvez uniquement varier la taille d'un repère de graphique contextuel, en fonction de la série de données de votre choix.
Syntaxe
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>
- Forme de l'icône. Choisissez l'une des valeurs suivantes:
maps_pin
,disk
ousquare
. - <size_data_series>
- Indice basé sur zéro des séries de données permettant de faire varier la taille des icônes.
- <zero_value_size>
- Taille de base de l'icône, correspondant à la valeur de données minimale de la série.
- <size_multiplier>
- Facteur de scaling de la taille. Cette valeur est multipliée par la différence entre la valeur de données de chaque icône et la valeur minimale de la série, afin de calculer la taille finale de l'icône. Par conséquent, une icône à la valeur de données 0 ne sera pas affectée par ce multiplicateur.
- <min_size>
- Taille minimale de l'icône (en pixels).
- <outline_color>
- Couleur du contour de l'icône, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #).
- <fill_color>
- Couleur de remplissage de l'icône, sous la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans le signe #).
- <alignment>
- Chaîne facultative décrivant l'alignement et le décalage de l'icône.
Exemples
Exemple simple. L'icône avec une valeur nulle est affichée avec une taille égale à zéro, soit 30 pixels. Les tailles augmentent avec les données. | chd=t:0,10,20,30,40,50,60,70 |
Dans cet exemple, les icônes utilisent les données de taille de la ligne jaune, mais elles sont affichées sur la ligne bleue.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Variante de couleur et de taille (cm_color_size
)
Vous pouvez varier la couleur et la taille d'un repère de graphique contextuel, en fonction de la série de données de votre choix.
Syntaxe
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>
- Forme de l'icône. Choisissez l'une des valeurs suivantes:
maps_pin
,disk
ousquare
. - <color_data_series>
- Indice basé sur zéro des séries de données permettant de varier la couleur des icônes.
- <low_color>
- Valeur de faible couleur de la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur la plus basse possible de la plage de données disponible.
- <middle_color>
- Valeur de couleur centrale dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur moyenne de la plage de données disponible.
- <high_color>
- Valeur de couleur la plus élevée de la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur la plus élevée possible de la plage de données disponible.
- <size_data_series>
- Indice basé sur zéro des séries de données permettant de faire varier la taille des icônes.
- <zero_value_size>
- Taille de base de l'icône, correspondant à la valeur de données minimale de la série.
- <size_multiplier>
- Facteur de scaling de la taille. Cette valeur est multipliée par la différence entre la valeur de données de chaque icône et la valeur minimale de la série, afin de calculer la taille finale de l'icône. Par conséquent, une icône à la valeur de données 0 ne sera pas affectée par ce multiplicateur.
- <min_size>
- Taille minimale de l'icône (en pixels).
- <outline_color>
- Couleur du contour de l'icône, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #).
- <alignment>
- Chaîne facultative décrivant l'alignement et le décalage de l'icône.
Exemples
Cet exemple utilise deux lignes. Les épingles utilisent les données de couleur de la série sur laquelle ils sont affichés, mais les données de taille des autres séries.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
Variante d'empilement (cm_repeat
)
Vous pouvez varier la hauteur d'une pile d'icônes en fonction de la valeur des données à un point précis.
Syntaxe
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>
- Icône à utiliser. Spécifiez une chaîne d'ID identifiant l'une des images répertoriées à la fin de la page.
- <repeat_series_index>
- Indice basé sur zéro de la série de données permettant de calculer le nombre d'icônes à placer à ce stade.
- <scaling_factor>
- La valeur de la série de données source est mise à l'échelle de 0 à 1, puis multipliée par cette valeur pour déterminer le nombre de repères à placer sur ce point. Les valeurs partielles sont tronquées.
- <stacking_direction>
- Sens d'empilement : "h" (minuscule) pour horizontal ou "V" (majuscule) pour vertical.
- <icon_size>
- Taille de chaque repère, en pixels. Les valeurs suivantes sont acceptées: 12, 16, 24.
- <fill_color>
- Couleur de remplissage de l'icône, sous la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans le signe #).
- <outline_color>
- Couleur du contour de l'icône, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #).
- <spacing>
- Espace à placer entre chaque repère d'une pile (en pixels).
- <alignment>
- Chaîne facultative décrivant l'alignement et le décalage de l'icône.
Exemple
Cet exemple utilise une deuxième série de données factice. Il ne s'affiche pas sur le graphique, mais il permet d'espacer toutes les piles de manière égale, en commençant par le bas du graphique.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Empilement et variante de couleur (cm_repeat_color
)
Vous pouvez varier la hauteur et la couleur d'une pile d'icônes en fonction de la valeur des données à un point précis.
Syntaxe
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>
- Icône à utiliser. Spécifiez une chaîne d'ID identifiant l'une des images répertoriées à la fin de la page.
- <repeat_series_index>
- Indice basé sur zéro de la série de données permettant de calculer le nombre d'icônes à placer à ce stade.
- <scaling_factor>
- La valeur de la série de données source est mise à l'échelle de 0 à 1, puis multipliée par cette valeur pour déterminer le nombre de repères à placer sur ce point. Les valeurs partielles sont tronquées.
- <stacking_direction>
- Sens d'empilement : "h" (minuscule) pour horizontal ou "V" (majuscule) pour vertical.
- <icon_size>
- Taille de chaque repère, en pixels. Les valeurs suivantes sont acceptées: 12, 16, 24.
- <color_data_series>
- Indice basé sur zéro des séries de données permettant de varier la couleur des icônes.
- <low_color>
- Valeur de faible couleur de la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur la plus basse possible de la plage de données disponible.
- <middle_color>
- Valeur de couleur centrale dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur moyenne de la plage de données disponible.
- <high_color>
- Valeur de couleur la plus élevée de la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #). Elle est associée à la valeur la plus élevée possible de la plage de données disponible.
- <outline_color>
- Couleur du contour de l'icône, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans le signe #).
- <spacing>
- Espace à placer entre chaque repère d'une pile (en pixels).
- <alignment>
- Chaîne facultative décrivant l'alignement et le décalage de l'icône.
Exemple
|
chem= |