edhe pse grafikët me byrek janë mënyra më e zakonshme e paraqitjes së informacionit, duke filluar nga statistikat e thjeshta deri te treguesit e progresit dhe kohëmatësit, madje edhe në formën e tyre më të thjeshtë me dy ngjyra, ato tradicionalisht janë krijuar në ndonjë mënyrë tjetër përveç metoda të thjeshta duke përdorur teknologjitë e internetit. Zakonisht, për zbatimin e tyre, qoftë të jashtëm redaktues grafik për krijimin imazhe të shumta për vlera të shumta grafiku me byrek ose korniza JavaScript për krijimin e diagrameve më komplekse.
Edhe pse tani detyra nuk duket aq e pamundur sa ishte më parë, ende nuk ka një zgjidhje të thjeshtë të qartë. Sidoqoftë, ka shumë më të mira sot (krahasuar me metodat e mësipërme), më shumë mënyra të mbështetura për të zbatuar grafikët byrek.
Një zgjidhje e bazuar në transformim
Kjo zgjidhje është më e mira për sa i përket markup-it: i duhet vetëm një element, dhe pjesa tjetër do të bëhet me pseudo-elemente, transformime dhe gradientë CSS. Le të fillojmë me një element të thjeshtë:
Tani, le të supozojmë se ne duam një grafik byrek që shfaq të koduar 20% ... Ne do të punojmë për ta bërë atë fleksibël më vonë. Së pari, ne do ta stilojmë elementin si një rreth, i cili do të jetë sfondi ynë (Figura 1):
Figura 1 - Pika jonë e fillimit (grafiku me byrek që shfaq 0%) .byrek (gjerësia: 100 px; lartësia: 100 px; rreze kufiri: 50%; sfondi: jeshile e verdhë;)
Grafiku ynë i byrekut do të jetë i gjelbër (më konkretisht jeshil i verdhë) me një sektor kafe (# 655) që tregon përqindjen. Mund të tundohemi të përdorim transformime të zhdrejta për përqindjen, por siç tregon një eksperiment i vogël, kjo do të ishte një zgjidhje mjaft e ngathët. Në vend të kësaj, ne do të ngjyrosim anët e majta dhe të djathta të rrethit tonë dy ngjyra dhe përdorni rrotullimi i pseudoelementit për të zbuluar vetëm pjesën e rrethit që na nevojitet.
Për të ngjyrosur anën e djathtë të rrethit tonë kafe, ne do të përdorim një të thjeshtë gradient linear:
Sfondi-imazh: gradient linear (djathtas, transparent 50%, # 655 0); Figura 2 - Ngjyrosja e anës së djathtë të rrethit tonë kafe me një gradient të thjeshtë linear
Siç mund ta shihni në figurën 2, kjo është gjithçka që na duhej. Tani mund të fillojmë të stilojmë pseudoelementin që do të veprojë si maskë:
Byrek :: para (përmbajtja: ""; shfaqja: bllok; margjina majtas: 50%; lartësia: 100%;) Figura 3 - Pseudoelementi që vepron si maskë është theksuar këtu me një kufi të ndërprerë
Në figurën 3, mund të shihni se si në ky moment pseudoelementi ynë ndodhet në lidhje me elementin e grafikut byrek. Tani ajo nuk është ende e stilizuar dhe nuk kryen asnjë funksion. Është thjesht një drejtkëndësh i padukshëm. Para se të fillojmë ta stilojmë, le të bëjmë disa komente:
- siç duam ne fshehni pjesën kafe të rrethit tonë, atëherë duhet të aplikojmë për pseudoelementin sfond jeshil duke përdorur ngjyrën e sfondit: trashëgoni për të shmangur dyfishimin kur i caktoni të njëjtën ngjyrë të sfondit si elementi prind;
- ne e duam atë rrotullohej rreth qendrës së rrethit e cila është në mes të anës së majtë të pseudoelementit, kështu që duhet të vendosim origjinën e transformimit në 0 50% ose thjesht majtas;
- ne nuk duam që ai të jetë një drejtkëndësh pasi do të vërshojë skajet e byrekut, kështu që ose duhet të aplikojmë tejmbushje: të fshehura në .byrek ose t'i japim një rreze kufi për ta bërë atë gjysmërreth.
Duke i bashkuar të gjitha, marrim stilin e mëposhtëm për pseudo-elementin tonë;
Byrek :: përpara (përmbajtja: ""; ekrani: bllok; margjina majtas: 50%; lartësia: 100%; rreze-kufi: 0 100% 100% 0/50%; ngjyra e sfondit: trashëgim; origjina e transformimit: majtas;) Figura 4 - Pseudoelementi ynë (i paraqitur me një kufi të ndërprerë) pas përfundimit të stilimit
Shënim: Mos përdorni sfond: trashëgoni; në vend të ngjyrës së pasme: trashëgoni;, pasi kjo do të trashëgojë gradientin!
Grafiku ynë i byrekut tani duket si Figura 4. Këtu fillon argëtimi! Mund të fillojmë rrotullo pseudo element duke aplikuar transformimin e rrotullimit (). Për 20% ne jemi duke u përpjekur për të zbatuar, ne mund të përdorim 72deg (0.2 × 360 = 72), ose 2turn që është më e lexueshme. Në figurën 5, mund të shihni se si duket kjo edhe për disa vlera të tjera.
Figura 5 - Grafiku ynë i thjeshtë i byrekut që tregon përqindje të ndryshme, nga e majta në të djathtë: 10% (36 gradë ose 1 kthesë), 20% (72 gradë ose 2 kthesë), 40% (144 gradë ose 4 kthesë)
Ju mund të mendoni se puna ka përfunduar, por, për fat të keq, jo gjithçka është kaq e thjeshtë. Grafiku ynë i byrekut është i shkëlqyeshëm për të shfaqur përqindjet nga 0 në 50%, por nëse përpiqemi të shfaqim një rrotullim 60 për qind (duke përdorur kthesën 6), marrim atë që tregohet në Figurën 6. Por mos e humbni shpresën, ne mund ta rregullojmë këtë dhe le ta bëjmë!
Figura 6 - Grafiku ynë byrek zbërthehet për aksionet më shumë se 50%(treguar këtu për 60%)
Nëse e konsiderojmë shfaqjen e aksioneve 50% -100% si një problem më vete, atëherë mund të shihni se për to mund të përdorim një version i përmbysur i zgjidhjes së mëparshme: pseudoelement ngjyrë kafe që rrotullohet nga 0 në 5 rrotullime përkatësisht. Pra, për një pjesë prej 60%, kodi i pseudo-elementit do të duket si ky:
Byrek :: përpara (përmbajtja: ""; ekrani: bllok; margjina majtas: 50%; lartësia: 100%; rreze-kufi: 0 100% 100% 0/50%; sfond: # 655; origjina e transformimit: majtas ; transform: rrotullo (.1 kthesë);) Figura 7 - Grafiku ynë i saktë tani me byrek me një vlerë prej 60%
Në figurën 7, mund të shihni kodin në veprim. Që tani ne kemi zhvilluar një mënyrë për të shfaqur çdo përqindje, ne mundemi dhe gjallëroj grafik me byrek nga 0% në 100% me duke përdorur CSS animacionet duke krijuar një lloj treguesi progresi:
@keyframes rrotullohet (në (transformoj: rrotullo (.5 rrotullim);)) @keyframes bg (50% (sfondi: # 655;)) .byrek :: përpara (përmbajtja: ""; shfaqja: bllok; margjina majtas: 50 %; lartësia: 100%; rreze-kufi: 0 100% 100% 0/50%; ngjyra e sfondit: trashëgim; origjina e transformimit: majtas; animacion: rrotullim 3s linear infinite, bg 6s hap-fund i pafund;)
Është në rregull, por si t'i stilojmë grafikët e shumëfishtë statike të byrekut me përqindje të ndryshme, që është më së shumti rast i përgjithshëm duke përdorur grafikët? Në mënyrë ideale, ne duam të jemi në gjendje të printojmë diçka si kjo:
Dhe merrni dy tabela byrek, njëra që tregon 20% dhe tjetra tregon 60%. Së pari, ne do të shikojmë se si mund ta bëjmë këtë duke përdorur stilet inline dhe më pas mund të shkruajmë gjithmonë një skenar të shkurtër për ta analizuar përmbajtjen e tekstit dhe shtoni stilet inline të specifikuara për elegancën e kodit, kapsulimin, mirëmbajtjen dhe ndoshta më e rëndësishmja, aksesueshmërinë.
Pjesa e ndërlikuar në lidhje me kontrollin e përqindjes së një grafiku byrek me stile inline është se CSS që është përgjegjëse për vendosjen e përqindjes është vendosur në një element pseudo. Siç e dini tashmë, ne nuk mund të vendosim stile inline në pseudo-elemente, Kjo është arsyeja pse do të duhet të jemi më shpikës.
shënim: Per perdorim vlerat nga spektri i ngjyrave pa përsëritje dhe llogaritjet komplekse ju mund të përdorni metodën e mëposhtme. Këtë metodë mund ta përdorni edhe në raste të tjera. Më poshtë është një shembull i thjeshtë, i izoluar i përdorimit të kësaj teknike.
Zgjidhja vjen nga një nga vendet më të papritura. Ne do të përdorim animacionin që është shfaqur tashmë, por që do të ndërpritet. Në vend që ta ekzekutojmë si një animacion normal, do të përdorim vonesat negative të animacionit vendosni një pozicion në çdo pikë të animacionit dhe rri aty. Jeni i befasuar? Po, vlerat negative të vonesës së animacionit jo vetëm që lejohen në specifikim, por janë shumë të dobishme në raste të tilla.
Meqenëse animacioni ynë është në pauzë, do të shfaqet vetëm korniza e tij e parë (përcaktuar nga tonë vlerë negative animacion-vonesa). Përqindja e treguar në grafikun e byrekëve do të jetë e barabartë me përqindjen e vonesës së animacionit tonë në kohëzgjatjen totale. Për shembull, me një kohëzgjatje aktuale prej 6 sekondash, na duhet një vonesë e animacionit prej -1,2 sekonda për të treguar një fraksion prej 20%. Për të thjeshtuar llogaritjet, do ta vendosim kohëzgjatjen në 100 sekonda. Mbani në mend se meqenëse animacioni është ndërprerë përgjithmonë, vlera që kemi vendosur për kohëzgjatjen e tij nuk luan ndonjë rol tjetër.
Dhe pyetja e fundit: animacioni aplikohet në pseudo-elementin, por ne duam të vendosim stilin inline në elementin .pie... Megjithatë, edhe pse në
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 (te (transformoj: rrotullo (.5 rrotullim);)) @keyframes bg (50% (sfondi: # 655;)) .byrek :: përpara (/ * [stilet e tjera nuk kanë ndryshuar] * / animacion: rrotullim Pafundësi lineare e viteve 50, bg 100 hap-fund pafund; animacion-play-state: në pauzë; animacion-vonesë: trashëgoj;)
Tani për tani, ne mund ta konvertojmë shënimin për të përdorur përqindjet si përmbajtje, siç e kishim synuar fillimisht, dhe të shtojmë stilet e vonesës së animacionit përmes një skripti të thjeshtë:
$$ (". byrek"). forÇdo (funksion (byrek) (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 nëpërmjet ngjyrës: transparente në mënyrë që të qëndrojë të përzgjedhshëm dhe të printueshëm... Për shkëlqim shtesë, ne 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ë vlerën e llogaritur të lartësisë, që është mirë) ;
- caktoni madhësinë dhe pozicionin e pseudo elementit me pozicionim absolut në mënyrë që ai 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: relativ; gjerësia: 100 px; lartësia e vijës: 100 px; rrezja e kufirit: 50%; sfondi: jeshile e verdhë; sfondi-imazhi: gradient linear (djathtas, transparent 50%, # 655 0); ngjyra: transparente ; text-align: qendër;) @keyframes rrotullohet (në (transformoj: rrotullo (.5 rrotullim);)) @keyframes bg (50% (sfondi: # 655;)) .byrek :: përpara (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ëgo;)
Zgjidhje e bazuar në SVG
SVG merr vendimin e shumë njerëzve detyrat grafike grafikët më të thjeshtë dhe me byrek nuk bëjnë përjashtim. Megjithatë, në vend që të krijojmë një grafik byrek duke përdorur shtigje, të cilat do të kërkonin matematikë të komplikuar, 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 Elementë SVG që mund të jenë 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 në 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 të lidhura me goditjet që ju lejojnë të rregulloni mirë pamjen e tyre. Njëri prej tyre është stroke-dasharray, i cili është për krijimin e goditjeve me ndërprerje. Për shembull, ne mund ta përdorim atë për ta bërë këtë:
Stroke-dasharray: 20 10; Figura 10 - Goditje e thjeshtë me ndërprerje e krijuar me stroke-dasharray
Kjo do të thotë se ne duam një vizë 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ë habiteni që ky shembull SVG ka diçka të bëjë me grafikët e byrekëve. Por gjërat bëhen më të qarta kur aplikojmë një goditje me vizë 0 dhe boshllëqe më të gjata se ose të barabarta me perimetrin e 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; 95 189; 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 aq shumë nga perimetri i rrethit sa specifikojmë.
Ju mund ta keni kuptuar tashmë se në cilin drejtim po shkojmë: nëse e zvogëlojmë rrezen e rrethit tonë mjaftueshëm në mënyrë që të errësojë plotësisht goditjen 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 zbatohet në një rreth me një rreze prej 25 dhe një gjerësi goditjeje 50:
Figura 12 - Imazhi ynë SVG fillon të ngjajë me 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 kthimi i këtij imazhi në një grafik byrek si ai që krijuam në zgjidhjen e mëparshme është shumë e lehtë: thjesht duhet të shtoni një rreth më i madh jeshil për goditjen dhe rrotullojeni atë 90 ° në të kundërt të akrepave të orës në mënyrë që të fillojë në krye në mes. Për aq sa
Svg (transformimi: rrotullo (-90 gradë); sfondi: jeshil i verdhë; rreze kufiri: 50%;) Figura 13 - Grafiku i byrekut përfundimtar me SVG
Rezultatin përfundimtar mund ta shihni në figurën 13. Kjo metodë bën një tjetër animacion më i lehtë grafiku 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 (në (stroke-dasharray: 158 158;)) rrethi (mbushje: yellowgreen; goditje: # 655; stroke-width: 50; stroke-dasharray: 0 158; animacion: fillup 5s linear infinite;)
Si një përmirësim shtesë, ne mund të vendosim një rreze të caktuar të rrethit në mënyrë që perimetri i tij të jetë (pafundësisht afër) 100, kështu që ne 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 në 16. Gjithashtu vendosim dimensionet e SVG në atributin viewBox, në vend të atributet e gjerësisë dhe lartësia për ta bërë atë të ridimensionueshme në madhësinë e kontejnerit të saj.
Me këto modifikime, shënimi për grafikun e byrekëve të paraqitur në Figurën 13 bëhet:
Dhe CSS do të jetë si kjo:
Svg (gjerësia: 100 pikselë; lartësia: 100 pikselë; transformimi: rrotullo (-90 gradë); sfondi: jeshile e verdhë; rreze-kufi: 50%;) rrethi (mbushja: jeshile e verdhë; goditje: # 655; gjerësia e goditjes: 32; goditje-shije : 38 100; / * për 38% * /)
Shënim, sa e lehtë është tani të ndryshosh përqindjen... Edhe me këtë thjeshtim të tepërt, megjithatë, ne nuk duam të përsërisim gjithë këtë shënim SVG për çdo grafik byrek. Është koha që JavaScript të na ndihmojë me pak automatizim. Ne do të shkruajmë një skenar të vogël për të marrë një të thjeshtë Shënimi HTML si kjo...
Dhe shtoni SVG inline brenda çdo elementi .pie me të gjitha elementet thelbësore dhe atributet. Ai gjithashtu do të shtojë elementin
Faqja ime përmban një fletë stilesh të ngjashme styles.css për personalen time Stilet CSS... Ju gjithashtu duhet të bëni një kopje të bibliotekës jQuery. Kërkohet 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ë Funksionet jQuery por nëse doni kontroll më të mirë mbi secilin element, atëherë është më e lehtë të punoni në HTML.
Photoshop
Ilustruesi
Pas Efektet
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 një efekt animacioni. Unë jap më poshtë Përshkrim i shkurtër opsionet 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 fontit 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 plan të parë rrethi;
- data-bgcolor - ngjyra e sfondit të rrethit;
- data-fill - mbushja e brendshme e ngjyrës së sfondit të rrethit të brendshëm.
Paraqitja e faqes CSS
Unë nuk insistoj që ju të redaktoni drejtpërdrejt jquery.circliful.css nëse nuk dëshironi të personalizoni shtojcën, sigurisht. Shumica e ngjyrave mund të ndryshohen drejtpërdrejt nga atributet e të dhënave HTML5, dhe nëse vërtet dëshironi të rishkruani ndonjë nga stilet Rrethore, Unë do t'ju rekomandoja ta bëni këtë në fletën tuaj të stilit.
Pasi ju thashë këtë, unë krijova fletën time të stilit të këtij projekti në vend të rishkrimit të stileve Rrethore... Vetë faqja e internetit ka nevojë për një strukturë të paracaktuar që është vërtet e lehtë për t'u dizajnuar. Zona e përmbajtjes përqendrohet në një seksion të vogël për një grafik byrek. Çdo zonë lëviz lirshëm brenda kontejnerit të linjës brenda origjinalit #statistika div.
/ ** struktura e faqes ** / .wrap (ekrani: bllok; margjina: 0 automatik; gjerësia maksimale: 800 px;) #intro (ekrani: 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 (ekrani: bllok; gjerësia: 100%; mbushja: 15 px 0; sfond: # f8f8f8; kufiri-lart: 4px solid # c3c3c3; kufiri-fund: 4px solid # c3c3c3;) #stats .row (ekrani: bllok;) .circle-container (ekrani: 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; hija e tekstit: 1px 1px 0 #fff;)
Brenda çdo seksioni, përmbajtja mbahet brenda .mbështjell div për fiksim në qendër. Gjithashtu, elementët që lëvizin lirshëm të rrethit kanë nevojë për një enë shtesë. .sqaroj për të mbajtur gjithçka në përputhje të saktë.
/ ** sqarim ** / .clearfix: pas (përmbajtja: "."; shfaqja: bllok; qartë: të dyja; dukshmëria: e fshehur; lartësia e rreshtit: 0; lartësia: 0;) ) html .clearfix (ekrani: bllok;) * html .clearfix (lartësia: 1%;)
Kjo klasë qartësojështë i njohur prej vitesh si një zgjidhje kontejneri me lëvizje të lirë. Zakonisht ato hiqen nga teksti i dokumentit dhe nuk ruajnë gjerësinë / lartësinë e tyre origjinale. Por kjo e mban konstante gjerësinë e kontejnerit #statistika dhe lë vend për më shumë përmbajtje që do të gjendet më poshtë në faqe.
Prekjet e fundit
Pra, brumin e gatuajmë, mbushim tavën e byrekut, e fusim në furrë dhe jemi pothuajse gati për të provuar. Nëse gjithçka duket mjaft mirë, cili është hapi përfundimtar? Ne kemi nevojë për një kod jQuery për të dekoruar këtë projekt.
Hapni një etiketë të re skripti në fund të kësaj faqet HTML... Ai do të përmbajë një pjesë të vogël të JavaScript. Meqenëse kam përdorur të gjitha atributet e të dhënave HTML5, nuk kemi nevojë të thërrasim asnjë opsion jQuery. Skripti thjesht duhet të ekzekutojë funksionin Rrethore në çdo rreth divs. Përdorimi i një emri të dyfishtë të klasës si p.sh .circlestat e bën procesin shumë të lehtë.
$ (funksioni () ($ (". circlestat"). circliful ();));
Për ata që nuk janë të njohur me strukturën e sintaksës 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 ekzekuton funksionin rrethore ()... Kjo drejton shtojcën Rrethore, i cili krijon efekte animacioni, në veprim dhe aplikon përmbajtje / ngjyra shtesë.
Nuk mund të them që këto qarqe do të jenë gjithmonë zgjidhja më e mirë... Unë kam parë shumë portofol që bazoheshin në fjalë dhe numra, por nuk funksiononin në vetvete. Merrni parasysh përdorimin e këtyre rrathëve në raste të rralla dhe provoni t'i huazoni ato për qëllime të tjera përveç aftësive të thjeshta. Statistikat tuaja nuk duhet të maten si përqindje - ato mund të tregojnë sa vite keni qenë në biznes, numrin total të projekteve që keni ose numra të tjerë të ngjashëm. Mund të shkarkoni falas një kopje të tutorialit tim dhe të eksperimentoni me kodin për ta bërë atë më të mirë për projektet tuaja.
Për një zhvillues front-end, ekziston sasi e madhe mënyrat në të cilat mund të ndërtoni një grafik byrek - një shumëllojshmëri bibliotekash, shtojcash, veçori të mahnitshme Grafika SVG etj. Megjithatë, ndoshta ia vlen të merret në konsideratë mënyra më e thjeshtë për të krijuar një grafik "byrek", i cili mund të jetë i dobishëm kur detyra është vendosur sa më thjeshtë që të jetë e mundur dhe nuk ka nevojë apo mundësi për t'u përdorur. mjete shtesë... Më poshtë do të flasim për një shembull të një zbatimi të tillë.
Supozoni se keni një grup të dhënash të papërpunuara që dëshironi të përfaqësoni në një grafik byrek:
Var grup i të dhënave = [(vlera: 5, ngjyra: "# dc3912"), (vlera: 40, ngjyra: "# ff9900"), (vlera: 30, ngjyra: "# 109618"), (vlera: 25, ngjyra: "# 990099")];
vlera është vlera e përqindjes, ngjyra është ngjyra e sektorit.
Së pari, le të krijojmë një enë që do të bëhet rrethi i diagramit dhe do të përmbajë elementët e sektorëve:
Le ta stilojmë edhe atë:
Kontejneri (gjerësia: 300 px; lartësia: 300 px; tejmbushja: e fshehur; rrezja e kufirit: 50%; pozicioni: relative;)
Si rezultat, marrim një rreth të tillë. Çdo gjë që shkon përtej kufijve të saj (treguar me një vijë me pika) do të fshihet.
Më tej, natyrshëm lind pyetja - si do ta transformojmë drejtkëndëshin elementet div në sektorët e rrethit dhe si vendosim këndin e dëshiruar për to? Në fakt, për qëllimin e parë, tejmbushja: prona e fshehur u vendos për kontejnerin, pasi kjo na lejon të fshehim një pjesë të elementit, duke e bërë kështu të rrumbullakosur, dhe për të dytën, do të ndihmohemi nga transformimet CSS. Më poshtë është një shembull për një sektor.
Shtoni një div me klasën e sektorit brenda kontejnerit.
CSS:
Sektori (gjerësia: 50%; lartësia: 50%; pozicioni: absolut; majtas: 50%; sipër: 0; origjina e transformimit: fundi i majtë; sfond: # 000; )
Kështu, kemi marrë një sektor me vlerë 90 gradë, duke filluar nga rreth 0 gradë.
Për të vendosur këndin e dëshiruar për këtë sektor, ne do të aplikojmë transformimin SwY CSS. Ky transformim zhvendos skajin e djathtë të katrorit përgjatë boshtit y në mënyrë që skajet horizontale të formohen këndi i dhënë me pozicionin e tij origjinal:
Vlera e vlerës në elementin e parë të grupit të të dhënave është 5, duke u kthyer në gradë, marrim 18. Në mënyrë që prirja të ndodhë në drejtimin e dëshiruar, ne do t'i shtojmë 90 gradë në të gjitha këndet.
Kështu, këndi i transformimit = 90 + 18 = 108.
transformimi: i zhdrejtë (108 gradë);
Për të rrotulluar me një kënd të caktuar, ne do të përdorim transformimin e rrotullimit. Është e rëndësishme që fillimisht të aplikohet transformimi i rrotullimit, vetëm atëherë të zbatohet transformimi i animit.
Transformimi: rrotullimi (45 gradë) i zhdrejtë (108 gradë);
Kjo metodë ka një pengesë - siç mund ta shihni në figurën që ilustron vlerat e transformimit të skewY, kështu që ju mund të përshkruani saktë sektorët me një vlerë jo më shumë se 90 gradë. Prandaj, për të shfaqur vlera më të mëdha se 90, do t'ju duhet të vizatoni disa sektorë me të njëjtën ngjyrë. Për shembull, nëse vlera e këndit është 100 gradë, ne do të shfaqim 2 sektorë: 90 gradë dhe 10. Nëse vlera është 200 gradë, marrim 3 sektorë - 90, 90 dhe 20 gradë, e kështu me radhë.
Si rezultat, marrim kodin e mëposhtëm për shtimin dinamik të sektorëve:
Var maxVlera = 25; var kontejner = $ (". enë"); var addSector = funksion (të dhëna, startAngle, kolaps) (var sektorDeg = 3.6 * data.value; var skewDeg = 90 + sektorDeg; var rotateDeg = startAngle; if (collapse) (skewDeg ++;) var sektor = $ ("
", (" class ":" sektori ")). css ((" background ": data.color," transform ":" rotate ("+ rotateDeg +" deg) skewY ("+ skewDeg +" deg) ")) ; container.append (sektor); kthimi startAngle + sektorDeg;); database.reduce (funksion (prev, curr) (kthim (funksion addPart (të dhëna, kënd) (if (data.value<= maxValue) {
return addSector(data, angle, false);
}
return addPart({
value: data.value - maxValue,
color: data.color
}, addSector({
value: maxValue,
color: data.color,
}, angle, true));
})(curr, prev);
}, 0);
Rezultati:
Mund ta ktheni lehtësisht një tabelë të tillë "byrek" në një "donut" duke shtuar stile për pseudo-elementin në enë:
Kontejneri: pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 50%; lartësia: 50%; sfondi: #fff; rreze-kufi: 50%; sipër: 25%; majtas: 25%;)
Vini re se në këtë kapitull ne do ta shkarkojmë kodin drejtpërdrejt nga hard disku lokal, jo përmes serverit në internet. Mund t'ju duhet të çaktivizoni sigurinë në Chrome gjatë zhvillimit. Nëse keni probleme me ngarkimin e imazheve ose skedarëve të tjerë drejtpërdrejt nga disku në Chrome, provoni të shtoni disa shenja sigurie në vijën e komandës.
Në Mac OS X do të ishte kështu:
/ Aplikacionet / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --allow-file-access-from-files --disable-web-security
Shfletuesi Chromium --disable-web-security
Chrome.exe --disable-web-security
Përndryshe, ju mund të ngarkoni faqe përmes serverit tuaj lokal të internetit.
Në këtë kapitull, ne do të shfaqim disa të dhëna duke vizatuar një histogram. Kjo do t'ju tregojë bazat e vizatimit të linjave, formave dhe tekstit, më pas do të bëjmë një grafik byrek me një gradient.
Krijo një faqe të re
Filloni duke krijuar një skedar të ri teksti të quajtur barchart.html dhe shkruani:
Faqja e mësipërme përmban elementet