Graphique à tarte CSS

Avez-vous déjà vécu un document scientifique ou de recherche? Avez-vous déjà consulté le rapport annuel sur le budget, le fonds, le PIB ou le taux de croissance pour un État ou une institution spécifique? Si c'est le cas, vous avez peut-être trouvé les données et les informations concernant le sujet particulier des graphiques qui montrent les statistiques de l'analyse des données effectuées par les experts. Ces graphiques et diagrammes peuvent être vus sur certains sites Web standard et officiels. Dans HTML, nous avons certaines propriétés de style qui sont utilisées dans CSS pour créer des graphiques et des diagrammes. Dans cet article, nous discuterons de toutes ces propriétés standard pour créer des graphiques circulaires sur les pages Web HTML.

Exemple 01:

Commençons par l'exemple le plus élémentaire du style HTML pour créer un graphique à tarte sur notre page Web HTML. Cet exemple commence par les balises HTML de base - HTML, tête, style et corps. Avant de styliser la page HTML, nous devons jeter un œil à tous ses éléments via la balise corporelle. Le corps de notre page HTML contient un seul cap de la plus grande taille, je.e. H1. Le titre suit l'élément «div» pour créer une nouvelle section dans notre page. L'élément DIV est spécifié avec une classe «PiechartContainer» et est fermé après cela. Le corps de cette page HTML est terminé ici.

Maintenant, nous avons une tête qui suit la balise «titre» pour donner un nom à notre page Web. Dans la balise de style CSS de ce code, nous utilisons l'élément «corps» pour styliser tous ses éléments combinés en premier. Tous les corps contiennent la couleur grise de fond. Maintenant, nous utilisons la classe «PiechartContainer» avec le point (.) Caractère pour créer un graphique à tarte. L'élément DIV contenant cette classe reçoit une marge supérieure de 30 pixels, un affichage de bloc, une position absolue, une largeur et une hauteur de 500 pixels, et une bordure d'un rayon de 50%.

Parallèlement à cela, nous utilisons la propriété d'image d'arrière-plan pour créer un graphique à secteurs avec son attribut «conique-gradient». Nous devons donner les différentes valeurs et couleurs pour trois sections coniques du graphique à tarte pour les directions x, y et z. La valeur totale de 3 sections coniques avec trois axes - x, y et z - définit la zone pour chaque section différemment. Fermons la balise de style, enregistrons le code et exécutons ce code dans le code Visual Studio.

La sortie de ce code HTML affiche un seul cap et un graphique à secteurs affichés sur l'écran de page Web HTML. Le graphique à tarte affiche 3 sections coniques avec différentes couleurs et pourcentages.

Exemple 02:

Commençons par un autre exemple de HTML pour créer un graphique à tarte d'un nouveau style. Le même format HTML est utilisé dans ce fichier. Nous jetons un coup d'œil à la zone du corps avec son style pour chaque élément de la balise de style de notre code. La couleur globale du fond du corps est définie sur le gris via la propriété «d'arrière-plan» utilisée pour le «.élément de corps. Le corps de cette page HTML contient une seule rubrique de taille 1 suivie par la création d'un nouveau conteneur «div» spécifié par l'identifiant «my-pie-chart-container». L'en-tête n'a pas de style tandis que cet écran de conteneur est fléchi et les éléments sont alignés sur le centre.

Dans ce conteneur principal, nous créons deux autres conteneurs en utilisant l'élément «div». Le premier «div» est classé par l'ID «My-Pie-Chart» et le deuxième «div» est classé par l'ID «Container». Le premier conteneur «div» avec le «My-Pie-Chart» est utilisé pour créer un graphique à tarte en forme de cercle. Pour cela, utilisez sa classe «My-Pie-Chart» avec la propriété «arrière-plan» dans une balise de style. L'attribut «conique-gradient» est transmis à la propriété d'arrière-plan avec différentes couleurs et leur rapport d'aspect en pourcentage pour afficher chaque couleur dans le graphique à tarte avec un pourcentage et une zone sélectionnés. La propriété Border-Radius pour ce graphique à tarte est fixée à 50% avec la largeur et la hauteur de 200px.

Notre graphique à tarte est créé en forme de cercle. La deuxième div avec l'ID «conteneur» utilise 8 autres conteneurs. Le conteneur «div» avec l'ID «Container» contient une marge gauche de 30px, un fond rose de thé et un rembourrage 5px. Les 8 conteneurs de cette section «Div» sont classés par la classe «Entrée» qui est stylée avec l'affichage flexible et les éléments d'alignement du centre. Chaque élément «div» de ces 8 conteneurs contient 2 autres conteneurs. Le premier conteneur dans chacun est classé avec la classe «Color d'entrée» et le style en ligne ajoutant la couleur d'arrière-plan pour chaque. La classe «entrée en couleur» pour ce premier «div» est utilisée pour définir la largeur et la hauteur des 8 sections, je.e. 15px largeur et hauteur pour chacun.

Le deuxième conteneur DIV est classé avec le «titrage» ainsi que le titre d'un graphique à secteurs pour chaque zone de section. Les marges supérieure et gauche pour cette section sont définies sur 5px et 3px, respectivement. Les 4 principaux éléments «div» sont fermés ici. Enregistrons et exécutons ce code pour voir le résultat du graphique à tarte.

La sortie montre 1 en-tête et 1 graphique à tarte avec un conteneur sur le côté gauche qui affiche les titres appartenant à chaque couleur du graphique à tarte.

Exemple 03:

Il commence par la tête 1 de la plus grande taille de HTML. Ensuite, nous avons 5 éléments «div» utilisés pour la création du graphique à 5 tartes. Nous utilisons la même classe de nom pour les 5 éléments div, je.e. classe = "Pie". Nous utilisons le style dans chaque section Div pour définir la valeur de pourcentage pour chaque graphique à tarte avec l'utilisation du jeu de caractères «-p» à 20, 40, 95, 80 et 75. Parallèlement à cela, la propriété «-col» est utilisée pour définir la couleur pour chaque graphique à tarte sauf le premier, je.e. bleu foncé, violet, vert et jaune. Les axes X, Y et Z sont définis pour les 4 graphiques à tarte autres que le premier.

Jetons un coup d'œil à l'étiquette de style de cette page HTML. Nous utilisons la classe «Pie» pour styliser le premier élément div avec un pourcentage de 20 avec la couleur rouge foncé. Également «-b» épaisseur de bordure, largeur, rapport d'aspect, style d'affichage, marges et différentes propriétés liées à la police sont utilisées pour créer une forme de graphique à tarte standard. Les décalages avant et après sont utilisés pour ajouter aucun contenu et spécifier la position et le rayon de bordure pour l'élément avant et après l'élément de classe «Pie». Certaines autres propriétés de transition, de transformation et de traduire sont utilisées pour styliser les graphiques circulaires.

La sortie des 5 graphiques à tarte est affichée avec 5 couleurs et pourcentages différents.

Conclusion

Cet article démontre l'immense utilisation des diagrammes et des graphiques dans différents domaines de l'informatique et de la vie en général comme l'industrie, l'économie, les services bancaires sur Internet en ligne, le commerce électronique et bien d'autres. Nous avons discuté des différents exemples HTML pour illustrer l'utilisation de propriétés de style CSS différentes et standard qui sont utilisées pour créer des graphiques circulaires. Tous les exemples montrent des propriétés très différentes et des graphiques circulaires pourtant très différents pour les pages HTML.