Avertissement : Cette API est obsolète depuis 2012 et a été désactivée le 18 mars 2019. Veuillez utiliser l'API Google Charts activement gérée à la place.

Cette page a été traduite par l'API Cloud Translation.

Création d'une image cliquable dans un graphique

Introduction

Les normes HTML vous permettent de spécifier des zones cliquables sur une image de page Web à l'aide d'une image cliquable. Ces zones d'interaction peuvent servir à afficher du texte d'info-bulle ou à servir de liens. Vous pouvez même ajouter la gestion des événements JavaScript pour activer l'interactivité. Par exemple, passez la souris sur les barres et les libellés des axes de l'image suivante:

cht=bvg&chs=250x150&chd=s:egbdf&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt&chm=o,000000,0,-1,10|V,000000,0,-1,1:15,,:4:10|H,000000,0,-1,3:9,,:8:17&chxl=0:|E|G|B|D|F

Ces zones cliquables sont créées à l'aide des éléments HTML <map> et <area>. L'API Chart peut renvoyer toutes les coordonnées nécessaires à la création d'une carte des zones cliquables associées, comme décrit ci-dessous.

Créer une carte pour votre graphique

Si vous ajoutez le paramètre chof=json à l'URL de votre graphique, vous recevrez une chaîne JSON contenant toutes les données dont vous avez besoin pour créer une image cliquable. Vous pouvez ensuite ajouter des liens vers des sections spécifiques de votre graphique ou joindre des fonctions JavaScript aux événements de clic pour rendre le graphique plus interactif. Notez que tous les types de graphiques ne sont pas compatibles avec cette fonctionnalité. Pour en savoir plus, consultez la documentation spécifique à votre graphique.

L'outil disponible sur cette page vous aidera à générer le code HTML d'une image cliquable. Vous pouvez intégrer ce code HTML à votre page de manière permanente ou même copier notre code sur votre page, puis demander et générer la carte à la volée si votre page permet à l'utilisateur de modifier la carte de façon dynamique.

Voici comment utiliser cet outil pour générer une carte:

Obtenir la sortie JSON pour votre graphique:ajoutez chof=json à l'URL de votre graphique, accédez à cette URL dans votre navigateur et copiez le texte renvoyé.
Collez le texte JSON que vous avez copié dans la zone de texte ci-dessous, marquée "JSON Output" (Sortie JSON) et cliquez sur "Make Map" (Créer une carte).
Coller le code de la carte généré sur votre page
Modifiez le code généré en lui attribuant un nom unique pour votre élément <map>.
Supprimez tous les éléments de la carte dont vous n'avez pas besoin (par exemple, des barres, des secteurs, des libellés ou des éléments d'axe spécifiques).
Mettez à jour les attributs href dans les éléments <area> générés.
Ajoutez l'attribut usemap="#MAP_NAME" à votre élément <img>, en remplaçant MAP_NAME par le nom de votre carte.
Important:Veillez à ajouter le préfixe "#" à la valeur usemap (par exemple: usemap="#mymap"). Dans ce cas, le nom de la carte est "mymap", et non "#mymap".

Format de la chaîne JSON

Voici le format du fichier JSON renvoyé lorsque vous spécifiez chof=json:

Un objet racine appelé chartshape. Cet objet contient un tableau d'objets, chacun représentant une zone sur une image cliquable du graphique. Chaque objet possède les propriétés suivantes :
- name : nom de la zone spécifique. La convention d'attribution de noms générale est la suivante : elementtype_series#_item#. Par exemple: bar0_0 pour une zone décrivant la première barre de la première série ou axis0_1 pour une zone décrivant le libellé du deuxième axe sur l'axe des x.
- type : forme de cette zone. Il s'agira de l'une des valeurs suivantes, en fonction du type de graphique: RECT, Circle ou POLY. Cela équivaut à l'attribut shape de la balise <area>.
- coords : tableau numérique décrivant la zone. Il équivaut à l'attribut coords de la balise <area>.