De ce pe panza?
Există multe modalități de a crea grafice în rețea și mai ales pe panza. Cu toate acestea, Sara Soueidan recomandă evitarea acestei metode:
"Canvasul HTML5 poate fi, de asemenea, utilizat pentru a crea vizualizare, dar conținutul generat nu face parte din DOM și nu poate fi accesat. Pentru a rezolva această problemă, va trebui să duplicați conținutul dintre eticheta de deschidere și cea de închidere a pânzei. Această soluție oferă, de asemenea, un flashback pentru browserele mai vechi. De asemenea, trebuie să conectați conținutul popular la pânză, astfel încât atunci când interacționați, ele să răspundă corect. Deci, în HTML5 Canvas trebuie să duplicăm tot conținutul [. ] Și în SVG, imediat obțineți semantică și disponibilitate, împreună cu interactivitatea pe JS chiar din cutie. "
Dar, pe lângă pânză, există și alte căi. De exemplu, Filament Group a scris un plugin jQuery numit Visualize. care colectează toate informațiile din tabelul de tabele și creează un grafic bazat pe datele obținute. Această metodă are loc, chiar dacă în tabel există doar un singur element.
De ce SVG?
Formatul SVG nu este numai pentru pictograme sau imagini simple. Are avantajele sale pentru crearea de grafice. În ghidul nostru despre SVG, am descris principalele avantaje ale acestui format:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Dimensiune mică a fișierului cu compresie bună
Scalabilitate completă (cu excepția dimensiunilor foarte mici)
Mare pentru afișează retina
Interacțiunea și filtrele
De asemenea, puteți adăuga două beneficii cheie care vor fi utile pentru diagrame:
SVG este disponibil în browsere (va trebui să lucrați foarte puțin)
Pentru ajutor, puteți vedea mai multe cadre SVG create pentru a crea grafice
Să începem. Care este cel mai simplu mod de a crea un grafic pe SVG?
Grafice cu img
Crearea graficii în SVG este la fel de ușoară ca în Illustrator sau o altă aplicație orientată pe vector, apoi exportată în SVG și inserarea în marcaj prin intermediul etichetei img:
Aceasta este o modalitate destul de bună, plus imaginea se măsoară bine. Dar, totuși, vom pierde majoritatea avantajelor SVG încorporate, inclusiv accesul prin DOM și interacțiunea. Browserele nu citesc astfel de imagini grafice, se citeste doar atributul alt si se pierde interactiunea cu mouse-ul, touchscreen-ul sau tastatura.
Toate aceste probleme conduc la o căutare a unui alt mod de inserare a SVG în aspectul paginii. De exemplu, dacă faci același lucru ca în proiectul Death from Above. Modul de interacțiune cu graficele utilizate acolo ne va ajuta să înțelegem totul.
Pentru a obține maximum de la SVG, trebuie să luați tot codul din acest exemplu și să îl inserați în pagina dvs. Graficele (topurile graficelor) pot fi stilizate folosind CSS, schimbând interactivitatea cu JS - astfel încât vom stoarce toate avantajele built-in SVG.
(Puteți obține aceleași rezultate folosind obiect sau iframe, conceptele sunt foarte asemănătoare.) Dar să examinăm în detaliu SVG inline.)
Diagrame de coloane
Fiecare coloană a graficului este o etichetă
Puteți să poziționați elementele de text și rectanglic folosind coordonatele x / y:
Rețineți că atunci când plasați cursorul peste o diagramă, culoarea coloanei și a textului se modifică. Puteți controla acest lucru cu proprietatea CSS a umplerii:
Sparklines
Din moment ce infokrivye sunt în multe moduri histograme mici, vom împrumuta majoritatea codului din exemplul anterior:
Acest timp pentru alinierea grupurilor
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Grafice grafice
Eticheta poliliniei ne va ajuta să setăm liniile și atributul de puncte - punctele de vârf:
0.120 înseamnă 0 în partea stângă și 120 în partea de sus a pânzei SVG. Când am decis asupra vârfurilor graficului, putem stabili lățimea liniei cu ajutorul lățimii cursei, culoarea liniei cu ajutorul cursei:
Dar acestea sunt doar stilurile diagramei - și despre liniile principale, care ajută la înțelegerea a ceea ce este? Cum rămâne cu axele?
Crearea de axe și inscripții
Roemer Vlasveld a scris un excelent articol despre crearea de grafice pe SVG. A documentat câteva proprietăți interesante care ne vor ajuta să creăm inscripții și să stilizăm axele graficelor. Vom recrea o versiune simplificată a exemplului său:
Fiecare grup
Adăugând toate punctele la celălalt grup folosind elementul cerc, puteți vedea ce se întâmplă:
Pieptene
Am menționat deja articolul Lea Verou despre plăcile grafice de câteva ori, deoarece acesta este un exemplu excelent. Vom începe cu el. Nu voi redefini tehnica aici, deși ar fi interesant să vezi cum poți interacționa cu tabelele de plăci din SVG. Mai jos este un exemplu gata, astfel încât să înțelegeți ceea ce urmărim:
Când faceți clic pe butoanele de deasupra graficului în sine, acesta este actualizat. Valorile sunt luate din obiectul JS. Această metodă are, de asemenea, propriile probleme cu disponibilitatea, dar mă voi concentra pe interacțiunea cu JS și SVG. În primul rând, marcarea:
Acum, să setăm datele despre populație:
Este necesar să umpleți butoanele goale cu butoane, făcând clic pe care se va schimba proprietatea curse-dasharray pentru SVG a elementului cerc. Puteți crea butoane ca:
Acum fixați procentele: Asia: 60 în obiectul continent înseamnă 60 de la 100%, și nu din cerc. Să creăm o funcție pentru acest lucru:
Acum, adăugați dispozitivul de gestionare a evenimentelor la fiecare buton, creați funcția setPieChart (). Această funcție modifică valoarea stroke-dasharray, verifică numele de date al atributului fiecărui buton și găsește informațiile corespunzătoare:
Adăugând aceste funcții auxiliare, obținem o diagramă de tip pieptene:
Animația din exemplele anterioare a fost destul de simplă, tot ce am făcut a fost folosirea proprietății de tranziție:
După ce am schimbat valoarea proprietății folosind un script, restul lucrării pentru noi face CSS. Și ce alte proprietăți și atribute SVG pot fi manipulate prin CSS?
Particularitatea stilului SVG cu CSS este că putem controla numai anumite proprietăți. De exemplu, dacă vrem să schimbăm coordonatele x sau y sau grupul
W3C are o listă utilă. ce proprietăți afectează elementele SVG specifice. Deci, verificați dublu înainte de a aplica proprietatea CSS unui anumit element.
Modificarea SVG manual nu este cea mai bună cale
Cu forme de bază precum rect, line și poligon, puteți crea orice tip de grafice SVG. Problema reală este diferită: avem nevoie de aceasta? De exemplu, graficele liniare pot fi create în continuare manual, dar nu aș recomanda acest lucru. Sintaxa este puțin complexă, mai ales dacă doriți să creați linii curbe.
Scrierea SVG manual este un proces foarte lent și neplăcut. Chiar și atunci când se creează diagrame simple, este nevoie de o eternitate pentru a scrie cod și a verifica pozițiile fiecărui element al graficului. La fel ca crearea de diagrame pe CSS pur, scrierea manuală a SVG este un proces foarte dureros, dacă nu creați un grafic foarte mic. Ar trebui să existe altă cale mai convenabilă?
Cadru pentru ajutor!
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Articole similare
-
Cum pot repara o lucrare de acuarelă nereușită și a crea din ea un frumos grafic
-
8 Cele mai bune pluginuri wordpress pentru crearea de grafice și diagrame
Trimiteți-le prietenilor: