Icônes dynamiques

   

Cette page explique comment créer différents types d'accroches, de bulles, de repères et autres éléments graphiques pouvant être demandés via une URL ou ajoutés en tant que repères au-dessus d'autres graphiques.

Sommaire

1. Présentation
   1. Icônes autoportantes
   2. Repères dynamiques
2. Fonctionnalités courantes des icônes
   1. Chaînes de texte
   2. Ombres
3. Icônes contextuelles

Présentation

L'API Chart vous permet de créer des accroches, des épingles ou des 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 indépendante ou placer 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 autoportantes ou de repères sur un autre graphique. La page de référence Icônes dynamiques pour l'infographie décrit tous les 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 indépendantes

Vous pouvez demander une image d'icône dynamique de la même manière que pour n'importe quel 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. icon_string_constant : constante de chaîne décrivant le type d'icône à créer. Consultez la sélection d'icônes ci-dessous pour choisir une icône.
chld=<icon_data>	Obligatoire	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. icon_data : ensemble de valeurs délimitées par des barres verticales adaptées à l'icône. La documentation de cette page décrit les valeurs requises pour chaque type d'icône.
cht	NON UTILISÉE	Les graphiques d'icônes dynamiques autonomes n'utilisent pas le paramètre cht.
chs	NON UTILISÉE	Les graphiques d'icônes dynamiques autonomes n'utilisent pas le paramètre chs.
chd	NON UTILISÉE	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 dans différents types de graphiques à l'aide du paramètre chem. Pour savoir comment procéder, consultez la documentation de 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

