9 biblioteci Javascript pentru a construi diagrame interactive
Deci, aveți în mâna dvs. de tone de date, cu o serie de variabile, că trebuie să transmiteți într-un fel altcuiva. Informațiile crude, neorganizate vor fi dificil de înțeles. De aceea aveți nevoie de ajutor din grafice. În designul web, graficele reprezintă unul dintre cele mai bune instrumente pentru vizualizarea datelor. Este ușor de citit, ușor de privit și ușor de configurat.
Dar hai să luăm lucrurile într-o notă: hai să mergem adăugați animație și interactivitate la aceste diagrame, astfel încât cititorii să nu poată învăța doar ceva nou din grafic, ci să se joace și cu el. Este de fapt mai ușor decât pare, datorită unui număr mare de biblioteci JS aflate acolo. Să le verificăm.
1. Diagrama JS
Chart.js este o bibliotecă fără dependență pentru a construi diagrame în 6 tipuri diferite: diagrame de linii, diagrame de bare, diagrame radar, diagrame ale zonei polare, diagrame plăcintă și gogoși. Biblioteca este, de asemenea, împărțită în funcție de tipul graficului, astfel încât paginile dvs. să nu fie împotmolite cu ceea ce nu este necesar. Acesta susține designul receptiv și puteți modifica cu ușurință variabile precum culoarea sau animația pentru a personaliza interfața grafică.
2. Chartist JS
Chartist JS este o bibliotecă excelentă pentru a construi diagrame receptive care fac uz de SVG. Pe lângă capacitatea de a răspunde, Chartist vă oferă flexibilitate prin utilizarea unei separări clare a preocupărilor: stilul cu CSS și controlul cu JS. Pentru a ușura personalizarea, sunt incluse fișierele SASS. Lucrul grozav aici este că aveți opțiuni nelimitate de a anima graficul folosind API-ul animație Chartist, SMIL, care vă oferă opțiuni de animație suplimentare.
3. C3 JS
C3 JS este o bibliotecă care construiește diagrame bazate pe D3 JS. Împachetează codul necesar pentru a construi diagrame cu D3 JS, astfel încât să puteți sări peste scrierea codului D3 și să introduceți doar datele. C3 vine cu o varietate de API pe care le puteți utiliza pentru a vă controla cu ușurință diagramele. Pentru a vă personaliza graficul, definiți propriile stiluri personalizate pentru clasele CSS date. Creați diagrame de la simple diagrame de linii la ecartamente. Consultați această pagină pentru a vedea cum funcționează biblioteca.
4. Flot
Flot este un jQuery plguin pentru crearea de diagrame cu elemente interactive cum ar fi transformarea sau dezactivarea unei serii, interacțiuni punct de date, panning, zoom și multe altele. Flot vine cu o varietate de opțiuni de tip diagramă și dacă doriți mai multe abilități pe graficul dvs., aici sunt unele plugin-uri pe care le puteți utiliza, de asemenea. Diagramele vor funcționa bine cu browserele care acceptă canale HTML.
5. EChart
Echart este o bibliotecă uimitor de cuprinzătoare din China care acceptă mai multe tipuri de diagrame, poate procesa date mari (reprezentând până la 200.000 de puncte de date pe o diagramă carteziană), are roaming la scară largă, abilitatea de a extrage, integra fără efort și de a face schimb de date între mai multe diagrame unul pentru a comuta cu ușurință de la un tip de date la altul, și o mulțime mai mult.
6. Peiților
Peity va adăuga un mini-grafic pe pagina dvs. web. Este un plugin mic jQuery care transformă un element într-un mini svg line, bar, gogoasa sau diagrama pieptene. Trebuie doar să creați un element și să dați o valoare asemănătoare 1/5 și apelați peity ( 'plăcintă') pe acest element pentru a face o diagramă mini pie. De exemplu, pentru a crea o diagramă de gogoși care este doar o cincime evidențiată, aici este HTML:
1/5
Puteți personaliza culoarea, raza, lățimea și înălțimea diagramei, dar în mod implicit este afișată în dimensiuni mici.
7. DC JS
DC JS are similarități cu C3 JS în ceea ce privește motorul utilizat; ambele utilizează biblioteca D3 pentru a face diagrame în SVG. DC JS este creat pentru a vă ajuta să vizualizați date și analize pentru browsere și pentru dispozitive mobile. Deoarece se utilizează pe D3 JS, vă permite să adăugați interacțiunea utilizatorului cu graficul. DC JS este o bibliotecă puternică pentru a crea grafice de la complexe simple la înalte.
8. Google Chart
Puteți crea diagrame interactive și instrumente de date utilizând API-ul de vizualizare Google prin intermediul diagramei Google. Există galerii de hărți pentru a verifica capacitățile de vizualizare a datelor Google Chart. Pentru a începe, încorporați JavaScript simplu în pagina dvs. web pentru a încărca bibliotecile Google Chart de care aveți nevoie. Apoi, listați datele pe care doriți să le încărcați și efectuați unele particularizări prin opțiunile grafice. În cele din urmă, creați un obiect de diagramă cu un id, iar pe pagina dvs. web, creați un NVD3 este un set de diagrame reutilizabile și componente de diagramă construite cu D3 JS. Această bibliotecă este, prin urmare, un "șablon" care vă va ajuta să faceți mai ușor pentru dvs. să creați diagrame. Consultați numeroasele diagrame construite cu NVD3 aici.
9. NVD3
Citiți acum: Bibliotecile JavaScript pentru a crea hărți interactive și personalizate
