Grafiku me byrek html. Grafikët svg të byrekëve dhe donutëve në HTML5 nga e para

Dhe kodi CSS për këtë animacion bëhet si më poshtë (rregullat për .pie nuk shfaqen, pasi ato mbeten të njëjta):

@keyframes spin ( në ( transform: rotate (.5turn); ) ) @keyframes bg ( 50% ( sfond: #655; ) ) .pie::fore ( /* [stilet e tjera të pandryshuara] */ animacion: rrotullim 50s linear e pafundme, bg 100s step-end infinite; animacion-play-state: në pauzë; animacion-vonesë: trashëgoj; )

Në këtë pikë, ne mund ta konvertojmë shënimin për të përdorur përqindjet si përmbajtje, siç kishim synuar fillimisht të bënim, dhe të shtojmë stilet inline të vonesës së animacionit nëpërmjet një skripti të thjeshtë:

$$(".pie").forEach(funksion(pie) (var p = parseFloat(pie.textContent); pie.style.animationDelay = "-" + p + "s"; ));

Ju lutemi vini re se ne e kemi lënë tekstin të paprekur pasi na nevojitet për akses dhe përdorshmëri. Grafikët tanë të byrekut tani duken si Figura 8. Duhet të fshehim tekstin që mund të vihet në dispozicion me ngjyra: transparente në mënyrë që të qëndrojë të përzgjedhshëm dhe të printueshëm. Për shkëlqim shtesë mundemi vendosni vlerat e përqindjes në qendër të grafikut me byrek në mënyrë që ata të mos jenë brenda vend i rastësishëm kur përdoruesi përpiqet t'i nxjerrë në pah ato. Për ta bërë këtë, na duhet:

Figura 8 - Teksti ynë përpara se ta fshehim

• konvertoni vlerën e lartësisë së grafikut në lartësinë e vijës (ose shtoni një vlerë të lartësisë së rreshtit të barabartë me lartësinë, por kjo do të ishte dyfishim i kotë i kodit pasi lartësia e rreshtit do të vendoset në lartësinë e llogaritur , që është mirë);
• caktoni madhësinë dhe pozicionin e pseudo elementit me pozicionim absolut në mënyrë që të mos e shtyjë tekstin poshtë;
• add text-align: qendër; për të përqendruar tekstin horizontalisht.

Kodi përfundimtar duket si ky:

Byrek ( pozicioni: relative; gjerësia: 100 px; lartësia e vijës: 100 px; rreze-kufi: 50%; sfondi: jeshile e verdhë; sfondi-imazhi: gradient linear (djathtas, transparent 50%, #655 0); ngjyra: transparente ; text-align: në qendër; ) @keyframes rrotullohet ( në ( transformim: rotate(.5turn); ) ) @keyframes bg ( 50% ( sfond: #655; ) ) .pie::para (përmbajtja: ""; pozicioni : absolute; lart: 0; majtas: 50%; gjerësia: 50%; lartësia: 100%; rreze-kufi: 0 100% 100% 0 / 50%; ngjyra e sfondit: trashëgoj; origjina e transformimit: majtas; animacion: rrotullim 50s linear i pafund, bg 100s hap-fund i pafund; animacion-play-state: në pauzë; animacion-vonesë: trashëgoj; )

Zgjidhje e bazuar në SVG

SVG merr vendimin e shumë njerëzve detyrat grafike më e lehtë, dhe grafikët me byrek nuk bëjnë përjashtim. Megjithatë, në vend që të krijojmë një grafik byrek duke përdorur shtigje, e cila do të kërkonte matematikë komplekse, ne do të përdorim një truk të vogël.

Le të fillojmë me një rreth:

Tani le të aplikojmë disa stile bazë për të:

Rrethi (mbushja: jeshile e verdhë; goditje: #655; gjerësia e goditjes: 30; )

shënim: Siç e dini, këto Karakteristikat CSS janë gjithashtu të disponueshme si atribute Elemente SVG që mund të ishin të dobishëm nëse bartja ishte një shqetësim.

Figura 9 - Pika jonë e fillimit: një rreth i gjelbër SVG me një goditje të trashë #655

Ju mund të shihni rrethin tonë të përvijuar në Figurën 9. Goditjet SVG përbëhen nga më shumë se vetëm veçoritë e goditjes dhe gjerësisë së goditjes. Ka shumë veti të tjera më pak të njohura që lidhen me goditjet që ju lejojnë të rregulloni mirë pamjen e tyre. Njëri prej tyre është stroke-dasharray, i cili është krijuar për të krijuar goditje të ndërprera. Për shembull, ne mund ta përdorim atë për këtë:

Stroke-dasharray: 20 10; Figura 10 - Një goditje e thjeshtë me ndërprerje e krijuar me stroke-dasharray

Kjo do të thotë që ne duam të marrim vija me gjatësi 20 me boshllëqe me gjatësi 10, si ato të paraqitura në Figurën 10. Në këtë pikë, mund të pyesni veten nëse ky shembull SVG ka ndonjë lidhje me grafikët e byrekut. Por gjërat bëhen më të qarta kur aplikojmë një goditje me një gjatësi vize 0 dhe boshllëqe më të mëdha se ose të barabarta me e barabartë me gjatësinë perimetri i rrethit tonë (C = 2πr, ose në rastin tonë C = 2π × 30 ≈ 189):

Stroke-dasharray: 0 189; Figura 11 - Disa vlera stroke-dasharray dhe rezultati i tyre; nga e majta në të djathtë: 0 189 ; 40 189; 95189; 150 189

Siç mund ta shihni, në rrethin e parë në Figurën 11, kjo heq goditjen plotësisht dhe ne kemi mbetur vetëm me rrethin e gjelbër. Sidoqoftë, argëtimi fillon kur fillojmë të rrisim vlerën e parë (Figura 11): për shkak të një hendeku kaq të gjatë, nuk do të marrim më goditje me pika, por një goditje që mbulon përqindjen e perimetrit të rrethit që specifikojmë.

Ju mund ta keni kuptuar tashmë se në cilën drejtim po shkojmë: nëse e zvogëlojmë rrezen e rrethit tonë aq sa të mbulohet plotësisht nga goditja e tij, do të përfundojmë me diçka që duket shumë si një grafik byrek. Për shembull, në figurën 12 mund të shihni se si do të dukej kjo kur aplikohet në një rreth me një rreze prej 25 dhe një gjerësi goditjeje (gjerësia e goditjes) 50:

Figura 12 - Imazhi ynë SVG ka filluar të duket si një grafik byrek

Mbani mend: goditjet SVG janë gjithmonë gjysmë brenda dhe gjysma jashtë elementit ku aplikohen. Në të ardhmen, ne do të jemi në gjendje ta kontrollojmë këtë sjellje.

rrethi (mbushja: jeshile e verdhë; goditje: #655; gjerësia e goditjes: 50; brezi i vijës: 60 158; /* 2π × 25 ≈ 158 */ )

Tani ta ktheni këtë imazh në një tabelë byrek si ato që krijuam në zgjidhjen e mëparshme është shumë e lehtë: thjesht shtoni rreth më i madh i gjelbër për goditje në tru Dhe rrotullojeni atë 90° në të kundërt të akrepave të orës në mënyrë që të fillojë nga lart në mes. Për aq sa

Svg ( transformimi: rrotullo (-90 gradë); sfondi: jeshile e verdhë; rreze-kufi: 50%; ) Figura 13 - Grafiku i byrekut përfundimtar me SVG

Rezultatin përfundimtar mund ta shihni në Figurën 13. Kjo metodë e bën edhe më të lehtë animimin e grafikut me byrek nga 0% në 100%. Ne vetëm duhet të krijojmë një animacion CSS që ndryshon stroke-dasharray nga 0 158 në 158 158:

@keyframes mbushje ( deri në ( stroke-dasharray: 158 158; ) ) rreth (mbush: yellowgreen; goditje: #655; stroke-width: 50; stroke-dasharray: 0 158; animacion: fillup 5s linear infinite; )

Si një përsosje e mëtejshme, ne mund të vendosim një rreze të caktuar të rrethit në mënyrë që perimetri i tij të jetë (pafundësisht afër) 100, dhe kështu mund të specifikoni gjatësitë e stroke-dasharray si përqindje, pa asnjë llogaritje. Meqenëse perimetri është 2πr, na duhet një rreze prej 100 ÷ 2π ≈ 15.915494309, e cila për nevojat tona mund të rrumbullakoset deri në 16. Gjithashtu do të vendosim dimensionet e SVG në atributin viewBox, në vend të atributet e gjerësisë dhe lartësia për ta bërë atë të përshtatet me dimensionet e enës së tij.

Pas këtyre modifikimeve, faqosja e grafikut të byrekëve të paraqitur në Figurën 13 do të jetë si më poshtë:

Dhe CSS bëhet si kjo:

Svg ( gjerësia: 100 pikselë; lartësia: 100 pikselë; transformimi: rrotullohet (-90 gradë); sfondi: jeshile e verdhë; rrezja e kufirit: 50%; ) rrethi (mbushja: jeshile e verdhë; vija: #655; gjerësia e goditjes: 32; vija-gjerësia: 32 : 38 100; /* për 38% */ )

Shënim, sa e lehtë është tani të ndryshosh përqindjen. Edhe pse edhe me këtë thjeshtësim, ne nuk duam të përsërisim të gjithë atë shënim SVG për çdo grafik byrek. Është koha që JavaScript të na ndihmojë me pak automatizim. Ne do të shkruajmë një skript të vogël për të marrë një shënim të thjeshtë HTML si ky...

Dhe shtoni svg inline brenda çdo elementi .pie me të gjitha elementet e nevojshme dhe atributet. Ai gjithashtu do të shtojë elementin

Faqja ime përmban një fletë stilesh të ngjashme styles.css për stilet e mia personale CSS. Ju gjithashtu duhet të bëni një kopje të bibliotekës jQuery. Është e nevojshme që shtojca të funksionojë siç duhet.
Në vetvete, faqja është mjaft e lehtë për t'u strukturuar. Elementet e rrethit përmbahen brenda etiketave div që përdorin atributet HTML5 për të manipuluar të dhënat. Përndryshe, ato mund të ruhen në një funksion jQuery, por nëse doni më shumë kontroll mbi secilin element, atëherë është më e lehtë të punoni në HTML.

 

 

 

 
photoshop
 

 
 

 
Ilustruesi
 

 
 

 
pas efekteve
 

 
 

Kjo është një kopje e rreshtit të parë të rrathëve, i përbërë nga 3 njësi të animuara. Të gjitha këto atribute të të dhënave shpjegohen më tej në dokumentacionin e shtojcave. Secili përfaqëson një opsion që përcakton efektin e animacionit. Më poshtë është një përshkrim i shkurtër i opsioneve që përdor:

• dimensioni i të dhënave - madhësia totale e gjerësisë / lartësisë së rrethit;
• të dhëna-tekst - teksti që shfaqet në qendër të çdo rrethi;
• gjerësia e të dhënave - trashësia e harkut rrotullues të të dhënave;
• data-fontsize - madhësia e shkronjave të tekstit në qendër;
• përqindje e të dhënave - një numër nga 0-100 që përfaqëson përqindjet në rrethin tuaj;
• data-fgcolor - ngjyra e planit të parë të rrethit;
• data-bgcolor - ngjyra e sfondit të rrethit;
• data-fill - mbushje e brendshme e ngjyrës së sfondit të rrethit të brendshëm.

Struktura e faqes CSS

/** struktura e faqes **/ .wrap ( shfaqja: bllok; marzhi: 0 automatik; gjerësia maksimale: 800 px; ) #intro ( shfaqja: bllok; margjina-fund: 25 px; rreshtimi i tekstit: në qendër; ) #intro p ( madhësia e shkronjave: 1,8em; lartësia e rreshtit: 1,35em; ngjyra: #616161; stili i shkronjave: italic; margjina e poshtme: 25 px; ) #stats ( shfaqja: bllok; gjerësia: 100%; mbushja: 15 px 0; sfond: #f8f8f8; kufiri-lart: 4px solid #c3c3c3; kufiri-fund: 4px solid #c3c3c3; ) #stats .row ( shfaqja: bllok; ).circle-container ( shfaqja: bllok; noton: majtas; margjina-djathtas : 55 px; margjina e poshtme: 45 px; ) .circle-container h3 ( ekrani: bllok; rreshtimi i tekstit: në qendër; madhësia e shkronjave: 2,25em; lartësia e rreshtit: 1,4em; ngjyra: #363636; hije e tekstit: 1px 1px 0 #fff;)

Brenda çdo seksioni, përmbajtja mbahet brenda .wrapdiv për të rregulluar në qendër. Gjithashtu, elementët e rrethit që lëvizin lirshëm kanë nevojë për një enë shtesë. .sqaroj për të mbajtur gjithçka në linjë siç duhet.

/** sqarim **/ .clearfix:after ( përmbajtja: "."; ekrani: bllok; i qartë: të dyja; dukshmëria: e fshehur; lartësia e linjës: 0; lartësia: 0; ) .clearfix ( shfaqja: blloku i brendshëm; ) html .clearfix ( shfaqja: bllok; ) * html .clearfix (lartësia: 1%; )

Kjo klasë qartësoj prej vitesh njihet si tretësirë ​​kontejneri me elementë që lëvizin lirshëm. Zakonisht ato hiqen nga teksti i dokumentit dhe nuk ruajnë vlerën e gjerësisë/lartësisë së tyre origjinale. Por kjo e mban konstante gjerësinë e enës #statistika dhe lë hapësirë ​​që më shumë përmbajtje të vendoset më poshtë në faqe.

Prekjet e fundit

$(funksion()( $(".circlestat").circliful(); ));

Për ata që nuk janë të njohur me sintaksën jQuery, do të jap një përshkrim të shkurtër. Pasi të jetë ngarkuar dokumenti, ne ekzekutojmë një funksion të ri. Qëllimi ynë i brendshëm është çdo element që përdor klasën .circlestat dhe ekzekutoni funksionin rrethore (). Kjo sjell shtojcën Rrethore, i cili krijon efekte animacioni, në veprim dhe aplikon përmbajtje/ngjyra shtesë.

Nuk mund të them se këto qarqe do të jenë gjithmonë zgjidhja më e mirë. Kam parë shumë portofol që bazoheshin në fjalë dhe numra, por jo në vetë punën. Merrni parasysh përdorimin e këtyre rrathëve në raste të rralla dhe provoni t'i huazoni ato për përdorime të tjera jashtë aftësive të thjeshta. Statistikat tuaja nuk duhet të maten në përqindje - ato mund të tregojnë sa vite keni qenë në biznes, numrin total të projekteve tuaja ose numra të tjerë të ngjashëm. Mund të shkarkoni falas një kopje të udhëzuesit tim dhe të eksperimentoni me kodin për t'iu përshtatur më mirë projekteve tuaja.

"Kuzhina" e një zhvilluesi të internetit është disi e ngjashme me gatimin në shtëpi. Zhvilluesi ka qasje në një sërë bibliotekash nga kodi i përfunduar, e cila do ta ndihmojë atë të bëjë një aplikacion në internet në të njëjtën mënyrë që një kuzhinier në shtëpi mund të përdorë produkte të gatshme për të gatuar pjatën e tij në mënyrë më efikase. Në të dyja rastet, cilësia e artikujve të përgatitur paraprakisht duhet të jetë shumë e rëndësishme. Megjithatë, ndonjëherë cilësia sakrifikohet për lehtësi. Mos më keqkuptoni, komoditeti nuk është gjithmonë i keq. Mund të jetë e dobishme kur të mirat dhe të këqijat njihen dhe analizohen mirë. Duke analizuar opsionet për grafikët e byrekut dhe donut në HTML, ne mund të theksojmë vetëm disa:

1. Grafiku i bazuar në elementin Canvas të krijuar në klient (p.sh. JavaScript)
2. Grafiku i bazuar në SVG dhe i krijuar nga klienti (p.sh. JavaScript)
3. Diagrami i bazuar në SVG dhe i krijuar në server

Bibliotekat e gatshme duke përdorur Canvas dhe SVG JavaScript

Bibliotekat JavaScript për vizatimin e grafikëve janë shpesh më të përshtatshme dhe të ngarkuara me një sërë opsionesh interesante si interaktiviteti. Këtu janë disa biblioteka:

1. D3.js
2. Chartist.js
3. Listat e Google

Disa rreshta JavaScript dhe një grup të dhënash do t'ju lejojnë të krijoni një diagram në sit në sekonda. Nuk është çudi që kaq shumë zgjedhin këtë rrugë.

Pra, pse të shqetësoheni dhe të shkruani kod për ta me duart tuaja? Kjo është një pyetje e mrekullueshme që ia kam bërë edhe vetes. Në fund, u sigurova për tre gjëra:

1. Shumica e bibliotekave JavaScript janë të vështira për t'u gjetur, veçanërisht ato të bazuara në elementin Canvas (me përjashtim të Google Charts)
2. Nëse informacioni në grafik është shumë i rëndësishëm (siç ishte në situatën time), a duhet të mbështetemi në një skript që funksionon tek klienti për të gjeneruar informacionin? Unë nuk mendoj kështu.
3. Nëse gërmoj më thellë në kodin SVG dhe i bëj duart e mia pis, mund të mësoj pak më shumë për marrëzitë magjike pas tij. Me fjalë të tjera, procesi i të mësuarit mund të jetë argëtues dhe ia vlen përpjekja.

Situata ime

Ekipi im kishte nevojë për një komponent të thjeshtë që mund të ndërtohej në server dhe ekran informacion të thjeshtë në lidhje me përdorimin e llogarive. Gjithashtu, preferenca jonë ishte lehtësia e këtij komponenti (duke shmangur JavaScript nëse është e mundur); nuk kishte nevojë të ishte tepër i sofistikuar apo ndërveprues, thjesht duhej të shfaqte të dhëna të rëndësishme.

Një shënim shtesë për grafikët e bazuar në elementin Canvas

Ju mund të keni vënë re (nëse jeni njohur me grafikimet për ueb) që unë nuk e kam përfshirë Chart.js në listën e bibliotekave të rekomanduara më sipër. Ndërkohë që mund ta përdorni patjetër, ia vlen të keni parasysh se Chart.js përdor elementin Canvas për të vizatuar grafikët e tij dhe përmbajtja e elementit nuk është pjesë e DOM. Prandaj, ata nuk janë të aksesueshëm për lexuesit e ekranit. Kjo do të thotë që ju duhet të pranoni masat shtesë për t'u siguruar që të dhënat tuaja janë të disponueshme.

Hyrje në grafikët CSS dhe SVG

Grafikët CSS dhe SVG janë në thelb më të aksesueshëm dhe semantikë se teknologjitë e tjera. Por ato mund të jenë komplekse, dhe ndoshta kërkojnë kohë, nëse kodohen me dorë.

CSS ninja Lea Verow ofron disa opsione për krijimin e grafikëve me byrek nga e para në artikullin e saj "Dizajnimi i grafikëve fleksibël, të mirëmbajtur me byrekë me CSS dhe SVG". Metodat e tij mund të aplikohen edhe në grafikët e donutëve.

Robin Randle ka shkruar gjithashtu për krijimin e tabelave thjesht me CSS, ku ai gjithashtu tregon dështimet e tij në qasje.

e pashpjegueshme

Bëra disa google për SVG dhe grafikët e donutëve dhe hasa në artikuj nga Lea Verow dhe Robin Randle (ata janë përmendur më lart) përveç disa të tjerëve. Pothuajse të gjithë diskutuan përdorimin e atributeve stroke-dasharray dhe stroke-dashoffset në SVG për të pozicionuar pjesët e një grafiku. Këto veti janë identike me "stroke" kur krijohen vektorë në programe si Adobe Illustrator.

Disa nga këta artikuj madje diskutuan animacionin në SVG, i cili është i lezetshëm, por gjithashtu jo ai që kërkoja.

Pas kërkimit tim, unë munda ta kuptoja atë duke përdorur nga SVG së bashku me stroke dhe stroke-dasharray mund të më jepnin segmentet e mbivendosura të byrekut që më duheshin. Kuptova gjithashtu se stroke-dashoffset do të më lejonte të "animoj" ose, me fjalë të tjera, të pozicionoja segmentin ku doja në rreth.

Megjithatë, nuk duket se kam gjetur ndonjë shpjegim të qartë se si funksionuan atributet e pikës së goditjes dhe çfarë kishin të bënin me perimetrin e një rrethi. Dhe ajo që ishte më e paarritshme ishte bashkimi i disa elementeve (njëri pas tjetrit) rreth rrethit. Edhe më mirë, cila është formula për marrjen e këtyre pozicioneve relative duke përdorur madhësitë unike/dinamike të segmentit SVG dhe atributet e goditjes?

Kështu, u vendosa të zbuloja vetë.

Shënim: Nëse gjeni ndonjë burim që shpjegon këto koncepte, ju lutemi shpërndajeni.

Si të krijoni grafikun tuaj SVG

Shpjegimi i stroke-dasharray dhe stroke-dashoffset

Le të fillojmë me një "grafikë donut" të thjeshtë SVG.

Do të vini re disa gjëra:

1. Rrezja (atributi "r") duket absurde! Pse? Doja t'i bëja madhësitë e segmenteve të mia logjike, të kuptueshme dhe të lexueshme. Për ta arritur këtë, vendosa të bazoj gjithçka në 100% (ose një rreth 100). Format SVG janë të shkallëzueshme, kështu që nuk ka rëndësi se sa të mëdha përfundojnë; të paktën matematika këtu do të jetë e thjeshtë. Duke vazhduar te diçka që mbaj mend nga matematika e shkollës së mesme: E di që rrezja e një rrethi është r = C/(2π) ose r = 100/(2π). Rezultati është 15.91549430918952. Numër i çmendur me shumë shifra, po, e di, por më vonë do të na lehtësojë jetën.
2. Për Kutia e pamjes jepen vlerat "0 0 42 42". Ato duhet të jenë dyfishi i vlerave cx & cy (qendra x dhe qendra y). dhe të jetë pak më i madh se diametri i rrathëve (përfshirë gjerësinë e konturit).
3. ka me klasën "donut-hole". Kjo është ajo që garantohet për ta bërë qendrën të bardhë. Nëse kjo nuk është e rëndësishme për ju (në rastin e një të thjeshtë grafik me byrek), atëherë ky artikull mund të hiqet.
4. Gjithashtu ka me klasën "unazë donut". Shërben si sfond gri i hapur në rast se sektorët nuk mbushin 100% të rrethit.

Pra, ne duhet të rregullojmë madhësinë e sektorit në përqindjen e dëshiruar. Le të përdorim 85%:

Sektorët krijohen duke përdorur atributin e goditjes SVG të quajtur stroke-dasharray. Vlera që kemi vendosur në shembullin e mësipërm është "85 15".

Nëse e mendojmë grafikun si një grafik byrek, atëherë nga prania e një sektori prej 85%, mund të gjykojmë pjesën e mbetur prej 15%. Këto dy vlera janë një grup i kufizuar nga hapësira. Ja çfarë ndodh: krijohet një vizë prej 85 njësive, pastaj një hendek prej 15 njësive, më pas një vizë prej 85, një hendek prej 15, e kështu me radhë e kështu me radhë. Por duke qenë se ne përdorim një rreth dhe totali është 100, gjithçka përsëritet përsëri. Nëse nuk e kemi bërë vlerën e dytë në grup në mënyrë që të plotësojë numrin e parë në njëqind, atëherë do të marrim një shirit të tretë (ose fraksion) ose më shumë. Për shembull, këtu është stroke-dasharray nga " 10 10 ":

Pra, në figurën 2 dhe figurën 3, mund të vëreni se stroke-dasharray nuk fillon në krye (në orën 12:00). Në vend të kësaj, në të vërtetë fillon me anën e djathtë(3:00), dhe lëviz në drejtim të akrepave të orës rreth rrethit.

Nëse duam të pozicionojmë (ose të fillojmë) në krye, atëherë duhet të përdorim stroke-dashoffset . Megjithatë, ndryshe nga stroke-dasharray, stroke-dashoffset lëviz në drejtim të kundërt të akrepave të orës. Pra, do të na duhet të vendosim vlerën në "25" (25% nga ana tjetër nga ora 3:00, përsëri në 12:00). Mos harroni se ky nuk është një numër negativ sepse kompensimi lëviz kundër shigjetës.

Si të vendosni feta donut rreth SVG

Tani duhet të shtojmë sektorë shtesë rreth rrethit. Le të përdorim një sektor që zë 15% të rrethit. Përqindja e mbetur për goditje-dasharray do të jetë 85%, pavarësisht nga çdo sektor tjetër. Prandaj, kodi do të duket si ky:

Ne e lamë stroke-dashoffset në 25, kështu që sektori i gjelbër fillon në krye dhe shkon në drejtim të akrepave të orës, duke mbivendosur sektorin e parë (rozë).

Natyrisht, kjo nuk është ajo që ne donim. Ne duam që përqindja e pesëmbëdhjetë (jeshile) të përshtatet mirë në hapësirën e lënë nga përqindja e tetëdhjetë e pestë (rozë). Ne mund të rregullojmë stroke-dashoffset derisa të jemi me fat, por nuk do të ishte aq e lehtë nëse do të kishim dy sektorë të tjerë. Në vend të kësaj, ne kemi nevojë për një formulë:

Rrethi - gjatësia totale e të gjithë sektorëve të mëparshëm + kompensimi i sektorit të parë = kompensimi i sektorit aktual

Duke futur numrat tanë, marrim:

Le të shtojmë më shumë sektorë në grafikun tonë!

E njëjta formulë funksionon për shtimin e sektorëve shtesë. Le ta mbushim grafikun me 40, 30, 20 për qind dhe 10 të mbetura nuk do të përdoren.

Rezultati:

Shtimi i tekstit brenda grafikut

Nuk do të ishte një tabelë donut pa tekst brenda dhe në mes; për këtë është vrima, apo jo? Epo, shtimi i tekstit është i lehtë. Ne thjesht përdorim elementin , e cila është vendase për format SVG.

Do të vini re që e kam ndarë tekstin e grafikut në 2 elementë dhe i grupoi ato ). Kjo u bë në mënyrë që të mund t'i vendosim më lehtë titullin dhe numrin njëri mbi tjetrin, si dhe t'i rregullojmë ato si një njësi. I rregullova atributet X dhe Y për të filluar nga qendra e formës në vijën fundore dhe për t'i lidhur ato në të majtë.

Siç mund ta shihni, pozicionimi nuk është fare i duhuri, kështu që ne do të na duhet ta zbukurojmë atë me pak CSS:

Së pari, le të shtojmë fontin Montserrat (vetëm sepse më pëlqen). Pastaj duhet të rregullojmë madhësinë e shkronjave ("madhësia e shkronjave") dhe lartësia e rreshtit ("lartësia e rreshtit"). Pas shtimit të "translateY" në 0.25em, teksti rreshtohet pak vertikalisht, por nuk kemi mbaruar ende.

Ne duhet t'i bëjmë të dyja kutitë e tekstit më të vogla dhe t'i rreshtojmë ato në qendër duke rregulluar madhësinë e shkronjave aq sa duam (0.6em për numrin më të madh dhe 0.2em për titullin duket mirë) dhe duke përdorur veçorinë "text-anchor" me vlerën "mesi".

Tani teksti është në qendër. E tëra që mbetet është ta bëni atë me shkronja të mëdha (është e lehtë) dhe t'i vendosni elementët e tij individualë duke përdorur "translateY" në mënyrë që të grumbullohen siç duhet. Dhe kjo është ajo që kemi tani:

Çështjet e aksesueshmërisë

Siç e përmenda më herët, përmbajtja SVG është pjesë e DOM, kështu që është në thelb më e aksesueshme. Kjo e bën tepër të lehtë ofrimin e kontekstit shtesë për lexuesit e ekranit përmes atributeve dhe elementeve të tipit të titullit.

Niveli i parë i çështjeve të aksesueshmërisë është ta bëjë grafikun SVG më semantik duke e mbështjellë atë në një element