(NYO) Diagrammes Naruto

Mar 6 Mai 2014 - 13:35

Crimmson Bounty

Messages : 229

Mar 6 Mai 2014 - 13:35

Bonjours ! J'admets que je viens vers vous en me doutant que je demande la lune et il se peut que cette commande n'aboutisse pas mais je tente malgré tout.

Je m'apprête à ré ouvrir mon forum Naruto et pour ça, je veux être à la pointe (vue la concurrence ... Je souhaite donc offrir à mes futurs membres la possibilité de se rapprocher du manga au maximum en leur permettant de créer des "diagrammes" en toile d'araignée. (je ne sais pas comment appeler ce truc mais ça ressemble à ça :
http://www.leafninja.com/images/information/stats/Chouji3.gif )

Les angles seraient déterminés par ces aspects :
-Ninjutsu
-Taijutsu
-Genjutsu
-Kenjutsu
-Fuinjutsu

-Chakra
-Force
-Vitesse
-Intelligence
-Habileté

10 angles donc. Il faudrait que le code soit assez simple pour que le staff puisse aisément remplir les diagrammes des membres et les changer. Je ne sais pas vraiment si c'est faisable mais je l'espère Wink

Merci d'avance !

Mar 6 Mai 2014 - 20:02

NyoTheNeko

Age : 30Messages : 5683

Mar 6 Mai 2014 - 20:02

Hello!
Malheureusement, je n'ai rien trouvé qui permette de faire ça en HTML/CSS, mis à part la balise canvas, cependant, là aussi ça me semble quelque peu trop compliqué, vu que ce n'est pas forcément le truc le plus simple à modifier.
Cependant, j'ai trouvé quelques trucs en javascript qui permettent de le faire plus ou moins facilement:
Chart.js (sous "radar chart")
RGraph
Javasript Charts V3 (sous "radar chart")
Spidergraph
DHTMLX
Le seul problème que je vois, c'est que le javascript n'est pas accepté dans les messages forumactif, ce qui veut dire que, pour chaque graphe, il faudra créer une iframe. Mais je n'ai pas vraiment eût le temps de me pencher sur les liens que j'ai filé plus haut donc il est possible que l'un d'entre eux serait un simple script que l'on pourrait héberger sur FA & affecter au sujets/messages, et ensuite créer assez facilement les chart si nécessaire... à voir! Mais je n'ai pas le temps de regarder ça ce soir: c'est bien pour ça que je poste! Pour qu'un autre codeur ou toi-même puissiez regarder ça tranquillement et voir ce qu'on peut en faire! ^^

Mar 6 Mai 2014 - 21:55

Crimmson Bounty

Messages : 229

Mar 6 Mai 2014 - 21:55

Hello !

Je ne sais pas si ça peut fonctionner sur FA mais c'est exactement ce que je cherche ^^
Merci d'avoir mi la main sur tout ça, je me penche dessus en espérant comprendre quelque chose Wink

Mer 7 Mai 2014 - 18:22

NyoTheNeko

Age : 30Messages : 5683

Mer 7 Mai 2014 - 18:22

Et voilà ce que ça me donne:

Comme je l'ai pensé, il faut bien créer une iframe (donc une page html) pour chacun des diagrammes. Il faut donc voir comment tu feras ça très exactement Wink

(Et si tu veux le code bien sûr ^^)
J'ai utilisé Chart.js si jamais =P

Jeu 8 Mai 2014 - 19:14

Crimmson Bounty

Messages : 229

Jeu 8 Mai 2014 - 19:14

C'est exactement ce que je recherche ! Au risque de te désespérer, je ne comprend rien au vocabulaire que tu utilise Very Happy

Excepté le mot "Code". Donc oui j'aimerais bien avoir le code mais cet "iframe" c'est quoi ? Et la page html implique quoi ? Haha je suis vraiment à la ramasse je sais . . .

Mais merci !!! cheers

Jeu 8 Mai 2014 - 20:03

NyoTheNeko

Age : 30Messages : 5683

Jeu 8 Mai 2014 - 20:03

Alors, en gros, à chaque fois que tu voudras créer un nouveau diagramme, il faudra créer une nouvelle page HTML en allant dans Modules -> HTML & JAVASCRIPT -> Gestion des pages HTML puis cliquer sur "Création en mode avancé (HTML)"

Là tu copies-colles ce code: (si besoin, je peux t'expliquer plus tard à quoi sert chacun des trucs Wink

)

Code:: <!doctype html> <html> <head> <title>Radar Chart</title> <script src="http://yourjavascript.com/0273592411/charts.js"></script> <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> <style> canvas{ } </style> </head> <body> <canvas id="canvas" height="450" width="450"></canvas> <script> var radarChartData = { labels : ["Ninjutsu","Taijutsu","Genjutsu","Kenjutsu","Fuinjutsu","Chakra","Force","Vitesse","Intelligence","Habilité"], datasets : [ { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100,89,77,64] } ] } var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10}); </script> </body> </html>

Pour Voulez-vous utiliser le haut et le bas de page de votre forum ? tu mets Non et pour l'autre idem. Pour le nom, tu lui donnes le nom que tu veux. Valides.

