Diagramă circulară html. Diagrame svg cu plăcintă și gogoși în HTML5 de la zero

Și codul CSS pentru această animație devine următorul (regulile pentru .pie nu sunt afișate, deoarece rămân aceleași):

@keyframes rotesc (la (transforma: rotiți (.5turn);)) @keyframes bg (50% (fond: # 655;)) .pie :: înainte (/ * [alte stiluri nu s-au schimbat] * / animație: rotire 50s liniar infinit, bg 100s step-end infinit; animație-play-stare: întrerupt; animație-întârziere: moștenire;)

Deocamdată, putem converti marcajul pentru a folosi procente ca conținut, așa cum ne-am propus inițial, și putem adăuga stiluri de întârziere de animație prin intermediul unui script simplu:

$$ ("". plăcintă"). forEach (funcție (plăcintă) (var p = parseFloat (pie.textContent); pie.style.animationDelay = "-" + p + "s";));

Vă rugăm să rețineți că am lăsat textul intact deoarece avem nevoie de el pentru accesibilitate și utilizare. Diagramele noastre circulare arată acum ca Figura 8. Trebuie să ascundem textul care poate fi disponibil prin culoare: transparent, astfel încât să rămână selectabil și imprimabil... Pentru un plus de luciu, putem plasați valorile procentuale în centrul diagramei circulare ca să nu fie în loc aleatoriu atunci când utilizatorul încearcă să le evidențieze. Pentru a face acest lucru, avem nevoie de:

Figura 8 - Textul nostru înainte de a-l ascunde

• convertiți valoarea înălțimii diagramei în înălțimea liniei (sau adăugați o valoare a înălțimii liniei egală cu înălțimea, dar aceasta ar fi o duplicare inutilă a codului, deoarece înălțimea liniei va fi setată la valoarea înălțimii calculate, ceea ce este bun) ;
• setați dimensiunea și poziția pseudo-elementului cu poziționare absolută ca să nu împingă textul în jos;
• adăugați text-align: center; pentru a centra textul pe orizontală.

Codul final arată astfel:

Placintă (poziție: relativă; lățime: 100px; înălțimea liniei: 100px; raza chenarului: 50%; fundal: galbenverde; imaginea de fundal: gradient liniar (la dreapta, transparent 50%, # 655 0); culoare: transparent ; text-align: center;) @keyframes rotesc (la (transforma: rotiți (.5turn);)) @keyframes bg (50% (fundal: # 655;)) .pie :: înainte (conținut: ""; poziție : absolut; sus: 0; stânga: 50%; lățime: 50%; înălțime: 100%; raza marginii: 0 100% 100% 0/50%; culoarea fundalului: moștenire; originea transformării: stânga; animație: rotire 50s liniar infinit, bg 100s step-end infinit; animație-stare de redare: întreruptă; animație-întârziere: moștenire;)

Soluție bazată pe SVG

SVG ia decizia multora sarcini de grafică mai simple și diagramele circulare nu fac excepție. Cu toate acestea, în loc să creăm o diagramă circulară folosind căi, care ar necesita matematică complicată, vom folosi un mic truc.

Să începem cu un cerc:

Acum să-i aplicăm câteva stiluri de bază:

Cerc (umplere: galbenverde; contur: # 655; lățime trază: 30;)

Notă: După cum știți, acestea Proprietățile CSS sunt disponibile și ca atribute Elemente SVG care ar putea fi utile dacă portarea ar fi o problemă.

Figura 9 - Punctul nostru de plecare: un cerc SVG verde cu o contur groasă # 655

Puteți vedea cercul nostru conturat în Figura 9. Cursurile în SVG sunt alcătuite din mai mult decât proprietățile cursei și lățimii cursei. Există multe alte proprietăți mai puțin populare legate de accident vascular cerebral care vă permit să le reglați fin aspectul. Unul dintre ele este stroke-dasharray, care este pentru a crea linii întrerupte. De exemplu, l-am putea folosi pentru a face acest lucru:

Stroke-dasharray: 20 10; Figura 10 - Contur simplu punctat creat cu stroke-dasharray

Aceasta înseamnă că dorim o liniuță de lungime 20 cu spații de lungime 10, precum cele prezentate în Figura 10. În acest moment, s-ar putea să fii surprins că acest exemplu SVG are ceva de-a face cu diagramele circulare. Dar lucrurile devin mai clare atunci când aplicăm o contur cu o liniuță de 0 și spații mai lungi decât sau lungime egală circumferința cercului nostru (C = 2πr, sau în cazul nostru C = 2π × 30 ≈ 189):

Stroke-dasharray: 0 189; Figura 11 - Mai multe valori stroke-dasharray și rezultatul acestora; de la stânga la dreapta: 0 189; 40 189; 95 189; 150 189

După cum puteți vedea, în primul cerc din Figura 11, aceasta elimină complet cursa și rămânem doar cu cercul verde. Cu toate acestea, distracția începe atunci când începem să creștem prima valoare (Figura 11): din cauza unui decalaj atât de lung, nu vom mai obține cursă punctată, ci un accident vascular cerebral care acoperă atât de mult din circumferința cercului cât am specificat.

Poate ți-ai dat seama deja în ce direcție ne mișcăm: dacă reducem suficient de mult raza cercului nostru, astfel încât să-și ascundă complet cursa, vom ajunge la ceva foarte asemănător cu o diagramă circulară. De exemplu, în Figura 12, puteți vedea cum ar arăta acest lucru atunci când este aplicat unui cerc cu o rază de 25 și o lățime a cursei de 50:

Figura 12 - Imaginea noastră SVG începe să semene cu o diagramă circulară

Rețineți: liniile SVG sunt întotdeauna jumătate în interiorul și jumătate în afara elementului la care sunt aplicate. În viitor, vom putea controla acest comportament.

cerc (umplere: galbenverde; stroke: # 655; lățimea stroke: 50; stroke-dasharray: 60 158; / * 2π × 25 ≈ 158 * /)

Acum, transformarea acestei imagini într-o diagramă circulară precum cea creată în soluția anterioară este destul de ușoară: trebuie doar să adăugați un cerc verde mai mare pentru accident vascular cerebralși rotiți-l cu 90 ° în sens invers acelor de ceasornic astfel încât să înceapă de sus la mijloc. În măsura în care

Svg (transformare: rotire (-90deg); fundal: galbenverde; chenar-rază: 50%;) Figura 13 - Diagramă circulară finală cu SVG

Puteți vedea rezultatul final în Figura 13. Această metodă face și mai ușoară animarea diagramei circulare de la 0% la 100%. Trebuie doar să creăm o animație CSS care schimbă stroke-dasharray de la 0 158 la 158 158:

@keyframes umplere (la (stroke-dasharray: 158 158;)) cerc (umplere: galbenverde; accident vascular cerebral: # 655; stroke-width: 50; stroke-dasharray: 0 158; animație: umplere 5s liniar infinit;)

Ca o rafinare suplimentară, putem seta o anumită rază a cercului astfel încât circumferința acestuia să fie (infinit aproape de) 100, astfel încât să putem specificați lungimile stroke-dasharray ca procente, fara calcule. Deoarece circumferința este 2πr, avem nevoie de o rază de 100 ÷ 2π ≈ 15,915494309, care pentru nevoile noastre poate fi rotunjită la 16. De asemenea, setăm dimensiunile SVG în atributul viewBox, în loc de atribute de lățimeși înălțimea pentru a-l face redimensionabil la dimensiunea containerului său.

Cu aceste modificări, marcajul pentru diagrama circulară prezentată în Figura 13 devine:

Și CSS-ul va fi așa:

Svg (lățime: 100 px; înălțime: 100 px; transformare: rotire (-90 grade); fundal: galbenverde; chenar-rază: 50%;) cerc (umplere: galbenverde; contur: # 655; lățime stroke: 32; stroke-dasharray : 38 100; / * pentru 38% * /)

Notă, cât de ușor este acum să schimbi procentul... Chiar și cu această simplificare excesivă, totuși, nu dorim să repetăm ​​toate aceste markupuri SVG pentru fiecare diagramă circular. Este timpul ca JavaScript să ne ajute cu puțină automatizare. Vom scrie un mic script pentru a lua un marcaj HTML simplu ca acesta...

Și adăugați SVG inline în interiorul fiecărui element .pie cu toate elemente esentiale si atribute. De asemenea, va adăuga elementul

Pagina mea conține o foaie de stil styles.css similară pentru stilurile mele personale CSS. De asemenea, trebuie să faceți o copie a bibliotecii jQuery. Este necesar pentru ca pluginul să funcționeze corect.
În sine, pagina este destul de ușor de structurat. Elementele cerc sunt conținute în etichete div care folosesc atribute HTML5 pentru a manipula datele. Alternativ, acestea pot fi stocate într-o funcție jQuery, dar dacă doriți un control mai bun asupra fiecărui element, atunci este mai ușor să lucrați în HTML.

 

 

 

 
Photoshop
 

 
 

 
Ilustrator
 

 
 

 
Dupa efecte
 

 
 

Aceasta este o copie a primului rând de cercuri, constând din 3 unități animate. Toate aceste atribute de date sunt explicate în continuare în documentația pluginului. Fiecare reprezintă o opțiune care definește un efect de animație. Mai jos este o scurtă descriere a opțiunilor pe care le folosesc:

• data-dimension - dimensiunea totală a lățimii/înălțimii cercului;
• data-text - textul care apare în centrul fiecărui cerc;
• data-width - grosimea arcului de date rotativ;
• data-fontsize - dimensiunea fontului textului central;
• date-percent - un număr de la 0 la 100 reprezentând procentele din cercul tău;
• data-fgcolor - culoarea primului plan a cercului;
• data-bgcolor - culoarea de fundal a cercului;
• data-fill - umplerea interioară a culorii de fundal a cercului interior.

Aspectul paginii CSS

/ ** structura paginii ** / .wrap (afișare: bloc; margine: 0 automat; lățime maximă: 800px;) #intro (afișare: bloc; margine-jos: 25px; text-align: center;) #intro p (dimensiune font: 1,8 em; înălțime linie: 1,35 em; culoare: # 616161; stil font: cursiv; margine-jos: 25px;) #stats (afișare: bloc; lățime: 100%; umplutură: 15px 0; fundal: # f8f8f8; chenar-sus: 4px solid # c3c3c3; chenar-jos: 4px solid # c3c3c3;) #stats .row (afișare: bloc;) .circle-container (afișare: bloc; float: stânga; margine-dreapta) : 55px; margin-bottom: 45px;) .circle-container h3 (afișare: bloc; text-align: center; font-size: 2.25em; line-height: 1.4em; culoare: # 363636; text-shadow: 1px 1px 0 #fff;)

În cadrul fiecărei secțiuni, conținutul este păstrat .wrap div pentru fixare în centru. De asemenea, elementele cercului care se mișcă liber au nevoie de un container suplimentar. .clearfix pentru a menține totul corect aliniat.

/ ** clearfix ** / .clearfix: după (conținut: "."; afișare: bloc; clar: ambele; vizibilitate: ascuns; line-height: 0; înălțime: 0;) .clearfix (display: inline-block; ) html .clearfix (afișare: bloc;) * html .clearfix (înălțime: 1%;)

Această clasă clearfix este cunoscută de ani de zile ca o soluție de containere cu mișcare liberă. De obicei, acestea sunt eliminate din textul documentului și nu își păstrează lățimea/înălțimea inițială. Dar aceasta menține constantă lățimea containerului #statisticiși lasă loc pentru mai mult conținut pentru a merge în jos pe pagină.

Retușuri finale

$ (funcție () ($ ("". circlestat"). circliful ();));

Pentru cei care nu sunt familiarizați cu structura de sintaxă jQuery, voi oferi o scurtă descriere. După ce documentul este încărcat, rulăm o nouă funcție. Scopul nostru interior este fiecare element care folosește clasa .circlestatși rulează funcția circular ()... Aceasta conduce pluginul Circliful, care creează efecte de animație, în acțiune și aplică conținut / culori suplimentare.

Nu pot spune că aceste cercuri vor fi întotdeauna cea mai bună soluție. Am văzut o mulțime de portofolii care se bazau pe cuvinte și numere, dar nu funcționează în sine. Luați în considerare utilizarea acestor cercuri în rare ocazii și încercați să le împrumutați în alte scopuri decât abilitățile simple. Statisticile tale nu trebuie să fie măsurate ca procent - ele pot arăta câți ani ai fost în afaceri, numărul total de proiecte pe care le ai sau alte cifre similare. Puteți descărca gratuit o copie a tutorialului meu și puteți experimenta cu codul pentru a-l îmbunătăți pentru proiectele dvs.

„Bucătăria” unui dezvoltator web este un pic ca gătitul acasă. Dezvoltatorul are acces la o varietate de biblioteci din cod terminat care îl va ajuta să creeze o aplicație web, în ​​același mod în care un bucătar de acasă poate folosi alimente comode pentru a-și găti felul de mâncare mai eficient. În ambele cazuri, calitatea articolelor pregătite în prealabil ar trebui să fie foarte importantă. Cu toate acestea, uneori calitatea este sacrificată pentru comoditate. Nu mă înțelege greșit, comoditatea nu este întotdeauna un lucru rău. Poate fi util atunci când argumentele pro și contra sunt cunoscute și bine analizate. Analizând opțiunile pentru diagramele plăcinte și gogoși în HTML, putem evidenția doar câteva:

1. Diagramă bazată pe elemente de pânză generată pe client (adică JavaScript)
2. O diagramă bazată pe SVG și generată pe client (adică JavaScript)
3. Server de diagrame bazat pe SVG generat

Biblioteci gata de fabricație folosind Canvas și JavaScript SVG

Bibliotecile JavaScript pentru desenarea diagramelor sunt adesea mai convenabile și încărcate cu o mulțime de opțiuni interesante, cum ar fi interactivitatea. Iată câteva biblioteci:

1. D3.js
2. Chartist.js
3. Diagrame Google

Câteva rânduri de JavaScript și o serie de date vă vor permite să creați o diagramă pe site-ul dvs. în câteva secunde. Nu este surprinzător că mulți aleg această cale.

Deci, de ce să vă deranjați și să le codați singur? Aceasta este o întrebare grozavă pe care mi-am pus-o și eu. Până la urmă, m-am convins de trei lucruri:

1. Cele mai multe biblioteci JavaScript sunt greu de găsit, în special cele bazate pe elementul Canvas (cu excepția Google Charts)
2. Dacă informațiile din diagramă sunt foarte importante (cum era în situația mea), ar trebui să ne bazăm pe un script care rulează pe client pentru a genera informațiile? Eu nu cred acest lucru.
3. Dacă aprofundez codul SVG și îmi murdăresc mâinile, s-ar putea să învăț puțin mai multe despre prostiile magice subiacente. Cu alte cuvinte, procesul de învățare poate fi distractiv și merită efortul.

Situatia mea

Echipa mea avea nevoie de o componentă simplă care să poată fi construită pe server și afișată informatii simple despre utilizarea conturilor. De asemenea, preferința noastră a fost pentru ușurința acestei componente (evitați JavaScript dacă este posibil); nu trebuia să fie prea sofisticat sau interactiv, trebuia doar să afișeze date importante.

Notă suplimentară despre diagramele bazate pe Canvas

Poate ați observat (dacă sunteți familiarizat cu crearea de diagrame pentru web) că nu am inclus Chart.js în lista de biblioteci recomandate de mai sus. Deși îl puteți folosi cu siguranță, merită să rețineți că Chart.js folosește un element Canvas pentru a-și reda diagramele, iar conținutul elementului nu face parte din DOM. Prin urmare, acestea nu sunt disponibile pentru cititorii de ecran. Asta înseamnă că trebuie să accepți măsuri suplimentare pentru a vă asigura că datele dvs. sunt disponibile.

O introducere în diagramele CSS și SVG

Diagramele CSS și SVG sunt în mod inerent mai accesibile și mai semantice decât alte tehnologii. Dar pot fi complexe și poate consuma mai mult timp dacă le codificați manual.

CSS Ninja Lea Verou oferă mai multe opțiuni pentru crearea de diagrame circulare de la zero în articolul ei „Designing Flexible, Maintainable Pie Charts With CSS and SVG”. Metodele ei pot fi aplicate și la diagramele gogoși.

Robin Randle a scris, de asemenea, despre crearea graficelor exclusiv cu CSS, unde și-a subliniat eșecurile în abordare.

Inexplicabil

Am căutat pe Google despre SVG și diagrame de gogoși și am găsit articole de Lea Verou și Robin Randle (menționate mai sus), în plus față de alte câteva. Aproape toți au discutat despre utilizarea atributelor stroke-dasharray și stroke-dashoffset în SVG pentru a poziționa porțiuni dintr-o diagramă. Aceste proprietăți sunt identice cu „stroke” atunci când se creează vectori în programe precum Adobe Illustrator.

Unele dintre aceste articole chiar au discutat despre animația în SVG, ceea ce este grozav, dar nici nu este ceea ce căutam.

După cercetarea mea, am putut să-mi dau seama că folosind din SVG împreună cu stroke și stroke-dasharray mi-ar putea oferi segmentele de plăcintă imbricate de care aveam nevoie. De asemenea, mi-am dat seama că stroke-dashoffset mi-ar permite să „animez”, sau cu alte cuvinte, să poziționez segmentul acolo unde mi-am dorit să fie în cerc.

Cu toate acestea, nu am găsit nicio explicație clară a modului exact în care au funcționat atributele liniuței și a modului în care acestea se raportau la circumferința cercului. Și ceea ce era mai de neatins era atașarea mai multor elemente (unul după altul) în jurul cercului. Mai bine, care este formula pentru obținerea acestor poziții relative folosind dimensiunile unice/dinamice ale segmentelor și atributele de contur ale SVG?

Așa că am devenit hotărât să aflu singur.

Notă: dacă găsiți resurse care explică aceste concepte, vă rugăm să distribuiți.

Cum să faci o diagramă SVG DIY

Explicația stroke-dasharray și stroke-dashoffset

Să începem cu o simplă diagramă SVG „gogoșă”.

Veți observa câteva lucruri:

1. Raza (atributul „r”) pare absurd! De ce? Am vrut să fac dimensiunile segmentelor mele logice, ușor de înțeles și lizibile. Pentru a realiza acest lucru, am decis să bazez totul pe 100% (sau un cerc de 100). Formele SVG sunt scalabile, deci nu contează cât de mari ajung; cel puțin matematica va fi simplă aici. Mergând mai departe în zona pe care mi-o amintesc de la matematica de liceu: știu că raza unui cerc este r = C / (2π) sau r = 100 / (2π). Rezultatul este 15,91549430918952. Un număr nebun cu o grămadă de numere, da, știu, dar mai târziu ne va face viața mai ușoară tuturor.
2. Pentru viewBox valorile sunt „0 0 42 42”. Ele trebuie să fie duble față de valorile cx & cy (centrul x și centrul y). și să fie puțin mai mare decât diametrul cercurilor (inclusiv lățimea conturului).
3. Există cu clasa „goașă-găură”. Acesta este ceea ce este garantat pentru a face centrul alb. Dacă acest lucru nu este important pentru dvs. (în cazul unui simplu Graficul proporțiilor), atunci acest element poate fi eliminat.
4. De asemenea, există cu clasa „ingele de gogoși”. Servește ca fundal gri deschis în cazul în care sectoarele nu umplu 100% din cerc.

Deci, trebuie să ajustăm dimensiunea sectorului la procentul dorit. Să folosim 85%:

Sectoarele sunt create folosind un atribut de contur SVG numit stroke-dasharray. Valoarea pe care o setăm în exemplul de mai sus este „85 15”.

Dacă ne gândim la diagramă ca fiind una circulară, atunci din prezența unui sector de 85%, putem judeca despre restul de 15%. Aceste două valori sunt o matrice delimitată de spațiu. Iată ce se întâmplă: se creează o bară de 85, apoi un spațiu de 15, apoi o bară de 85, un spațiu de 15 și așa mai departe și așa mai departe. Dar din moment ce folosim un cerc și totalul este 100, totul se repetă din nou. Dacă nu am făcut a doua valoare din matrice astfel încât să completeze primul număr la o sută, atunci vom obține a treia cursă (sau o parte) sau mai multe. De exemplu, iată un stroke-dasharray din „10 10”:

Deci, în forma 2 și forma 3, puteți observa că stroke-dasharray nu începe chiar de sus (la 12:00). În schimb, începe de fapt cu partea dreapta(3:00) și se mișcă în sensul acelor de ceasornic într-un cerc.

Dacă vrem să poziționăm (sau să începem) deasupra, atunci trebuie să folosim stroke-dashoffset. Cu toate acestea, spre deosebire de stroke-dasharray, stroke-dashoffset se mișcă în sens invers acelor de ceasornic. Deci, va trebui să setăm valoarea la „25” (25% în cealaltă direcție de la 3:00, înapoi la 12:00). Amintiți-vă că acesta nu este un număr negativ, deoarece offset-ul se mișcă împotriva săgeții.

Cum să aranjezi feliile de gogoși în jurul SVG

Acum trebuie să adăugăm sectoare suplimentare în jurul cercului. Să folosim un sector care reprezintă 15% din cerc. Procentul rămas pentru stroke-dasharray va fi de 85%, indiferent de orice alte sectoare. Prin urmare, codul va arăta astfel:

Am lăsat stroke-dashoffset la 25, așa că sectorul verde începe de sus și merge în sensul acelor de ceasornic, suprapunându-se pe primul sector (roz).

Evident, acest lucru nu este tocmai ceea ce ne-am dorit. Vrem ca al cincisprezecelea procent (verde) să se potrivească aproape de spațiul lăsat de optzeci și cinci la sută (roz). Putem ajusta stroke-dashoffset până când avem noroc, dar nu ar fi atât de ușor dacă am mai avea două sectoare. În schimb, avem nevoie de o formulă:

Cerc - lungimea totală a tuturor sectoarelor anterioare + offset al primului sector = offset al sectorului curent

Introducând numerele noastre, obținem:

Adăugați mai multe felii la diagrama noastră!

Aceeași formulă funcționează pentru adăugarea de sectoare suplimentare. Să umplem graficul cu 40, 30, 20 la sută și restul de 10 nu vor fi folosiți.

Rezultat:

Adăugarea de text în interiorul diagramei

Nu ar fi o diagramă gogoașă fără text în și în afara; pentru asta e gaura, nu? Ei bine, adăugarea de text este ușoară. Folosim doar elementul care este nativ pentru formele SVG.

Veți observa că am împărțit textul diagramei în 2 elemente și le-a grupat ( ). Acest lucru a fost făcut astfel încât să putem suprapune mai ușor titlul și numărul unul peste altul și, de asemenea, să le aranjam ca o singură unitate. Am ajustat atributele X și Y pentru a începe din centrul formei pe linia de bază și le-am aliniat la stânga.

După cum puteți vedea, poziționarea nu este tocmai corectă, așa că trebuie să o decoram cu puțin CSS:

Mai întâi, să adăugăm fontul Montserrat (doar pentru că îmi place). Apoi trebuie să ajustam dimensiunea fontului și înălțimea liniei. După adăugarea „translateY” în 0.25em, textul este puțin aliniat vertical, dar încă nu am terminat.

Trebuie să facem ambele casete de text mai mici și aliniate la centru, ajustând dimensiunea fontului oriunde dorim (0,6 em pentru numărul mai mare și 0,2 em pentru titlu arată bine) și folosind proprietatea „text-anchor” cu valoarea „mijloc”. ".

Textul este acum centrat. Tot ce rămâne este să le faci cu majuscule (acest lucru este ușor) și să-i aranjezi elementele individuale folosind „translateY”, astfel încât să se plieze corect. Și asta este ceea ce avem acum:

Probleme de accesibilitate

După cum am menționat mai devreme, conținutul SVG face parte din DOM, deci este în mod inerent mai accesibil. Acest lucru face incredibil de ușor să oferiți un context suplimentar pentru cititorii de ecran prin atribute și elemente precum titluri.

Primul nivel de preocupări privind accesibilitatea este de a face diagrama SVG mai semantică prin încadrarea acesteia într-un element