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 l'image d'une page Web à l'aide d'une image cliquable. Ces zones cliquables peuvent servir à afficher du texte d'info-bulle ou à agir en tant que 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 étiquettes 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 de création de graphiques peut renvoyer toutes les coordonnées nécessaires à la création d'une carte de zones cliquables, 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 comprenant toutes les données nécessaires à la création d'une image cliquable. Vous pouvez ensuite ajouter des liens vers des sections spécifiques de votre graphique, ou joindre des fonctions JavaScript pour cliquer sur des événements afin de rendre votre 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 présenté 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 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 manière dynamique.

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

Obtenez la sortie JSON de 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 avec la mention "JSON Output" (Sortie JSON), puis cliquez sur "Make Map" (Créer une carte).
Collez le code de carte généré sur votre page.
Mettez à jour le code généré en attribuant un nom unique à 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 d'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 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 la 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 ; équivalent à l'attribut coords de la balise <area>.