RESOLUComment créer un jolie graphe style "Donut" ?
Salut,
J'aimerais savoir comment faire pour créer un jolie graphe "Donut" s'il vous plaît ! C'est sympa pour afficher des stats :)
Merci par avance !Webmasters - Développement webGrapheDonut
GordotPosté le : 5 Décembre à 10:3830 411 vues
DalanirPosté le : 5 Décembre à 11:03
Salut à toi Gordot !
Il existe plusieurs bibliothèques pour créer des graphes, pour ma part je te conseille Morris.js qui propose de très jolie graphe style "Donut" intéractif. Je t'invite à faire les téléchargements nécessaires sur leur site => ici. Tu pourras voir que tu as notamment besoin de jQuery et de Raphaël.js.
Petit exemple sympa :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test Graphe Donut</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/morris.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/raphael.js"></script> <script type="text/javascript" src="js/morris.min.js"></script> </head> <body> <div id="Donut" style="width: 200px; height: 200px;"></div> <script type="text/javascript"> Morris.Donut({ element: 'Donut', // C'est ici que tu identifies ta div avec son id, ici "Donut" data: [ // Ce sont les parties de ton Donut avec le label qui a besoin d'une chaîne de caractères puis une value qui a besoin d'un nombre {label: "Ferrari", value: 500}, {label: "Porshe", value: 320}, {label: "BMW", value: 418}, {label: "Chevrolet", value: 279} ], colors: ["#3976B8", "#AD2F2F", "#59B833", "#CC9D4B"] ,// Tu mets ici les couleurs dans l'ordre de tes labels, en hexadécimal ou en attribut CSS comme 'red' formatter: function(y) {return y + " vendues par mois";} // Ici tu peux formatter la ligne où il y a ta value pour préciser à quoi cela correspond }); </script> </body> </html>
Voilà ! Rien de bien compliquer et super jolie ! Bonne chance !
⇒ Si vous êtes ici c'est que le sujet vous intéresse ^^
Inscrivez-vous sur Oyant, apportez votre contribution sur ce sujet et gagnez de l'argent :
Inscription
Répondre
Inscrivez-vous sur Oyant, apportez votre contribution sur ce sujet et gagnez de l'argent :
Inscription
 RESOLU | Les endroits à visiter à BâleBonjourJ'ai besoin de savoir les endroits à visiter à Bâle? Merci d'avance. |
Vacance | |
Bâle Visiter Les endroits |
RESOLU | Les lieux à visiter à GenèveBonjourBesoin de savoir les lieux à visiter à Genève,s'il vous plaît? |
Vacance | |
Genève Visiter Les lieux |
RESOLU | Les lieux à visiter à ZurichBonjourAvez-vous une idée sur les lieux à visiter à Zurich? Merci d'avance. |
Vacance | |
Zurich Visiter Lieux |
 RESOLU | Spécifier la plage de dates rechercherBonjourJe voudrais savoir comment spécifier la plage de dates rechercher sous Android? |
Android | |
Dates Android |
RESOLU | Exemple qui ajoute un participant à un événementBonjourSavez-vous l'exemple qui ajoute un participant à un événement sous Android? |
Android | |
Participant Evénement Android |
RESOLU | Modification d'un calendrier sous AndroidBonjourJe voudrais savoir s'il vous plaît comment modifier un calendrier sous Android? |
Android | |
Calendrier Android |
RESOLU | L'interrogation d'un calendrierBonjourAvez-vous s'il vous plaît un exemple sur l'interrogation d'un calendrier sous Android? |
Android | |
Calendrier Android |
RESOLU | La permission pour écrire les données de calendrierBonjourJe voudrais la permission qui écrire les données de calendrier sous Android? |
Android | |
Calendrier Permission Android |
RESOLU | Lieux à visiter à WaremmeBonjourJ'ai besoin de savoir les lieux à visiter à Waremme? Merci d'avance. |
Vacance | |
Waremme Visiter Lieux |
RESOLU | Les lieux à visiter à VerviersBonjourAvez-vous une idée sur les lieux à visiter à Verviers? Merci d'avance. |
Vacance | |
Verviers Visiter Lieux |
RESOLU | Les lieux à visiter à TurnhoutSalutBesoin de savoir les lieux à visiter à Turnhout? Merci d'avance. |
Vacance | |
Turnhout Visiter Lieux |
RESOLU | La permission pour lire les données de calendrierSalutQuel est la permission pour lire les données de calendrier sous Android? |
Android | |
Permission Android |
RESOLU | Les endroits à visiter à TournaiBonjourAvez-vous une idée sur les endroits à visiter à Tournai? Merci d'avance. |
Vacance | |
Tournai Visiter Les endroits |
RESOLU | Les lieux à visiter à TorhoutBonjourJ'ai besoin de savoir les lieux à visiter à Torhout? Merci d'avance. |
Vacance | |
Torhout Visiter Lieux |
RESOLU | Les sites touristiques de ThuinBonjourQuels sont les sites touristiques de Thuin? Merci d'avance. |
Vacance | |
Thuin Sites touristiques |
RESOLU | Crée le référentiel de données sous AndroidBonjourJe voudrais savoir comment puis-je crée le référentiel de données sous Android? |
Android | |
Référentiel Android |
RESOLU | Les endroits à visiter à Saint-HubertBonjourJ'ai besoin de savoir les endroits à visiter à Saint-Hubert en Belgique? Merci d'avance |
Vacance | |
Belgique Saint-Hubert Visiter Les endroits |
RESOLU | Mettre en œuvre la méthode d'insertion du fournisseurBonjourComment mettre en œuvre la méthode d'insertion du fournisseur sous Android? |
Android | |
Méthode Fournisseur Android |
| Veuillez vous connecter pour profiter pleinement de toutes les fonctionnalités de Oyant. | ||
Connexion |
Inscription |
|
|
Poster une question |
||