Fonctionnalités 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 d'affichage transmis à l'API Chart doit être encodé au format UTF-8, puis en URL. Cela ne concerne que les caractères non sécurisés pour les URL (principalement les lettres minuscules et majuscules de l'alphabet latin a-z, plus quelques signes de ponctuation). Par exemple, la valeur UTF-8 et encodée en URL pour la lettre "è" est "%C3%A8", et pour le caractère chinois "駅" est "%E9%A7%85". La plupart des navigateurs vous permettent d'utiliser une valeur non encodée dans la chaîne d'URL (par exemple, 駅) et de l'encoder pour vous en arrière-plan. Toutefois, il est possible que la personne qui consulte l'URL de votre graphique utilise un navigateur qui ne le fait pas. Il est donc généralement préférable d'encoder en URL tous les caractères non-ASCII dans les chaînes de texte au format UTF-8. Notez que cela ne s'applique qu'au texte affiché dans les bulles ou les repères, et non pour le &, le | 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 dynamique, 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, ou même dessiner des ombres pour certaines icônes sans l'icône elle-même.

Icônes bloquées

Beaucoup de ces icônes peuvent être dessinées avec ou sans ombres. Si le test Shadow est possible, le nom de l'icône présentera une version qui se termine par _withshadow et une autre sans cette extension. Vous pouvez spécifier une icône comportant l'une ou l'autre de ces terminaisons, selon que vous souhaitez afficher l'ombre ou non.

Voici un exemple de bulle de texte de taille moyenne et d'une punaise 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 seule. Cela peut être utile si vous utilisez plusieurs icônes ombrées qui se chevauchent sur un graphique et qu'elles sont si proches que l'ombre d'une icône tombe sur une autre icône. Par exemple, voici deux bulles ombrées, dessinées par Robert en premier, puis Alice:

Notez que l'ombre d'Alice couvre en partie Robert. Pour résoudre ce problème, vous pouvez d'abord dessiner l'ombre d'Alice, puis la bulle de Robert, puis d'Alice sans ombre. Elle n'est peut-être pas totalement réaliste en termes de luminosité et d'ombre, mais cela évite d'obscurcir 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 spécifient le même ordre de plan de 1 (py=1). Ils sont donc dessinés dans l'ordre indiqué, au-dessus des éléments du graphique (la ligne du graphique). L'ombre d'Alice est d'abord dessinée, puis la bulle de Robert au-dessus et enfin la bulle d'Alice au-dessus.

Consultez la documentation de votre type d'icône spécifique pour savoir si vous pouvez dessiner son ombre seule.

Icônes contextuelles

Vous pouvez spécifier une icône dont la couleur, la taille ou l'empilement varient en fonction du point auquel elle est attribuée. Ces types d'icônes sont disponibles uniquement en tant que repères d'icône dynamique (paramètre chem), et non en tant qu'icônes indépendantes.

Ces icônes peuvent être affichées sur une série autre que celle qui spécifie leur couleur, leur taille ou leurs 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 la taille ou la couleur de l'icône sont spécifiées dans les paramètres indiqués ci-dessous. Une bonne utilisation consiste à utiliser une série de données cachée 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 source	Icône affichée sur une série non source	Icône utilisant des séries masquées
chem=   y;s=cm_size;ds=0;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=0 : affichage sur la série 0 (ligne rouge) d=maps_pin,0,... : données de la série 0	chem=   y;s=cm_size;ds=1;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=1 : affichage sur la série 1 (ligne bleue) d=maps_pin,0,... - Données de la série 0	chd=t1:   10,20,30,5,10,60   10,20,30,70,60,5 chem=   y;s=cm_size;ds=0;dp=all;   d=disk,1,5,20,5,FFFF10,000 t1: : la première série est affichée et utilise les données de ligne. Toutes les séries ultérieures sont masquées. ds=0 : repères rendus sur la série 0. d=disk,1,... : les données de disque proviennent de la série cachée 1.

Types de repères de contexte

Type de repère	Valeur de chem s	Exemple
Variation de couleur	s=cm_color
Variation de taille	s=cm_size
Variation de couleur et de taille	s=cm_color_size
Variante d'empilement	s=cm_repeat
Empilation et variation de couleur	s=cm_repeat_color

Variante de couleur (cm_color)

Vous pouvez faire 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 vers 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 au bas de la page.

<color_data_series>

Indice de base zéro de la série de données utilisé pour faire varier la couleur des icônes.

<low_color>

Valeur de couleur basse dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Elle est associée à la valeur la plus basse possible dans la plage de données disponible.

<middle_color>

Valeur de la couleur du milieu dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Elle est associée à la valeur du milieu dans la plage de données disponible.

<high_color>

Valeur de couleur la plus élevée dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Cette valeur est associée à la valeur la plus élevée possible dans 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 la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans signe #).

<alignment>

Chaîne facultative décrivant l'alignement et le décalage de l'icône.

Exemple

s=cm_color : icône de variation de couleur ds=0 : les afficher sur la série de données 0 dp=all : ajoute une icône à tous les points. d : petrol : identifiant de l'icône 0 : couleur de la série de données 0 000,0FF,F55 : définition du dégradé de couleurs 24 : taille de l'icône 000 - Contours noirs hv : centrez les icônes sur le point horizontalement et verticalement.

chem=y;s=cm_color;   ds=0;   dp=all;   d=petrol,0,000,0FF,F55,24,000,hv

Haut de page

 

 

---

Variante de taille (cm_size)

Vous pouvez faire varier la taille d'un repère de graphique contextuel seul, 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 ou square.

<size_data_series>

Index de base zéro de la série de données utilisé pour faire varier la taille des icônes.

<zero_value_size>

Taille de base de l'icône, à la valeur minimale des données pour 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 de série minimale, afin de calculer la taille finale de l'icône. Par conséquent, une icône ayant la valeur de données 0 ne sera pas affectée par ce multiplicateur.

<min_size>

Taille minimale de chaque icône, en pixels.

<outline_color>

Couleur du contour de l'icône, sous la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans signe #).

<fill_color>

Couleur de remplissage de l'icône, sous la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans signe #).

<alignment>

Chaîne facultative décrivant l'alignement et le décalage de l'icône.

Exemples

Exemple élémentaire. L'icône sans valeur est affichée à la taille zéro, c'est-à-dire 30 pixels. Les tailles augmentent en même temps que les données.

chd=t:0,10,20,30,40,50,60,70 chem=y;s=cm_size;ds=0;dp=all;py=-1;d=maps_pin,0,30,100,10,8F8,000,hb

Dans cet exemple, les données de taille des icônes proviennent de la ligne jaune, mais sont affichées sur la ligne bleue. chem=y – Repère dynamique s=cm_size : Écart de taille ds=1 : affiché sur la série de données 1 (ligne bleue) dp=all : affiché sur tous les points. d= maps_pin : utilisez une icône de repère sur la carte 0 : met à l'échelle la taille en fonction de la série de données 0 (ligne jaune). 10 : taille du repère à la valeur 0 90 : multiplicateur de taille 10 : taille minimale 8F8 - Couleur de remplissage 000 : couleur du contour hb : centrez-les horizontalement en bas de l'épingle.

chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb

Haut de page

 

 

---

Variation de couleur et de taille (cm_color_size)

Vous pouvez faire 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 ou square.

<color_data_series>

Indice de base zéro de la série de données utilisé pour faire varier la couleur des icônes.

<low_color>

Valeur de couleur basse dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Elle est associée à la valeur la plus basse possible dans la plage de données disponible.

<middle_color>

Valeur de la couleur du milieu dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Elle est associée à la valeur du milieu dans la plage de données disponible.

<high_color>

Valeur de couleur la plus élevée dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Cette valeur est associée à la valeur la plus élevée possible dans la plage de données disponible.

<size_data_series>

Index de base zéro de la série de données utilisé pour faire varier la taille des icônes.

<zero_value_size>

Taille de base de l'icône, à la valeur minimale des données pour 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 de série minimale, afin de calculer la taille finale de l'icône. Par conséquent, une icône ayant la valeur de données 0 ne sera pas affectée par ce multiplicateur.

<min_size>

Taille minimale de chaque icône, en pixels.

<outline_color>

Couleur du contour de l'icône, sous la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans signe #).

<alignment>

Chaîne facultative décrivant l'alignement et le décalage de l'icône.

Exemples

Cet exemple utilise deux lignes. Les repères utilisent les données de couleur de la série sur laquelle ils sont affichés, mais ils utilisent les données de taille de l'autre série. chd=s:0akAZtnkmi,nbMPJOKXXS : la première série est utilisée pour tracer la ligne jaune et déterminer la couleur du repère. La deuxième série est utilisée pour la ligne bleue et la taille des broches. chem=y : afficher une icône dynamique s=cm_color_size : utilisez l'icône de contexte de variation de couleur et de taille. ds=1 : affiche les éléments sur la série de données 1 (ligne bleue). dp=all : placer l'icône sur tous les points d= maps_pin : utilisez le symbole du repère de la carte. 1 : utilisez la série de données 1 pour la couleur du repère. 000,0FF,F55 : couleurs basses, moyennes et hautes. 0 : utilisez la série de données 0 pour la taille du repère. 10 : le repère est défini sur 10 pixels à la valeur 0. 90 : multiplicateur de taille de 90. 10 : taille minimale du repère de 10 pixels. 000 : couleur du contour noir. hb : centrez les broches horizontalement le long du bord inférieur par rapport à chaque point de données.

chd=s:0akAZtnkmi,nbMPJOKXXS chem=y;s=cm_color_size;ds=1;dp=all;d=maps_pin,1,000,0FF,F55,0,10,90,10,000,hb

Haut de page

 

 

---

Variante d'empilement (cm_repeat)

Vous pouvez faire varier la hauteur d'une pile d'icônes en fonction de la valeur des données à un point spécifique.

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 au bas de la page.

<repeat_series_index>

Indice basé sur zéro de la série de données utilisée pour calculer le nombre d'icônes à placer à ce stade.

<scaling_factor>

La valeur de la série de données sources est adaptée à une valeur comprise entre 0 et 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" (en 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 signe #).

<outline_color>

Couleur du contour de l'icône, sous la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans signe #).

<spacing>

Espace à placer entre les repères 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 n'est pas affiché sur le graphique, mais permet d'espacer uniformément toutes les piles en partant du bas du graphique. chd=s1:0akAZtnkmi,AAAAAAAAAA : la première série est utilisée pour tracer la ligne et déterminer la hauteur de la pile. La seconde permet de spécifier la base de chaque pile d'icônes, avec la valeur 0. chem=y : afficher une icône dynamique s=cm_repeat : utilise l'icône de contexte de la variante d'empilement. ds=1 : affiche les éléments de la série de données 1. dp=all : placer l'icône sur tous les points d= d=petrol : utilisez le symbole de l'essence. 0 : utilisez la série de données 0 pour le nombre de répétitions. 9 : utilisez un facteur de mise à l'échelle de 6. V : les éléments sont empilés verticalement. 16 : définissez la hauteur de chaque repère sur 16 pixels. F00 : couleur de remplissage de l'icône. 000 : couleur du contour de l'icône. 2 : deux pixels entre chaque icône de la pile. hb : centre les piles en bas

chd=s1:0akAZtnkmi,AAAAAAAAAA chem=   y;s=cm_repeat;ds=1;dp=all;   d=petrol,0,9,V,16,F00,000,2,hb

Haut de page

 




---

 

Empilation et variantes de couleur (cm_repeat_color)

Vous pouvez faire varier la hauteur et la couleur d'une pile d'icônes, en fonction de la valeur des données à un point spécifique.

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 au bas de la page.

<repeat_series_index>

Indice basé sur zéro de la série de données utilisée pour calculer le nombre d'icônes à placer à ce stade.

<scaling_factor>

La valeur de la série de données sources est adaptée à une valeur comprise entre 0 et 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" (en 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 de base zéro de la série de données utilisé pour faire varier la couleur des icônes.

<low_color>

Valeur de couleur basse dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Elle est associée à la valeur la plus basse possible dans la plage de données disponible.

<middle_color>

Valeur de la couleur du milieu dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Elle est associée à la valeur du milieu dans la plage de données disponible.

<high_color>

Valeur de couleur la plus élevée dans la plage, sous forme de couleur hexadécimale HTML à trois ou six chiffres (sans signe #). Cette valeur est associée à la valeur la plus élevée possible dans la plage de données disponible.

<outline_color>

Couleur du contour de l'icône, sous la forme d'une couleur hexadécimale HTML à trois ou six chiffres (sans signe #).

<spacing>

Espace à placer entre les repères d'une pile (en pixels).

<alignment>

Chaîne facultative décrivant l'alignement et le décalage de l'icône.

Exemple

chem=y : afficher une icône dynamique s=cm_repeat_color : utilisez l'icône de contexte d'empilement et de variation de couleur. ds=0 : affiche les éléments sur la série de données 0. dp=all : placer l'icône sur tous les points d= petrol : utilisez le symbole de l'essence. 0 : utilisez la série de données 0 pour le nombre de répétitions. 6 : utilisez un facteur de mise à l'échelle de 6. V : les éléments sont empilés verticalement. 12 : définissez la hauteur de chaque repère sur 12 pixels. 0 : utilisez la série 0 pour spécifier la couleur. F00,0F0,00F : valeurs de couleur basse, centrale et élevée. 000 : couleur du contour de l'icône. 2 : deux pixels entre chaque icône de la pile. hv : centre les piles verticalement et horizontalement sur chaque point de données.

chem=   y;s=cm_repeat_color;ds=0;dp=all;   d=petrol,0,6,V,12,0,F00,0F0,00F,000,2,hv

Haut de page