Une fois ceci-fait, pour éditer le diagramme, tu devras cliquer sur le petit engrenage avec écrit "HTML" dessus.

Ensuite, dans le message où tu veux poster ton diagramme tu mets ceci:

Code:: <iframe style="display:block; width: 500px; height: 500px; margin: auto;" src="ICI_URL_DE_LA_PAGE" frameBorder="0" seamless="seamless"></iframe>

Bien sûr, tu dois ici mettre l'url de ta page HTML, que tu retrouves au même endroit que tu l'as crée après l'avoir validée sous "URL du lien"

Donc chaque page HTML = un diagramme! C'est pour cela qu'il faut utiliser l'iframe (pour voir la page HTML que tu crées) et ce seront donc uniquement les admins qui pourront modifier les diagrammes.

Pour modifier les valeurs des diagrammes:

Code:: data : [28,48,40,19,96,27,100,89,77,64]

C'est cette partie-ci. La première valeur correspond à la première chose listée ici:

Code:: labels : ["Ninjutsu","Taijutsu","Genjutsu","Kenjutsu","Fuinjutsu","Chakra","Force","Vitesse","Intelligence","Habilité"]

Donc dans l'exemple, injutsu é 28, Taijutsu à 48, etc et Habilité est à 64. Bref, assez simple!

Pour modifier les couleurs, c'est cette partie là:

Code:: fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff",

Pour ce qui est de ceci:

Code:: var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});

Ce sont les options d'apparences et du codes javascript (surtout ce qu'il y a dans radarChartData). Ici, le scaleShowLabels : false indique que les valeurs ne sont pas affichées (c'est à dire que pour chaque barre de la toile d'araignée, il n'est pas écrit à quoi ça vaut).
Pour en apprendre plus de ce que tu peux y mettre ou à quoi ça correspond, tu as toute la documentation de Chart.js, qui est, tu le comprendras, trop longue pour que je l'explique ici...

Ven 9 Mai 2014 - 13:51

Crimmson Bounty

Messages : 229

Ven 9 Mai 2014 - 13:51

Génial ça a fonctionné ! Enfin, à un détail près. Le diagramme s'adapte au nombre max de branches qu'on attribut à un perso. Je m'explique. Si je créer un diagramme avec un perso dont le niveau le plus haut sera 50/100 dans l'un des domaines, alors le diagramme ne comptera que 5 barres alors que chaque perso peut aller jusqu'à 100 normalement. Si les 10 barres étaient présentes, le point du perso dans ce domaine serait à la moitié du diagramme et non tout en haut.

Je ne sais pas si j'ai été très clair ^^ Enfin, pas autant que toi avec tes explications qui m'ont permit de tout piger en un coup :)

Ven 9 Mai 2014 - 18:10

NyoTheNeko

Age : 30Messages : 5683

Ven 9 Mai 2014 - 18:10

Pas de problème, il y avait tout dans la documentation, donc c'était simple! ^w^

Voilà le code "total" HTML:

Code:: <!doctype html> <html> <head> <title>Radar Chart</title> <script src="http://yourjavascript.com/0273592411/charts.js"></script> <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> <style> canvas{ } </style> </head> <body> <canvas id="canvas" height="450" width="450"></canvas> <script> var radarChartData = { labels : ["Ninjutsu","Taijutsu","Genjutsu","Kenjutsu","Fuinjutsu","Chakra","Force","Vitesse","Intelligence","Habilité"], datasets : [ { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,49,27,50,39,27,44] } ] } var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10, scaleOverride : true, scaleSteps : 5, scaleStepWidth : 10, scaleStartValue : 0}); </script> </body> </html>

Et la partie qui nous intéresse:

Code:: var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10, scaleOverride : true, scaleSteps : 5, scaleStepWidth : 10, scaleStartValue : 0});

scaleOverride indique que tu veux créer par toi-même et non automatiquement, la toile d'araignée, c'est donc ce qui va permettre de limiter à 50.
scaleSteps c'est le nombre d'étapes que tu auras. Donc pour 50, tu en mets 5, pour 60 tu en mets 6, etc.
scaleStepWidth correspond donc au "pas" entre les différentes branches. Donc pour avoir que chaque branche = 10, 20, 30, 40 et enfin 50. Tu pourrais changer cette valeur bien sûr, mais après faut faire des maths =P
scaleStartValue c'est la valeur du point central, donc de quelle valeur tu pars. J'ai mit 0 bien sûr Wink

Je pense que c'est tout ^^

Jeu 15 Mai 2014 - 16:43

Crimmson Bounty

Messages : 229

Jeu 15 Mai 2014 - 16:43

Pardon pour le délai de réponse mais c'est génial ! Ca marche ! C'est rare quand un truc informatique fonctionne avec moi, t'as vraiment assuré dans tes explications merci !

Si tu veux passer voir ce que ça donne sur le forum je t'enverrais le lien quand on ouvrira Wink

Encore merci !!

Jeu 15 Mai 2014 - 17:17

NyoTheNeko

Age : 30Messages : 5683

Jeu 15 Mai 2014 - 17:17

Pas de problème Wink

Oublie pas de mettre demande terminée!

Contenu sponsorisé

(NYO) Diagrammes Naruto

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée