Exemple de développement de diagramme circulaire jQuery_jquery

L'exemple de cet article décrit la méthode de développement d'un diagramme circulaire jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Ici, nous aimerions vous présenter un diagramme circulaire, circliful, basé sur un canevas HTML5 et jQuery. Il est facile d'implémenter un diagramme circulaire sans utiliser d'images, et il possède de nombreux paramètres d'attributs, ce qui le rend très pratique. utiliser. Le rendu est le suivant :

Nous devons d’abord introduire le fichier de la bibliothèque jquery et jquery.circliful.min.js dans la page.

Copier le code Le code est le suivant :

Une fois les fichiers Jquery requis introduits, nous pouvons maintenant personnaliser le style de base du diagramme circulaire :

Copier le code Le code est le suivant :

Une fois le style initialement défini, il vous suffit d'ajouter le code de style suivant là où le graphique statistique est nécessaire :

Copier le code

Le code est le suivant :

data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd">

Après avoir rempli le bloc de zone, il faut maintenant l'initialiser :

Copier le code

Le code est le suivant : <script> $(document).ready(function() { </u>           $('#myStat').circliful(); </a> }); </span> </script>

C'est aussi simple que cela, vous pouvez compléter un beau tableau statistique en quelques clics.

Ce qui suit est la description des attributs de base du plug-in :

Circliful fournit un riche ensemble d'options d'attribut, basées sur l'attribut data de html5. Voici la liste des paramètres.

Paramètres	Description	Valeur par défaut
dimension-données	La largeur et la hauteur de l'image circulaire sont en px	250
données-texte	Contenu du texte affiché à l'intérieur du cercle	vide
données-infos	Informations de description affichées sous data-text	vide
largeur des données	Épaisseur du cercle px	15
taille de la police des données	Taille du texte du cercle px	15
données-pourcentage	Pourcentage de statistiques de cercle, 1-100	50
data-fgcolor	Couleur de premier plan du cercle	#556b2f
data-bgcolor	Couleur de fond du cercle	#eeeeee
remplissage des données	Couleur d'arrière-plan de remplissage circulaire	vide
type de données	Type de statistiques de cercle, peut être "à moitié" ou "complet"	complet
données totales	Quantité totale de données, utilisée conjointement avec la partie données	vide
partie données	Volume de données, utilisé conjointement avec le total des données	vide
frontière de données	Style circulaire, vous pouvez ajouter des bordures, telles que en ligne ou en contour	vide
icône de données	Style d'icône Fontawesome, pour plus de détails, veuillez vous référer à : Site Web Fontawesome – Icônes	vide
taille de l'icône de données	Taille de l'icône	vide
données-icône-couleur	Couleur de l'icône	vide

J'espère que cet article sera utile à la programmation jQuery de chacun.