9 „Javascript“ bibliotekos interaktyvių diagramų kūrimui

Taigi jūs turite savo rankose tonų duomenų su kintamaisiais, kad jūs turite kažką perduoti kitam. Žaliams, neorganizuotiems duomenims jiems bus sunku suprasti. Štai kodėl jums reikia pagalbos iš diagramų. Web dizainas, diagramos yra vienas iš geriausių duomenų vizualizavimo įrankių. Tai lengva skaityti, lengvai į akis ir gana lengva nustatyti.

Bet paimkime dalykus į žingsnį: galime pridėti animaciją ir interaktyvumą toms diagramoms, kad skaitytojai ne tik galėtų sužinoti ką nors naujo iš diagramos, bet ir su juo žaisti. Iš tikrųjų lengviau, nei skamba, nes joje yra keletas JS bibliotekų. Patikrinkime juos.

1. JS diagrama

Chart.js yra ne priklausomybės biblioteka, kurianti 6 skirtingų tipų diagramas: linijų diagramos, brūkšninės diagramos, radaro diagramos, poliarinės srities diagramos, pyragų ir spurgų diagramos. Biblioteka taip pat suskirstyta pagal diagramos tipą, kad jūsų puslapiai nebūtų užstrigę su tuo, kas nereikalinga. Jis palaiko atsakingą dizainą ir galite lengvai pakeisti kintamuosius, tokius kaip spalva ar animacija, kad pritaikytumėte diagramos sąsają.

2. Chartist JS

Chartist JS yra puiki biblioteka, kurianti reaguojančias diagramas, kuriose naudojamas SVG. Kartu su savo reagavimu Chartistas suteikia jums lankstumą, aiškiai atskirdamas problemas: stilių su CSS ir kontrolę su JS. Jei norite palengvinti pritaikymą, įtraukiami SASS failai. Puikus dalykas yra tai, kad turite neribotas galimybes animuoti savo diagramą naudodami Chartist animacijos API, SMIL, kuri suteikia jums papildomų animacijos parinkčių.

3. C3 JS

C3 JS yra biblioteka, kurianti diagramas pagal D3 JS. Jis susikaupia reikiamą kodą, kad sukurtų diagramas su D3 JS, todėl galite praleisti D3 kodo rašymą ir tiesiog įvesti savo duomenis. C3 yra su įvairiomis API, kurias galite naudoti norėdami lengvai valdyti diagramas. Jei norite tinkinti savo diagramą, nustatykite savo pasirinktus stilius tam tikroms CSS klasėms. Sukurkite diagramas nuo paprastų linijų diagramų, kad būtų galima įvertinti diagramas. Peržiūrėkite šį puslapį, kad pamatytumėte, kaip veikia biblioteka.

4. Flot

Flot yra jQuery plguin, skirtas kurti diagramas su interaktyviais elementais, pvz., serijos įjungimu arba išjungimu, duomenų taškų sąveika, panoraminiu, priartinimu ir dar daugiau. „Flot“ ateina su įvairiomis diagramos tipų parinktimis ir, jei norite, kad diagramoje būtų daugiau galimybių, čia pateikiami ir kai kurie papildiniai, kuriuos galite naudoti. Diagramos veiks gerai su naršyklėmis, kurios palaiko HTML vaizdus.

5. EChart

Echartas yra neįtikėtinai išsami biblioteka iš Kinijos, kuri palaiko kelis diagramos tipus, gali apdoroti didelius duomenis (iki 200 000 duomenų taškų kartezijos diagramoje), turi skambučių tarptinklinį ryšį, galimybę lengvai ištraukti, integruoti ir keistis duomenimis tarp kelių diagramų, leidžiant vienas lengvai persijungia iš vieno duomenų tipo į kitą ir dar daugiau.

6. Peity

Peity prie jūsų tinklalapio pridės mini diagramą. Tai mažas jQuery įskiepis, kuris elementą paverčia mini svg linija, baras, spurgos ar pyragas. Jums tereikia sukurti elementą ir suteikti tokią vertę 1/5 ir skambinkite peity ('pie') apie šį elementą, kad padarytumėte mažą pyragą. Pvz., Norėdami sukurti spurgų diagramą, kuri yra tik penktadalis, čia yra HTML:

1/5

Galite pritaikyti diagramos spalvą, spindulį, plotį ir aukštį, tačiau pagal nutylėjimą jis rodomas nedideliu dydžiu.

7. DC JS

DC JS turi panašumų su C3 JS pagal naudojamą variklį; jie abu naudoja D3 biblioteką, kad pateiktų diagramas SVG. DC JS yra sukurta siekiant padėti jums vizualizuoti naršyklių ir mobiliųjų įrenginių duomenis ir analizę. Kadangi ji naudoja D3 JS, tai leidžia jums pridėti vartotojo sąveiką su jūsų diagrama. DC JS yra viena galinga biblioteka, kurianti diagramas nuo paprastų iki labai sudėtingų.

8. „Google“ diagrama

„Google“ diagramoje galite sukurti interaktyvias diagramas ir duomenų įrankius naudodami „Google“ vaizdavimo API. Yra diagramų galerijos, kuriose galite patikrinti „Google“ diagramos duomenų vizualizavimo galimybes. Norėdami pradėti, įdėkite paprastą „JavaScript“ į savo tinklalapį, kad galėtumėte įkelti „Google“ diagramų bibliotekas. Tada surašykite norimus diagramos duomenis ir atlikite kai kuriuos pritaikymus per diagramos parinktis. Galiausiai sukurkite diagramos objektą su ID ir savo tinklalapyje sukurkite a

su tuo ID, kad būtų rodoma diagrama.

9. NVD3

NVD3 yra daugkartinio naudojimo diagramų ir diagramų komponentų rinkinys, sukurtas naudojant D3 JS. Taigi ši biblioteka yra „šablonas“, kuris padės jums lengviau kurti diagramas. Čia rasite daugybę NVD3 sukurtų pavyzdžių diagramų.

Dabar skaitykite: „JavaScript“ bibliotekos, kuriančios interaktyvius ir pritaikytus žemėlapius