9 Javascript-kirjastoa interaktiivisten kaavioiden luomiseksi
Joten sinulla on kädessäsi tonnia dataa, jossa on useita muuttujia, että sinun on jotenkin välitettävä joku muu. Niiden on vaikea ymmärtää raakoja, organisoimattomia tietoja. Siksi tarvitset kaaviosta apua. Web-suunnittelussa, kaaviot ovat yksi parhaista työkaluista tietojen visualisoimiseksi. Se on helppo lukea, helposti silmissä ja suhteellisen helppo asentaa.
Mutta otetaanpa asiat ylös:? lisää animaatiota ja vuorovaikutteisuutta näihin kaavioihin, jotta lukijat eivät voi vain oppia jotain uutta kaaviosta, vaan myös pelata sitä. Se on itse asiassa helpompaa kuin se kuulostaa, kiitos useita JS-kirjastoja siellä. Tarkistetaan ne.
1. Kaavio JS
Chart.js on ei-riippuvuus kirjasto rakentaa kaavioita 6 eri tyyppiä: rivikartat, viivakaaviot, tutkakartat, napa-alueen kaaviot, piirakka ja donitsi kaavioita. Kirjasto on myös jaettu karttatyypin mukaan, joten sivusi eivät ole tukossa, mitä ei tarvita. Se tukee reagoivaa suunnittelua ja voit helposti muuttaa muuttujia, kuten väriä tai animaatiota, muokata kaavion käyttöliittymää.
2. Chartist JS
Chartist JS on loistava kirjasto, joka rakentaa reagoivia kaavioita, jotka käyttävät SVG: tä. Vastuullisuuden lisäksi Chartist antaa sinulle joustavuutta käyttämällä selkeää erottelua: tyyli CSS: llä ja ohjaus JS: n kanssa. Jos haluat helpottaa räätälöintiä, SASS-tiedostot ovat mukana. Tässä on hienoa, että sinulla on rajattomat vaihtoehdot animoida kaavionne käyttämällä Chartist-animaatio-API: ta (SMIL), joka antaa sinulle lisää animaatiovaihtoehtoja.
3. C3 JS
C3 JS on kirjasto, joka rakentaa kaavioita D3 JS: n perusteella. Se käärii vaaditun koodin D3 JS: n kanssa, jotta voit ohittaa D3-koodin kirjoittamisen ja syöttää vain tiedot. C3: ssa on erilaisia sovellusliittymiä, joiden avulla voit hallita kaavioita helposti. Voit muokata kaaviota määrittämällä omat mukautetut tyylisi annetuille CSS-luokille. Rakenna kaavioita yksinkertaisista viivakaavioista karttojen kartoittamiseksi. Tutustu tähän sivuun nähdäksesi, miten kirjasto toimii.
4. Flotti
flot on jQuery plguin, jolla voidaan luoda kaavioita interaktiivisilla elementeillä, kuten sarjan kytkeminen päälle tai pois, datapisteiden vuorovaikutus, panorointi, zoomaus ja muut. Flotissa on erilaisia kaavion tyyppisiä vaihtoehtoja, ja jos haluat lisää kykyä kaaviossa, tässä on myös joitakin laajennuksia, joita voit käyttää. Kartat toimivat hyvin selaimilla, jotka tukevat HTML-kankaita.
5. EChart
Echart on hämmästyttävän kattava kirjasto Kiinasta, joka tukee useita kaaviotyyppejä, voi käsitellä suuria tietoja (piirtämällä jopa 200 000 datapistettä Cartesian kaaviossa), sillä on mittava verkkovierailu, mahdollisuus vaivattomasti purkaa, integroida ja vaihtaa tietoja useiden kaavioiden välillä. yksi helposti siirtyä yhdestä tietotyypistä toiseen ja paljon muuta.
6. Peity
Peity lisää mini-kaavion Web-sivullesi. Se on pieni jQuery-laajennus, joka muuntaa elementin mini-muotoon svg linja, palkki, donitsi tai ympyräkaavio. Sinun tarvitsee vain luoda elementti ja antaa sellainen arvo 1/5 ja soita peity ( 'pie') että elementti tehdä mini ympyräkaavio. Jos haluat esimerkiksi luoda vain viidenneksen korostetun donitsi-kaavion, tässä on HTML:
1/5
Voit muokata kaavion väriä, sädettä, leveyttä ja korkeutta, mutta oletuksena se näkyy pienikokoisena.
7. DC JS
DC JS on samankaltaisia C3 JS: n kanssa käytetyn moottorin suhteen; molemmat käyttävät D3-kirjastoa kaavioiden esittämiseen SVG: ssä. DC JS on suunniteltu auttamaan visualisoimaan tietoja ja analyysejä selaimille ja mobiililaitteille. Koska se hyödyntää D3 JS: ää, voit lisätä käyttäjän vuorovaikutusta kaavioon. DC JS on yksi tehokas kirjasto, joka luo kaavioita yksinkertaisista suuriin vaikeuksiin.
8. Google-kaavio
Voit luoda vuorovaikutteisia kaavioita ja tietovälineitä Google Visualization API: n avulla Google Chartin avulla. Google-kaavion datan visualisointiominaisuuksia on kartan gallerioissa. Voit aloittaa yksinkertaisen JavaScriptin sisällyttämisen Web-sivullesi lataamaan tarvitsemasi Google-karttojen kirjastot. Luettele sitten haluamasi tiedot, jotka haluat kartoittaa, ja tee joitakin mukautuksia kaavion asetusten avulla. Luo lopuksi kaavion kohde, jolla on tunnus, ja luo verkkosivullesi a NVD3 on joukko uudelleenkäytettäviä kaavioita ja kaaviokomponentteja, jotka on rakennettu D3 JS: llä. Tämä kirjasto on siis "malli", joka helpottaa kaavioiden rakentamista. Tutustu moniin NVD3: lla rakennettuihin näytekaavioihin täällä.
9. NVD3
Lue nyt: JavaScript-kirjastot luomaan interaktiivisia ja mukautettuja karttoja
