Grafico a torta CSS
Esempio 01:
Iniziamo con l'esempio più elementare dello stile HTML per creare un grafico a torta sulla nostra pagina web HTML. Questo esempio inizia con i tag HTML di base: html, testa, stile e corpo. Prima di accumulare la pagina HTML, dobbiamo dare un'occhiata a tutti i suoi elementi tramite il tag del corpo. Il corpo della nostra pagina HTML contiene una singola intestazione delle dimensioni più grandi, i.e. H1. L'intestazione segue l'elemento "Div" per creare una nuova sezione all'interno della nostra pagina. L'elemento Div è specificato con una classe "PiechartContainer" ed è chiuso dopo. Il corpo di questa pagina HTML è completato qui.
Ora abbiamo una testa che segue il tag "titolo" per dare un nome alla nostra pagina web. All'interno del tag di stile CSS di questo codice, usiamo l'elemento "corpo" per modellare tutti i suoi elementi combinati per primi. Tutti i corpi contengono il colore grigio di sfondo. Ora usiamo la classe "PieChartContainer" con il punto (.) carattere per creare un grafico a torta. L'elemento Div contenente questa classe viene assegnato un margine superiore di 30 pixel, display a blocchi, posizione assoluta, larghezza e altezza di 500 pixel e bordo di un raggio del 50 percento.
Insieme a ciò, utilizziamo la proprietà dell'immagine di fondo per creare un grafico a torta con il suo attributo "conico-gradiente". Dobbiamo dare i diversi valori e colori per tre sezioni coniche del grafico a torta per le direzioni X, Y e Z. Il valore totale di 3 sezioni coniche con tre assi - x, y e z - definisce l'area per ciascuna sezione in modo diverso. Chiudiamo il tag di stile, salva il codice ed eseguiamo questo codice all'interno del codice Visual Studio.
L'output di questo codice HTML mostra una singola intestazione e un grafico a torta visualizzata nella schermata della pagina web HTML. Il grafico a torta mostra 3 sezioni coniche al suo interno con colori e percentuali diversi.
Esempio 02:
Iniziamo con un altro esempio di HTML per creare un grafico a torta di un nuovo stile. Lo stesso formato HTML è utilizzato in questo file. Diamo un'occhiata all'area del corpo insieme al suo stile per ogni elemento dal tag di stile del nostro codice. Il colore di sfondo complessivo del corpo è impostato su grigio tramite la proprietà "sfondo" utilizzata per ".Elemento corpo ". Il corpo di questa pagina HTML contiene una singola intestazione della dimensione 1 seguita dalla creazione di un nuovo contenitore "Div" specificato dall'ID "My-Pie-Chart-Container". L'intestazione non ha uno stile mentre questo display del contenitore è flesso e gli articoli sono allineati al centro.
All'interno di questo contenitore principale, creiamo altri due contenitori usando l'elemento "Div". Il primo "Div" è classificato dall'ID "My-Pie-Chart" e il secondo "Div" è classificato dall'ID "Container". Il primo contenitore "Div" con "My-Pie-Chart" viene utilizzato per creare un grafico a torta a forma di cerchio. Per questo, usa la sua classe "My-Pie-Chart" con la proprietà "Background" in un tag di stile. L'attributo "conico-gradiente" viene passato alla proprietà di sfondo con colori diversi e il loro proporzione in percentuale per visualizzare ciascun colore nel grafico a torta con percentuale e area selezionate. La proprietà Border-Radius per questo grafico a torta è impostata al 50% con la larghezza e l'altezza di 200 px.
Il nostro grafico a torta è creato a forma di cerchio. Il secondo div con l'id "contenitore" utilizza altri altri contenitori al suo interno. Il contenitore "div" con ID "contenitore" contiene un margine sinistro da 30 px, sfondo rosa del tè e imbottitura 5px. Gli 8 contenitori all'interno di questa sezione "Div" sono classificati dalla classe "Entry" che è disegnata con il display Flex e gli articoli di allineamento centrale. Ogni elemento "div" di questi 8 contenitori contiene altri 2 contenitori al suo interno. Il primo contenitore all'interno di ciascuno è classificato con la classe "ingresso" e lo stile in linea che aggiunge il colore di sfondo per ciascuno. La classe "Entry-Color" per questo primo "Div" viene utilizzata per impostare la larghezza e l'altezza per tutte e 8 le sezioni, i.e. 15px larghezza e altezza per ciascuno.
Il secondo contenitore Div è classificato con il "titolo di ingresso" insieme al titolo di un grafico a torta per ogni area sezionale. I margini superiore e sinistra per questa sezione sono impostati su 5px e 3px, rispettivamente. Tutti e 4 gli elementi "div" principali sono chiusi qui. Salviamo ed eseguiamo questo codice per vedere il risultato del grafico a torta.
L'uscita mostra 1 intestazione e 1 grafico a torta con un contenitore sul lato sinistro che mostra i titoli appartenenti a ciascun colore del grafico a torta.
Esempio 03:
Si inizia con l'intestazione 1 delle dimensioni più grandi in HTML. Quindi, abbiamo 5 elementi "div" utilizzati per la creazione di grafici a 5 tor. Usiamo lo stesso nome classe per tutti i 5 elementi div, i.e. class = "Pie". Usiamo lo stile all'interno di ciascuna sezione Div per impostare il valore percentuale per ciascun grafico a torta con l'uso del carattere "-P" impostato su 20, 40, 95, 80 e 75. Insieme a ciò, la proprietà "-col" viene utilizzata per impostare il colore per ogni grafico a torta tranne il primo, i.e. Blu scuro, viola, verde e giallo. Gli assi X, Y e Z sono impostati per tutti e 4 i grafici a torta diversi dal primo.
Diamo un'occhiata al tag di stile di questa pagina HTML. Usiamo la classe "Pie" per modellare il primo elemento Div con una percentuale di 20 con il colore rosso scuro. Anche lo spessore del bordo "-b", la larghezza, le proporzioni, lo stile del display, i margini e le diverse proprietà legate al carattere sono utilizzati per creare una forma standard del grafico a torta. Gli offset prima e dopo vengono utilizzati per aggiungere alcun contenuto e specificare la posizione e il raggio del bordo per l'elemento prima e dopo l'elemento di classe "torta". Alcune altre proprietà di transizione, trasforma e traduci vengono utilizzate per modellare i grafici a torta.
L'output per tutti e 5 i grafici a torta sono visualizzati con 5 colori e percentuali diversi.
Conclusione
Questo articolo dimostra l'immenso uso di diagrammi e grafici in diversi settori del calcolo e della vita in generale come industriali, economici, online bancari online, e -commerce e molti altri. Abbiamo discusso dei diversi esempi HTML per illustrare l'uso di proprietà di stile CSS diverse e standard che vengono utilizzate per creare grafici a torta. Tutti gli esempi mostrano proprietà molto diverse e tuttavia grafici a torta abbastanza diversi per le pagine HTML.