CSS PIE -diagram
Eksempel 01:
La oss komme i gang med det mest grunnleggende eksemplet på HTML -stylingen for å lage et kakediagram på HTML -websiden vår. Dette eksemplet starter med de grunnleggende HTML -kodene - HTML, hode, stil og kropp. Før styling av HTML -siden, må vi se på alle elementene via kroppskoden. Liket på vår HTML -side inneholder en enkelt overskrift av største størrelse, i.e. H1. Overskriften følger "Div" -elementet for å opprette en ny seksjon på siden vår. DIV -elementet er spesifisert med en "PiechartContainer" -klasse og er stengt etter det. Liket på denne HTML -siden er fullført her.
Nå har vi et hode som følger "tittelen" -koden for å gi et navn til websiden vår. Innenfor CSS -styling -taggen til denne koden bruker vi “Body” -elementet for å style alle elementene kombinert først. Alle kroppene inneholder bakgrunnsgrå farge. Nå bruker vi "PiechartContainer" -klassen med prikken (.) karakter for å lage et kakediagram. DIV -elementet som inneholder denne klassen, får en toppmargin på 30 piksler, blokkeringsskjerm, absolutt posisjon, bredde og høyde på 500 piksler og grensen til en radius på 50 prosent.
Sammen med det bruker vi bakgrunnsbildeegenskapen for å lage et kakediagram med den "konisk-gradient" attributtet. Vi må gi de forskjellige verdiene og fargene for tre koniske deler av kakediagrammet for X-, Y- og Z -retningene. Den totale verdien av 3 koniske seksjoner med tre akser - x, y og z - definerer området for hver seksjon på en annen måte. La oss lukke stilkoden, lagre koden og kjøre denne koden i Visual Studio -koden.
Utgangen fra denne HTML -koden viser en enkelt overskrift og et kakediagram som vises på HTML -websideskjermen. Kakediagrammet viser 3 koniske seksjoner i det med forskjellige farger og prosenter.
Eksempel 02:
La oss komme i gang med et annet eksempel på HTML for å lage et kakediagram over en ny stil. Det samme HTML -formatet brukes i denne filen. Vi ser på kroppsområdet sammen med stylingen for hvert element fra stilkoden til koden vår. Den generelle kroppsbakgrunnsfargen er satt til grå via "bakgrunn" -egenskapen som brukes til ".Body ”-element. Liket på denne HTML-siden inneholder en enkelt overskrift på størrelse 1 etterfulgt av opprettelsen av en ny “Div” -beholder spesifisert av “My-Pie-Chart-Container”--Det. Overskriften har ingen styling mens denne containerdisplayet er bøyd og gjenstandene er på linje med sentrum.
Innenfor denne hovedbeholderen lager vi to andre containere som bruker “Div” -elementet. Den første "div" er klassifisert av "My-Pie-Chart"----ID-en og den andre "Div" er klassifisert av "Container"----et. Den første "div" -beholderen med "My-Pie-Chart" brukes til å lage et kakediagram i en sirkelform. For dette, bruk sin "My-Pie-Chart" -klasse med "bakgrunn" -egenskapen i en stilkode. Attributtet "konisk gradient" sendes til bakgrunnsegenskapen med forskjellige farger og deres sideforhold innen prosentandel for å vise hver farge i kakediagrammet med valgt prosent og område. Border-radius-egenskapen for dette kakediagrammet er satt til 50% med 200px bredde og høyde.
Kakediagrammet vårt er opprettet i en sirkelform. Den andre diven med "container" - --et bruker 8 containere i den i den. "Div" -beholderen med "Container" - - --et inneholder en 30px venstre margin, tosrosa bakgrunn og 5px polstring. De 8 containerne i denne "Div" -delen er klassifisert av "Entry" -klassen som er stylet med flex -displayet og senteret justerte elementer. Hvert "div" -element i disse 8 containerne har 2 containere til i seg. Den første beholderen i hver er klassifisert med "inngangsfarge" -klassen og inline styling og legger til bakgrunnsfargen for hver. "Inngangsfarget" klassen for denne første "div" brukes til å sette bredden og høyden for alle 8 seksjoner, i.e. 15px bredde og høyde for hver.
Den andre Div-beholderen er klassifisert med "inngangstitelen" sammen med tittelen på et kakediagram for hvert seksjonsområde. Topp- og venstre marginer for denne delen er satt til henholdsvis 5px og 3px. Alle de 4 viktigste "div" -elementene er stengt her. La oss lagre og kjøre denne koden for å se kakediagramresultatet.
Utgangen viser 1 overskrift og 1 kakediagram med en beholder på venstre side som viser titlene som tilhører hver farge på kakediagrammet.
Eksempel 03:
Det starter med overskrift 1 av den største størrelsen i HTML. Deretter har vi 5 “div” -elementer som brukes til 5 kakediagramoppretting. Vi bruker samme navneklasse for alle de 5 divelementene, i.e. klasse = “PIE”. Vi bruker stylingen i hver DIV-seksjon for å angi prosentverdien for hvert kakediagram med bruk av “-P” -tegn satt til 20, 40, 95, 80 og 75. Sammen med det brukes egenskapen “-Col” til å stille inn fargen for hvert kakediagram bortsett fra den første, i.e. mørkeblå, lilla, grønn og gul. X-, y- og z -aksene er satt for alle 4 kakediagrammer enn den første.
La oss se på stilkoden til denne HTML -siden. Vi bruker "PIE" -klassen for å style det første divelementet med en prosentandel av 20 med den mørkerøde fargen. Også "-b" grensetykkelse, bredde, aspektforhold, skjermstil, marginer og forskjellige fontrelaterte egenskaper brukes til å lage en standard kakediagramform. Før og etter forskyvninger brukes til å legge til ingen innhold og spesifisere posisjon og grenseradius for elementet før og etter "PIE" -klasseelementet. Noen andre overgangs-, transformasjons- og oversettelsesegenskaper brukes til å style kakediagrammer.
Utgangen for alle 5 kakediagrammer vises med 5 forskjellige farger og prosenter.
Konklusjon
Denne artikkelen demonstrerer den enorme bruken av diagrammer og diagrammer innen forskjellige datafelt og liv generelt som industrielt, økonomisk, online internettbank, netthandel og mange flere. Vi diskuterte de forskjellige HTML -eksemplene for å illustrere bruken av forskjellige og standard CSS -stylingegenskaper som brukes til å lage kakediagrammer. Alle eksemplene viser veldig forskjellige egenskaper og likevel ganske forskjellige kakediagrammer for HTML -sidene.