Dessiner un graphique camembert en SVG / JavaScript
HTML-код
- Опубликовано: 7 янв 2025
- Article ► grafikart.fr/t...
Abonnez-vous ► bit.ly/Grafika...
Dans ce tutoriel je vous propose de découvrir comment créer un diagramme camembert ou donut SVG en utilisant du JavaScript et les custom elements
Soutenez Grafikart:
Devenez premium ► grafikart.fr/p...
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/t...
Grafikart. You are monster! Merci beaucoup pour ce coup de maître. La qualité de tes vidéos va de mieux en mieux
Merci beaucoup ! Excellente vidéo.
C'est top 👍 Ca serais cool aussi de mettre à jour le tuto pour faire une carte interactive
La méthode n'a pas trop changé. grafikart.fr/tutoriels/carte-interactive-791
Petite question, même avec la doc, je ne comprends pas concrètement ce que retourne le 'document.createRange()'. En gros il retourne une partie du document, sauf que là vu qu'on ne lui passe pas le limite, il retourne un object Range qui représente l'intégralité du document? C'est ça?
Le range créé est vide, les frontière (start / end) sont définit après coup
Super 👍👍👍. Merci beaucoup 🙏😊
Jolis frometons !
Merci Graf :)
Bonjour, au début dans data.map(_, k), pourquoi k serait plus grand que la longueur du tableau que l'on soit amené à utiliser un modulo ? Il y a quelque-chose que je ne comprends pas dans le map ?
Perso j'ai supprimé le modulo car il me supprimait systématiquement la dernière couleur si je ne mettrais pas de séparateur ";" à la fin de toutes les valeurs. Parfois le mieux est l'ennemi du bien.
Fabuleux
excellente video
Bravo ! Un camembert fin affiné ;p
T'aurais même pu en faire un petit challenge comme le simulateur d'impôts en fait, ça aurait été sympa ...
bonjours comment vous allez j'ai aime la video mais personnellement jai des difficulté avec le dev du coup je me demande si je me suis pas tromper de filiere en voyant tout ce que vous vous pouvez faire js php laravel synfonie node js jquery et plein d'autre encore ! comment vous avez fait ? moi en plus du dev je suis bien cas même en Pr et Ps et filmora je les ai apris en 3semaines mais le dev je suis la dessus depuis 2ans mais la logique ca passe pas.
Commence par te focaliser sur une chose. Ne t'éparpille pas en regardant trop de technos / langage car tu ne va pas assimiler correctement et ne compare pas forcément avec ce que je fais car cela fait pas mal de temps que je pratique ^^
merci Graf pouvez-vous faire un tuto sur la modélisation de Base de Donnée ?
J'ai remarqué que le label posait des problèmes au survol de la souris... Si on met l'opacity de base à 0,1 par exemple, on comprend mieux ce que j'essaie d'expliquer ;-)
Pour les styles ajoutez "pointer-events: none;" sur les div.
Lorsque le camembert ne contient qu'une seule valeur (100%), l'animation se fait, mais il finit par disparaître...
Superbe vidéo, merci ! Tu as une petite erreur sur l'indice du tableau des couleurs. Tu fais :
const color = colors[k % colors.length - 1];
mais il faudrait : [k % colors.length] afin d'avoir toutes les couleurs du tableau et ne pas ignorer la dernière ;)
ça vient pas du fait que pour accéder à une valeure d'un tableau on commence par 0, 1 etc, du coup si un tableau à 4 valeur le .length nous renvoie 4, alors que le tableau va de [0] à [3] ?