Page 1 sur 1
Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 15 févr. 2016, 17:21
par CoeurBis
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 !
Re: Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 15 févr. 2016, 18:06
par @rthur
Bonjour,
Dans la conf de ce script, il y a un paramètre onclick qui permet de réaliser une action au clic:
Du coup un truc du genre devrait fonctionner :
Code : Tout sélectionner
onclick: function (d, i) { window.location=(d.id+".html"); }
Re: Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 16 févr. 2016, 11:07
par CoeurBis
Magnifique ! Merci !!!
Franchement, ici il y a des experts, et en plus vous êtes réactifs ! Vraiment génial merci !
Re: [RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 16 févr. 2016, 11:22
par CoeurBis
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
Re: [RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 16 févr. 2016, 11:42
par @rthur
Maintenant que je t'ai montré le principe, c'est à toi d'essayer pour réussir à le faire toi même
Re: [RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 16 févr. 2016, 11:48
par CoeurBis
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...
Re: [RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 17 févr. 2016, 02:06
par @rthur
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.
Re: [RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 17 févr. 2016, 11:19
par CoeurBis
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...
Re: [RESOLU] Graphique D3-C3 Chart : Ajouter un lien sur le graphique
Posté : 20 févr. 2016, 00:27
par @rthur
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