Salvați sau distribuiți
Deși acum sarcina nu pare la fel de imposibilă ca înainte, nu există încă o soluție simplă și lipsită de ambiguitate. Cu toate acestea, astăzi există multe mai bune (în comparație cu metodele descrise mai sus), modalități mai susținute de a pune în aplicare diagrame.
O soluție bazată pe transformare
Această soluție este cea mai bună în ceea ce privește marcarea: necesită doar un singur element și orice altceva se va face folosind pseudoelemente, transformări și gradienți CSS. Să începem cu un element simplu:
Acum, să presupunem că avem nevoie de o diagramă de plăcintă care să prezinte un set dur de 20%. Vom lucra mai târziu pentru a ne asigura că este flexibil. Mai întâi, stilizați elementul ca un cerc, care va fi fondul nostru (Figura 1):
Figura 1 - Punctul nostru de pornire (o diagramă cu pieptene care arată 0%)
Diagrama plăcilor va fi verde (și mai precis, galben verde) cu sectorul brun (# 655) care arată procentajul procentual. S-ar putea să fim tentați să folosim transformări înclinate pentru un procent, dar, după cum arată mic experimente, aceasta ar fi o decizie destul de nehotărâtă. În schimb, vom picta părțile stânga și cea dreaptă ale cercului nostru în două culori și vom folosi rotația pseudo-elementului pentru a arăta doar acea parte a cercului de care avem nevoie.
Pentru a colora partea dreaptă a cercului nostru în maro, folosim un gradient liniar simplu:
Figura 2 - Colorarea părții drepte a cercului nostru în culoarea brună printr-un gradient linear simplu
După cum puteți vedea în figura 2, asta este tot ce ne-a fost necesar. Acum putem începe să stilizăm pseudo-elementul care va acționa ca o mască:
Figura 3 - Un pseudo-element care acționează ca o mască este evidențiat aici cu marginea punctată
În Figura 3, puteți vedea modul în care pseudo-elementul nostru este poziționat în prezent față de elementul cu diagrama plăcintă. Acum nu este încă stilizat și nu execută nicio funcție. Este doar un dreptunghi invizibil. Înainte de a începe stilizarea, să facem câteva comentarii:
- pentru că vrem să ascundem partea maro a cercului nostru. atunci trebuie să aplicăm un fundal verde pseudo-elementului folosind culoarea de fundal: moștenire. Pentru a evita duplicarea atunci când îi atribuim aceeași culoare de fundal ca elementul părinte;
- vrem să se rotească în jurul centrului cercului. care se află pe mijlocul stâng al elementului pseudo-element, deci trebuie să setăm valoarea transformării de origine la 0 50% sau doar la stânga;
- nu vrem ca acesta să fie un dreptunghi, deoarece depășește marginile diagramei, așa că trebuie să aplicăm fie o suprasaturație: ascunsă în .pie. sau setați-l la raza de graniță. să-i faci un semicerc.
Punând totul împreună, obținem următorul stil pentru pseudo-elementul nostru;
Figura 4 - Pseudo-elementul nostru (prezentat cu o margine punctată) după sfârșitul stilizării
Notă: nu utilizați fundal: moșteniți; în loc de culoare backround-color: moșteniți; deoarece în acest caz, gradientul va fi, de asemenea, moștenit!
Acum graficul plăcilor arată în figura 4. Aici distracția începe! Putem începe să rotim pseudo-elementul. aplicând transformarea rotate (). Pentru 20%. pe care încercăm să o implementăm, putem folosi valoarea 72deg (0.2 × 360 = 72) sau .2turn. care este mai ușor de citit. În Figura 5, puteți vedea cum arată și pentru alte câteva valori.
Figura 5 - noastră diagramă radială simplă care arată diferite procente, de la stânga la dreapta: 10% (36deg sau .1turn), 20% (72deg sau .2turn), 40% (144deg sau .4turn)
S-ar putea să credeți că sa făcut, dar, din păcate, nu este atât de simplu. graficul nostru proporțiilor este mare pentru afișarea procentelor 0-50%, dar dacă încercăm să arate un viraj de 60 la suta (aplicarea .6turn), pentru a primi ceea ce este prezentat în Figura 6. Dar încă nu-și piardă speranța, putem repara și fă-o!
Figura 6 - Diagrama noastră de plăci se descompune mai mult de 50% (aici este prezentată pentru 60%)
Dacă luăm în considerare cartografierea acțiunilor de 50% -100% ca o problemă separată, putem vedea că pentru ele putem folosi versiunea inversată a soluției anterioare. pseudo-element maro, rotind, respectiv, de la 0 la 5 trepte. Astfel, pentru o cotă de 60%, codul pseudo-element va arăta astfel:
Figura 7 - Diagrama noastră grafică corectă, cu o valoare de 60%
În Figura 7, puteți vedea codul în acțiune. Din moment ce am dezvoltat o modalitate de a afișa orice procentaj, putem anima graficul pieptenei de la 0% la 100% folosind animația CSS. creând un fel de indicator al progresului:
Totul este bine, dar cum putem stiliza mai multe grafice statice cu proporții diferite, care este cea mai comună utilizare a diagramei? În mod ideal, vrem să putem scrie ceva de genul:
și obțineți două diagrame, dintre care unul arată 20%, iar celălalt - 60%. În primul rând, ne uităm la modul în care se poate face cu ajutorul unor stiluri de built-in, si atunci putem scrie întotdeauna un scenariu de scurt pentru a analiza conținutul de text și adăugați aceste built-in stiluri pentru eleganță cod, încapsulare, suportabilitate, și, probabil, cel mai important, disponibilitatea.
Complexitatea în gestionarea procent dintr-o diagramă radială, cu un built-in stiluri este că codul CSS, care este responsabil pentru stabilirea procentului este setat la pseudo. După cum știți deja, nu putem instala stiluri inline pe pseudo-elemente. așa că va trebui să fim mai inventivi.
Notă. Pentru a utiliza valori din spectrul de culori fără repetări și calcule complexe, puteți utiliza următoarea metodă. Aceeași metodă pe care o puteți utiliza și în alte cazuri. Mai jos este un exemplu simplu, izolat de utilizare a acestei metode.
Soluția provine de la unul dintre cele mai neașteptate locuri. Vom folosi animația, care a fost deja prezentată, dar care va fi întreruptă. În loc să o executați ca o animație obișnuită, vom folosi întârzieri de animație negative pentru a seta poziția în orice moment al animației și a rămâne acolo. Esti surprins? Da, valorile negative ale întârzierii de animație nu sunt permise numai în caietul de sarcini, ci sunt, de asemenea, foarte utile în astfel de cazuri.
Deoarece animația noastră este suspendată, va fi afișat doar primul cadru (determinat de valoarea negativă a întârzierii animației). Procentajul afișat pe diagrama plăcii va fi egal cu procentul de întârziere a animației noastre în durata totală. De exemplu, cu o durată curentă de 6 s. avem nevoie de valoarea întârzierii de animație. egală cu -1,2 secunde. pentru a arăta o participație de 20%. Pentru a simplifica calculele, vom seta durata la 100 de secunde. Rețineți că din moment ce animația este oprită pentru totdeauna, valoarea duratei pe care am stabilit-o nu are niciun rol.
Și ultima întrebare: animația este aplicată pseudo-elementului, dar vrem să setăm stilul încorporat pe elementul .pie. Cu toate acestea, deși
Codul CSS pentru această animație va fi următorul (regulile pentru .pie nu sunt afișate, deoarece sunt aceleași):
În momentul de față, putem converti marcajul pentru a folosi procentajele ca conținut, așa cum am intenționat inițial să facem, și adăugați stilurile încorporate de întârziere a animației printr-un script simplu:
Rețineți că am lăsat textul neatins, deoarece este necesar ca noi să fim accesibili și utilizabili. Acum diagramele noastre arata ca plăcintă figura 8. Trebuie să ne ascundem textul, care pot fi puse la dispoziție printr-o culoare: transparent, astfel încât să rămână selectate și imprimate. Pentru luciu suplimentar, putem pune valorile procentuale în centrul diagramei pieptene. astfel încât acestea să nu fie într-un loc aleatoriu atunci când utilizatorul încearcă să le selecteze. Pentru a face acest lucru, avem nevoie de:
Figura 8 - Textul nostru înainte să îl ascundem- converti diagrama valoare în înălțimea liniei înălțime (sau pentru a adăuga valoare linie de înălțime egală cu înălțimea, dar ar fi inutilă duplicarea de cod, ca line-height este setat la valoarea calculată a înălțimii este bun ...);
- setați mărimea și poziția pseudo-elementului folosind poziționarea absolută. astfel încât să nu împingă textul;
- adăugați text-align: center; pentru a centra textul pe orizontală.
Codul final arată astfel:
Soluție bazată pe SVG
SVG face mai ușoară rezolvarea multor sarcini grafice, iar tabelele cu plăci nu fac excepție. Cu toate acestea, în loc să creați o diagrama plăcintă utilizând căi care ar necesita matematică complexă, vom folosi un mic truc.
Aplicați acum câteva stiluri de bază:
Notă. După cum știți, aceste proprietăți CSS sunt, de asemenea, disponibile ca atribute ale elementului SVG, ceea ce ar putea fi convenabil dacă portarea a fost dificilă.
Figura 9 - Punctul nostru de plecare: un cerc verde SVG cu un accident vascular cerebral gros # 655
Cercul nostru rotunjit poate fi văzut în Figura 9. Cursele în SVG constau nu numai în proprietăți ale cursei și ale lățimii accidentale. Există multe alte proprietăți mai puțin populare asociate cu accidentele vasculare cerebrale care vă permit să finalizați aspectul acestora. Una dintre ele este un accident vascular cerebral-dasharray. concepute pentru a crea accidente punctate. De exemplu, am putea folosi pentru aceasta:
Figura 10 - Un accident vascular cerebral punctat, creat cu ajutorul unui accident vascular cerebral-dasharray
Aceasta înseamnă că vrem să obținem o linie de lungime 20 cu decalaje de lungime 10. cum ar fi cele prezentate în figura 10. În acest moment, s-ar putea să fiți surprinși de faptul că acest exemplu SVG are ceva în comun cu diagramele plăcilor. Dar devine mai clară atunci când aplicăm un accident vascular cerebral cu o bordură de 0 și distanța mai mare sau egală cu circumferința cercului nostru (C = 2πr, sau în cazul nostru C = 2π × 30 ≈ 189):
Figura 11 - Mai multe valori ale stroke-dasharray și rezultatul acestora; de la stânga la dreapta: 0 189; 40189; 95189; 150 189
După cum puteți vedea, în prima rundă cifra este de 11 elimină complet accident vascular cerebral, și am rămas doar cu un cerc verde. Cu toate acestea începe distractiv atunci când vom începe să crească prima valoare (Figura 11), din cauza o astfel de pauza lunga ne accident vascular cerebral si accident vascular cerebral mai punctată, care acoperă un procent din circumferința unui cerc, pe care le determină.
Poate că ați știut deja în ce direcție ne mișcăm: dacă diminuăm raza cercului nostru suficient pentru ao închide complet cu accidentul nostru, vom obține în cele din urmă ceva care arată foarte mult ca o diagrama plăcintă. De exemplu, în Figura 12 puteți vedea cum va arăta când se aplică 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 diagrama plăcintă
Amintiți-vă că: cursele SVG sunt întotdeauna jumătate înăuntru și jumătate în afara elementului la care se aplică. În viitor, vom putea controla acest comportament.
Acum, pentru a transforma această imagine într-o diagramă radială similar cu ceea ce am creat în soluția anterioară, este destul de simplu: trebuie doar să adăugați cerc mai verde sub accident vascular cerebral și rotiți-l la 90 ° în sens antiorar, astfel încât acesta pornește în mijloc. Din moment ce
Figura 13 - Diagrama finală cu SVG
Puteți vedea rezultatul final din Figura 13. Această metodă face mai ușor să rotiți plăcinta de la 0% la 100%. Trebuie doar să creați o animație CSS care să schimbe cursa-dasharray de la 158 la 158 158:
Ca o îmbunătățire suplimentară, putem specifica o anumită rază a cercului, astfel încât circumferința sa să fie (infinit de aproape de) 100 și, prin urmare, putem specifica lungimea cursei-dasharray. ca dobândă. fără nici un calcul. 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 atributele de lățime și înălțime. Pentru a fi reglabil la dimensiunile containerului.
După aceste modificări, dispunerea diagramei plăcilor prezentată în figura 13 va fi după cum urmează:
Și CSS va deveni acest lucru:
și adăugați SVG încorporat în interiorul fiecărui element .pie cu toate elementele și atributele necesare. Acesta va adăuga, de asemenea, un element