[RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique

15 févr. 2016, 17:21

Salut,

j'aurais besoin d'aide pour pouvoir ajouter la possibilité de cliquer sur le graphique.

Voici exactement le code que j'utilise : http://c3js.org/samples/chart_donut.html

Je souhaite pouvoir cliquer sur chaque partie donut et que chaque partie dispose d'une URL propre.

Dans l'exemple, je veux que si je clique sur la partie verte (pas dans la légende mais sur le graphique) "setosa", ça m'envoi sur la page /setosa.html (par exemple). Et ainsi de suite pour les autres éléments du graphique.

Merci de votre aide !

15 févr. 2016, 18:06

Bonjour,

Dans la conf de ce script, il y a un paramètre onclick qui permet de réaliser une action au clic:

Code : Tout sélectionner

onclick: function (d, i) { console.log("onclick", d, i); },

Du coup un truc du genre devrait fonctionner :

Code : Tout sélectionner

onclick: function (d, i) { window.location=(d.id+".html"); }

16 févr. 2016, 11:07

Magnifique ! Merci !!!

Franchement, ici il y a des experts, et en plus vous êtes réactifs ! Vraiment génial merci !

16 févr. 2016, 11:22

Par contre, pourrais-je abuser légèrement de ta bonté ?

J'aimerais également, au passage de la souris sur une donnée, afficher cette donnée au centre du donut (title).

Merci

16 févr. 2016, 11:42

Maintenant que je t'ai montré le principe, c'est à toi d'essayer pour réussir à le faire toi même

16 févr. 2016, 11:48

C'est ce que j'ai fais en premier ^^

J'ai même essayé d'ajouter une donnée au tableau ['nom 1', 30, 'titre 1'], dont d.id serait "nom 1", d.value serait "30", mais impossible d'afficher "titre 1".

J'ai essayé un truc du genre title=d.id pour changer dans le onmouseover mais sans succès, ainsi que d'autres essais...

17 févr. 2016, 02:06

Le titre au centre du graphique est dans une balise <text> ayant pour class "c3-chart-arcs-title"
Donc ce qu'il te faut faire en javascript, c'est de changer la valeur de ce qu'il y a dans cette class.
A priori en utilisant getElementsByClassName()

Mon conseil est que tu essayes de le faire en cliquant simplement sur un bouton (en dehors du graphique) et quand ça marchera tu intégreras ta fonction dans le mouseover du graphique.

17 févr. 2016, 11:19

Pour essayer j'ai fais :

Code : Tout sélectionner

onclick: function (d, i) { document.getElementsByClassName('c3-chart-arcs-title').innerHTML='coucou'; },

Mais ça ne marche pas... J'ai surement loupé quelque chose...

20 févr. 2016, 00:27

Et ta console javascript dit quoi ? Ctrl+Maj+i, onglet Console

Par ailleurs et je réinsiste là dessus, pour tester ton dev, il vaudrait mieux mettre ta fonction sur un bouton en dehors de ton graphique pour te faciliter le travail

[RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique

Qui est en ligne