AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Cdiscount : -30€ dès 300€ d’achat sur une sélection Apple
Voir le deal

    (NYO) Diagrammes Naruto

    Crimmson Bounty
    Crimmson Bounty
    MasculinMessages : 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 !



    (NYO) Diagrammes Naruto Flod10
    • Revenir en haut
    NyoTheNeko
    NyoTheNeko
    FémininAge : 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! ^^



    • Revenir en haut
    Crimmson Bounty
    Crimmson Bounty
    MasculinMessages : 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




    (NYO) Diagrammes Naruto Flod10
    • Revenir en haut
    NyoTheNeko
    NyoTheNeko
    FémininAge : 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



    • Revenir en haut
    Crimmson Bounty
    Crimmson Bounty
    MasculinMessages : 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 



    (NYO) Diagrammes Naruto Flod10
    • Revenir en haut
    NyoTheNeko
    NyoTheNeko
    FémininAge : 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...



    • Revenir en haut
    Crimmson Bounty
    Crimmson Bounty
    MasculinMessages : 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 :)



    (NYO) Diagrammes Naruto Flod10
    • Revenir en haut
    NyoTheNeko
    NyoTheNeko
    FémininAge : 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 ^^



    • Revenir en haut
    Crimmson Bounty
    Crimmson Bounty
    MasculinMessages : 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 !!



    (NYO) Diagrammes Naruto Flod10
    • Revenir en haut
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 15 Mai 2014 - 17:17

    Pas de problème Wink
    Oublie pas de mettre demande terminée!



    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Mer 8 Mai 2024 - 17:33