Pie chart html. Pie i donut svg grafikoni u HTML5 od nule

A CSS kod za ovu animaciju postaje sljedeći (pravila za .pie nisu prikazana, jer ostaju ista):

@keyframes spin (do (transformacija: rotirati (.5turn);)) @keyframes bg (50% (pozadina: # 655;)) .pie :: prije (/ * [drugi stilovi nisu promijenjeni] * / animacija: spin 50s linearno beskonačno, bg 100s step-end beskonačno; animacija-play-state: pauzirana; animacija-kašnjenje: naslijediti;)

Za sada, možemo pretvoriti oznake da koristimo postotke kao sadržaj, kao što smo prvobitno namjeravali, i dodati inline stilove kašnjenja animacije kroz jednostavnu skriptu:

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

Napominjemo da smo tekst ostavili netaknutim jer nam je potreban radi pristupačnosti i upotrebljivosti. Naši tortni grafikoni sada izgledaju kao na slici 8. Moramo sakriti tekst koji može biti dostupan putem boje: transparentan tako da ostane izbor i štampanje... Za dodatni sjaj možemo postavite procentualne vrijednosti u centar tortnog grafikona tako da nisu unutra nasumično mjesto kada ih korisnik pokuša istaknuti. Za ovo nam je potrebno:

Slika 8 – Naš tekst prije nego što ga sakrijemo

• pretvoriti vrijednost visine grafikona u liniju-visinu (ili dodati vrijednost visine linije jednaku visini, ali ovo bi bilo besmisleno dupliciranje koda, jer će visina linije biti postavljena na izračunatu vrijednost visine, što je dobro) ;
• postavite veličinu i poziciju pseudo elementa sa apsolutno pozicioniranje tako da ne gura tekst nadole;
• dodati text-align: centar; da centrirate tekst horizontalno.

Konačni kod izgleda ovako:

Pita (položaj: relativna; širina: 100px; visina linije: 100px; radijus ivice: 50%; pozadina: žutozelena; pozadinska slika: linearni gradijent (desno, transparentno 50%, # 655 0); boja: prozirna ; text-align: center;) @keyframes spin (do (transformacija: rotirati (.5turn);)) @keyframes bg (50% (pozadina: # 655;)) .pie :: ispred (sadržaj: ""; pozicija : apsolutno; vrh: 0; lijevo: 50%; širina: 50%; visina: 100%; radijus ivice: 0 100% 100% 0/50%; boja pozadine: naslijediti; izvor transformacije: lijevo; animacija: spin 50s linearno beskonačno, bg 100s step-end beskonačno; animacija-play-state: pauzirana; animacija-kašnjenje: naslijediti;)

SVG rješenje

SVG donosi odluku mnogih grafički zadaci jednostavniji i tortni grafikoni nisu izuzetak. Međutim, umjesto kreiranja tortnog grafikona pomoću putanja, što bi zahtijevalo kompliciranu matematiku, upotrijebit ćemo mali trik.

Počnimo s krugom:

Sada primijenimo neke osnovne stilove na to:

Krug (ispuna: žutozelena; potez: # 655; širina poteza: 30;)

Bilješka: Kao što znate, ove CSS svojstva su također dostupna kao atributi SVG elementi koji bi mogli biti od koristi ako je portiranje problem.

Slika 9 - Naša početna tačka: zeleni SVG krug sa debelim potezom # 655

Možete vidjeti naš ocrtani krug na slici 9. Potezi u SVG-u se sastoje od više od samo svojstava poteza i širine poteza. Postoje mnoga druga manje popularna svojstva vezana za udar koji vam omogućavaju da fino prilagodite njihov izgled. Jedan od njih je stroke-dasharray, koji služi za kreiranje isprekidanih poteza. Na primjer, mogli bismo ga koristiti za ovo:

Stroke-dasharray: 20 10; Slika 10 – Jednostavan isprekidani potez kreiran pomoću stroke-dasharray

To znači da želimo crticu dužine 20 sa prazninama dužine 10, poput onih prikazanih na slici 10. U ovom trenutku, mogli biste se iznenaditi da ovaj SVG primjer ima neke veze sa tortnim grafikonima. Ali stvari postaju jasnije kada primijenimo potez s crticom 0 i prazninama dužim od ili jednake dužine obim našeg kruga (C = 2πr, ili u našem slučaju C = 2π × 30 ≈ 189):

Stroke-dasharray: 0 189; Slika 11 - Nekoliko stroke-dasharray vrijednosti i njihov rezultat; s lijeva na desno: 0 189; 40 189; 95 189; 150 189

Kao što vidite, u prvom krugu na slici 11, ovim se potez u potpunosti uklanja, a ostaje nam samo zeleni krug. Međutim, zabava počinje kada počnemo povećavati prvu vrijednost (slika 11): zbog tako velikog razmaka više nećemo dobiti tačkasti potez, ali potez koji pokriva onoliko obima kruga koliko smo odredili.

Možda ste već shvatili u kom smjeru idemo: ako smanjimo polumjer našeg kruga dovoljno da potpuno zakloni svoj potez, na kraju ćemo dobiti nešto što vrlo liči na tortni grafikon. Na primjer, na slici 12, možete vidjeti kako bi ovo izgledalo kada se primijeni na krug polumjera 25 i širine poteza od 50:

Slika 12 – Naša SVG slika počinje da liči na tortni grafikon

Zapamtite: SVG potezi su uvijek pola unutar, a pola izvan elementa na koji se primjenjuju. U budućnosti ćemo moći kontrolisati ovo ponašanje.

krug (ispuna: žutozelena; potez: # 655; širina poteza: 50; stroke-dasharray: 60 158; / * 2π × 25 ≈ 158 * /)

Sada je pretvaranje ove slike u tortni grafikon poput onog koji smo kreirali u prethodnom rješenju prilično jednostavno: samo trebate dodati veći zeleni krug za potez i okrenite ga za 90 ° u smjeru suprotnom od kazaljke na satu tako da počinje na vrhu u sredini. Ukoliko

Svg (transformacija: rotiranje (-90 stepeni); pozadina: žutozelena; ivica-radijus: 50%;) Slika 13 - Finalni tortni grafikon sa SVG-om

Konačan rezultat možete vidjeti na Slici 13. Ova metoda dodatno olakšava animaciju tortnog grafikona od 0% do 100%. Samo trebamo kreirati CSS animaciju koja mijenja stroke-dasharray sa 0 158 na 158 158:

@keyframes popunjavanje (do (stroke-dasharray: 158 158;)) krug (ispuna: žutozelena; potez: # 655; stroke-width: 50; stroke-dasharray: 0 158; animacija: fillup 5s linearno beskonačno;)

Kao dodatno preciziranje, možemo postaviti određeni polumjer kružnice tako da je njegov obim (beskonačno blizu) 100, tako da možemo specificirajte stroke-dasharray dužine u procentima, bez ikakvih kalkulacija. Pošto je obim 2πr, potreban nam je radijus od 100 ÷ 2π ≈ 15,915494309, koji se za naše potrebe može zaokružiti na 16. Također postavljamo dimenzije SVG-a u atributu viewBox, umjesto atributi širine i visinu kako bi se promijenila veličina na veličinu svog spremnika.

Sa ovim modifikacijama, oznaka za tortni grafikon prikazan na slici 13 postaje:

A CSS će biti ovakav:

Svg (širina: 100px; visina: 100px; transformacija: rotiranje (-90deg); pozadina: žutozelena; radijus granice: 50%;) krug (ispuna: žutozelena; potez: # 655; širina poteza: 32; stroke-dasharray : 38 100; / * za 38% * /)

Bilješka, kako je sada lako promijeniti postotak... Međutim, čak i sa ovim prevelikim pojednostavljenjem, ne želimo da ponavljamo sve ove SVG oznake za svaki tortni grafikon. Vrijeme je da nam JavaScript pomogne u maloj automatizaciji. Napisat ćemo malu skriptu za uzimanje jednostavne HTML oznake poput ove...

I dodajte inline SVG unutar svakog .pie elementa sa svime bitnih elemenata i atribute. Takođe će dodati element

Moja stranica sadrži sličan styles.css stylesheet za moje lične CSS stilove. Također morate napraviti kopiju jQuery biblioteke. Potreban je za ispravan rad dodatka.
Sama po sebi, stranicu je prilično lako strukturirati. Elementi kruga sadržani su u div oznakama koje koriste HTML5 atribute za manipulaciju podacima. Alternativno, mogu se pohraniti u jQuery funkciji, ali ako želite bolju kontrolu nad svakim elementom onda je lakše raditi u HTML-u.

 

 

 

 
Photoshop
 

 
 

 
Ilustrator
 

 
 

 
After Effects
 

 
 

Ovo je kopija prvog reda krugova, koji se sastoji od 3 animirane jedinice. Svi ovi atributi podataka su dalje objašnjeni u dokumentaciji dodatka. Svaki predstavlja opciju koja definira efekat animacije. Ispod je kratak opis opcija koje koristim:

• data-dimenzija - ukupna veličina širine/visine kruga;
• data-text - tekst koji se pojavljuje u centru svakog kruga;
• data-width - debljina rotacionog luka podataka;
• data-fontsize - središnja veličina fonta teksta;
• data-percent - broj od 0-100 koji predstavlja procente u vašem krugu;
• data-fgcolor - boja prednjeg plana kruga;
• data-bgcolor - boja pozadine kruga;
• data-fill - unutrašnja ispuna boje pozadine unutrašnjeg kruga.

CSS izgled stranice

/ ** struktura stranice ** / .wrap (prikaz: blok; margina: 0 auto; max-width: 800px;) #intro (prikaz: blok; margin-bottom: 25px; text-align: centar;) #intro p (veličina fonta: 1.8em; visina linije: 1.35em; boja: # 616161; stil fonta: kurziv; margin-bottom: 25px;) #stats (prikaz: blok; širina: 100%; padding: 15px 0; background: # f8f8f8; border-top: 4px solid # c3c3c3; border-bottom: 4px solid # c3c3c3;) #stats .row (display: block;) .circle-container (display: block; float: lijevo; margin-right : 55px; margin-bottom: 45px;) .circle-container h3 (display: block; text-align: center; font-size: 2.25em; line-height: 1.4em; color: # 363636; text-shadow: 1px 1px 0 #fff;)

Unutar svake sekcije sadržaj se čuva .wrap div za fiksiranje u centru. Također, elementi kruga koji se slobodno kreću trebaju dodatnu posudu. .clearfix da sve bude ispravno poravnato.

/ ** clearfix ** / .clearfix: nakon (sadržaj: "."; prikaz: blok; jasno: oba; vidljivost: skrivena; visina linije: 0; visina: 0;) .clearfix (prikaz: inline-block; ) html .clearfix (prikaz: blok;) * html .clearfix (visina: 1%;)

Ova klasa clearfix je godinama poznat kao slobodno pokretno rješenje za kontejnere. Obično se uklanjaju iz teksta dokumenta i ne zadržavaju svoju originalnu širinu/visinu. Ali ovo održava širinu kontejnera konstantnom #stats i ostavlja prostor za više sadržaja koji idu niz stranicu.

Final touchs

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

Za one koji nisu upoznati sa strukturom sintakse jQueryja, daću kratak opis. Nakon što se dokument učita, pokrećemo novu funkciju. Naš unutrašnji cilj je svaki element koji koristi klasu .circlestat i pokreće funkciju kružno ()... Ovo vodi dodatak Circliful, koji stvara efekte animacije, u akciju i primjenjuje dodatni sadržaj / boje.

Ne mogu reći da će ovi krugovi uvijek biti najbolje rješenje. Vidio sam puno portfelja koji su bili zasnovani na riječima i brojevima, ali ne i rad sam po sebi. Razmislite o korištenju ovih krugova u rijetkim prilikama i pokušajte ih posuditi u druge svrhe osim jednostavnih vještina. Vaša statistika se ne mora mjeriti u procentima – ona može pokazati koliko godina ste u poslu, ukupan broj projekata koje imate ili druge slične brojke. Možete besplatno preuzeti kopiju mog vodiča i eksperimentirati s kodom kako biste ga poboljšali za svoje projekte.

"Kuhinja" web programera je pomalo kao domaća kuhinja. Programer ima pristup raznim bibliotekama iz gotov kod to će mu pomoći da napravi web aplikaciju na isti način na koji kuhar kod kuće može koristiti gotovu hranu za efikasnije kuhanje jela. U oba slučaja, kvalitet prethodno pripremljenih artikala bi trebao biti veoma važan. Međutim, ponekad se kvalitet žrtvuje radi pogodnosti. Nemojte me pogrešno shvatiti, udobnost nije uvijek loša stvar. Može biti korisno kada su prednosti i mane poznate i dobro analizirane. Analizirajući opcije za tortne i krofne grafikone u HTML-u, možemo istaknuti samo neke:

1. Grafikon zasnovan na elementima platna generiran na klijentu (tj. JavaScript)
2. Dijagram baziran na SVG-u i generiran na klijentu (tj. JavaScript)
3. SVG generisan server grafikona

Biblioteke koje su gotove iz kutije koje koriste Canvas i SVG JavaScript

JavaScript biblioteke za crtanje dijagrama su često praktičnije i opterećene gomilom sjajnih opcija poput interaktivnosti. Evo nekoliko biblioteka:

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

Nekoliko redova JavaScript-a i niz podataka omogućit će vam da napravite dijagram na vašoj web stranici za nekoliko sekundi. Nije iznenađujuće da mnogi biraju ovaj put.

Zašto se onda truditi i kodirati ih sami? Ovo je odlično pitanje koje sam i ja sebi postavio. Na kraju sam se uvjerio u tri stvari:

1. Do većine JavaScript biblioteka je teško doći, posebno do onih zasnovanih na elementu Canvas (s izuzetkom Google Charts)
2. Ako su informacije na dijagramu veoma važne (kao što je to bilo u mojoj situaciji), treba li se osloniti na skriptu koja se izvodi na klijentu za generiranje informacija? Ja tako ne mislim.
3. Ako zakopam dublje u SVG kod i uprljam ruke, mogao bih naučiti nešto više o magičnim glupostima koje su u pozadini. Drugim riječima, proces učenja može biti zabavan i vrijedan truda.

Moja situacija

Moj tim je trebao jednostavnu komponentu koja bi se mogla izgraditi na serveru i prikazati jednostavne informacije o korišćenju naloga. Takođe, preferirali smo lakoću ove komponente (izbjegavajte JavaScript ako je moguće); nije morao biti pretjerano sofisticiran ili interaktivan, trebao je samo prikazati važne podatke.

Dodatna napomena o grafikonima zasnovanim na platnu

Možda ste primijetili (ako ste upoznati sa kreiranjem grafikona za web) da nisam uključio Chart.js u gornju listu preporučenih biblioteka. Iako ga definitivno možete koristiti, vrijedi imati na umu da Chart.js koristi Canvas element za renderiranje svojih grafikona, a sadržaj elementa nije dio DOM-a. Stoga nisu dostupni čitačima ekrana. To znači da morate prihvatiti dodatne mjere kako biste bili sigurni da su vaši podaci dostupni.

Uvod u CSS i SVG grafikone

CSS i SVG dijagrami su inherentno pristupačniji i semantičniji od drugih tehnologija. Ali oni mogu biti složeni, a možda i dugotrajniji ako ih kodirate ručno.

CSS Ninja Lea Verou nudi nekoliko opcija za kreiranje tortnih grafikona od nule u svom članku "Dizajniranje fleksibilnih, održivih tortnih grafikona sa CSS i SVG". Njene metode se mogu primijeniti i na krofne.

Robin Randle je također pisao o kreiranju grafikona isključivo pomoću CSS-a, gdje također ističe svoje propuste u pristupu.

Neobjašnjivo

Malo sam proguglao SVG i krofne grafikone i naišao na članke Lea Verou i Robin Randle (gore spomenutih) pored nekoliko drugih. Gotovo svi su raspravljali o upotrebi atributa stroke-dasharray i stroke-dashoffset u SVG-u za pozicioniranje dijelova dijagrama. Ova svojstva su identična "stroke" pri kreiranju vektora u programima kao što je Adobe Illustrator.

Neki od ovih članaka čak su govorili o animaciji u SVG-u, što je super, ali takođe nije ono što sam tražio.

Nakon mog istraživanja, uspio sam shvatiti to korištenjem iz SVG-a zajedno sa stroke i stroke-dasharray mogao bi mi pružiti ugniježđene segmente kolača koji su mi potrebni. Takođe sam shvatio da će mi potez-dashoffset omogućiti da "animiram", ili drugim riječima, pozicioniram segment gdje želim da bude u krugu.

Međutim, činilo se da nisam našao nikakvo jasno objašnjenje kako točno funkcioniraju atributi crtice i kako se odnose na obim kruga. A ono što je bilo nedostižnije je pričvršćivanje nekoliko elemenata (jedan za drugim) oko kruga. Još bolje, koja je formula za dobijanje ovih relativnih pozicija koristeći jedinstvene / dinamičke veličine segmenata i atribute poteza SVG-a?

Tako sam postao odlučan da sam saznam.

Napomena: Ako pronađete bilo kakve resurse koji objašnjavaju ove koncepte, podijelite ih.

Kako napraviti DIY SVG dijagram

Objašnjenje stroke-dasharray i stroke-dashoffset

Počnimo s jednostavnim SVG "krofnom" grafikonom.

Primijetit ćete par stvari:

1. Radijus (atribut "r") izgleda apsurdno! Zašto? Želio sam da svoje veličine segmenata učinim logičnim, razumljivim i čitljivim. Da bih to postigao, odlučio sam da sve baziram na 100% (ili krug od 100). SVG oblici su skalabilni, tako da nije bitno koliko će na kraju biti veliki; barem će matematika ovdje biti jednostavna. Idemo dalje u područje koje se sjećam iz srednje škole matematike: znam da je polumjer kružnice r = C / (2π) ili r = 100 / (2π). Rezultat je 15.91549430918952. Ludi broj sa gomilom brojeva, da, znam, ali kasnije će nam svima olakšati život.
2. Za viewBox vrijednosti su "0 0 42 42". Moraju biti dvostruke vrijednosti cx & cy (centar x i centar y). i biti nešto veći od prečnika krugova (uključujući širinu obrisa).
3. Tu je sa klasom "krofna". To je ono što će zajamčeno učiniti centar bijelim. Ako vam ovo nije važno (u slučaju jednostavnog tortni grafikon), tada se ova stavka može ukloniti.
4. Također postoji sa klasom "krofna-ring". Služi kao svijetlo siva pozadina u slučaju da sektori ne ispunjavaju 100% kruga.

Dakle, trebamo prilagoditi veličinu sektora na željeni postotak. Iskoristimo 85%:

Sektori se kreiraju pomoću SVG atributa poteza koji se zove stroke-dasharray. Vrijednost koju smo postavili u gornjem primjeru je "85 15".

Ako posmatramo dijagram kao kružni, onda iz prisustva sektora od 85% možemo suditi o ostatku od 15%. Ove dvije vrijednosti su niz razgraničen prostorom. Evo šta se dešava: kreira se traka od 85, zatim razmak od 15, zatim traka od 85, razmak od 15, i tako dalje i tako dalje. Ali pošto koristimo krug i ukupno je 100, sve se ponavlja ponovo. Ako drugu vrijednost u nizu nismo napravili tako da dopunjava prvi broj na sto, onda ćemo dobiti treći potez (ili dio) ili više. Na primjer, ovdje je stroke-dasharray iz "10 10":

Dakle, u obliku 2 i obliku 3, možete primijetiti da stroke-dasharray ne počinje na samom vrhu (u 12:00). Umjesto toga, zapravo počinje sa desna strana(3:00) i kreće se u smjeru kazaljke na satu u krug.

Ako želimo pozicionirati (ili početi) na vrhu, onda moramo koristiti stroke-dashoffset. Međutim, za razliku od stroke-dasharray, stroke-dashoffset se kreće suprotno od kazaljke na satu. Dakle, trebat ćemo postaviti vrijednost na "25" (25% u drugom smjeru od 3:00, nazad do 12:00). Zapamtite da ovo nije negativan broj jer se pomak kreće prema strelici.

Kako rasporediti kriške krofne oko SVG-a

Sada moramo dodati dodatne sektore oko kruga. Koristimo sektor koji je 15% kruga. Preostali procenat za stroke-dasharray će biti 85%, bez obzira na bilo koje druge sektore. Dakle, kod će izgledati ovako:

Ostavili smo stroke-dashoffset na 25, tako da zeleni sektor počinje na vrhu i ide u smjeru kazaljke na satu, preklapajući prvi sektor (ružičasti).

Očigledno, ovo nije baš ono što smo željeli. Želimo da petnaesti procenat (zeleno) stane blizu prostora koji je ostavio osamdeset peti procenat (ružičasta). Možemo podesiti stroke-dashoffset dok ne budemo imali sreće, ali ne bi bilo tako lako da imamo još dva sektora. Umjesto toga, potrebna nam je formula:

Krug - ukupna dužina svih prethodnih sektora + pomak prvog sektora = pomak trenutnog sektora

Uključujući naše brojeve, dobijamo:

Dodajte još kriški našem dijagramu!

Ova ista formula radi za dodavanje dodatnih sektora. Popunimo grafikon sa 40, 30, 20 posto, a preostalih 10 nećemo koristiti.

rezultat:

Dodavanje teksta u unutrašnjost grafikona

To ne bi bio dijagram sa krofnama bez unosa i izlaza teksta; za to je rupa, zar ne? Pa, dodavanje teksta je jednostavno. Mi samo koristimo element koji je izvorni za SVG oblike.

Primijetit ćete da sam podijelio tekst grafikona na 2 elementa i grupirao ih ( ). To je urađeno kako bismo lakše preklopili naslov i broj jedan na drugi, te ih poredali u jednu cjelinu. Podesio sam atribute X i Y tako da počnu od centra oblika na osnovnoj liniji i poravnam ih ulijevo.

Kao što vidite, pozicioniranje nije sasvim ispravno, pa ga moramo ukrasiti s malo CSS-a:

Prvo, dodajmo font Montserrat (samo zato što mi se sviđa). Zatim moramo podesiti veličinu fonta i visinu reda. Nakon dodavanja "translateY" u 0.25em, tekst je malo vertikalno poravnat, ali još nismo gotovi.

Moramo da učinimo oba tekstualna okvira manja i poravnata po sredini tako što ćemo prilagoditi veličinu fonta gdje god želimo (0,6em za veći broj i 0,2em za naslov izgleda dobro) i korištenje svojstva "text-anchor" sa vrijednošću "sredina ".

Tekst je sada centriran. Sve što je preostalo je da sve to učinite velikim slovima (ovo je lako) i rasporedite njegove pojedinačne elemente koristeći "translateY" tako da se pravilno presavijaju. A evo šta sada imamo:

Problemi pristupačnosti

Kao što sam ranije spomenuo, SVG sadržaj je dio DOM-a, tako da je inherentno pristupačniji. Ovo čini nevjerovatno lakim pružanje dodatnog konteksta za čitače ekrana putem atributa i elemenata kao što su naslovi.

Prvi nivo zabrinutosti za pristupačnost je da se SVG dijagram učini semantičnijim umotavanjem u element