9 Javascript-bibliotek for å bygge interaktive diagrammer

Så du har i hånden tonnevis med data, med en rekke variabler, at du på en eller annen måte må videresende til noen andre. Rå, uorganiserte data kommer til å være vanskelig for dem å forstå. Det er derfor du trenger hjelp fra diagrammer. I webdesign, diagrammer er et av de beste verktøyene for data visualisering. Det er lett å lese, lett på øynene og relativt enkelt å sette opp.

Men la oss ta ting opp et hakk: la oss legg til animasjon og interaktivitet til disse diagrammene, slik at leserne ikke bare kan lære noe nytt fra diagrammet, men også leke med det. Det er faktisk enklere enn det høres, takket være en rekke JS-biblioteker der ute. La oss sjekke dem ut.

1. Figur JS

Chart.js er et ikke-avhengighetsbibliotek for å bygge diagrammer i 6 forskjellige typer: linjediagrammer, linjediagrammer, radardiagrammer, polare områdediagrammer, paj og donutdiagrammer. Biblioteket er også delt i henhold til karttype, slik at sidene dine ikke er slått ned med det som ikke er nødvendig. Den støtter responsiv design, og du kan enkelt endre variabler som farge eller animasjon for å tilpasse diagramgrensesnittet.

2. Chartist JS

Chartist JS er flott bibliotek for å bygge responsive diagrammer som gjør bruk av SVG. Foruten sin lydhørhet gir Chartist deg fleksibilitet ved å bruke tydelig adskillelse av bekymringer: stil med CSS og kontroll med JS. For å gjøre tilpasningen enklere, er SASS-filene inkludert. Den gode tingen her er at du har ubegrensede alternativer for å animere diagrammet ditt ved å bruke Chartist animasjons-API, SMIL, som gir deg ekstra animasjonsalternativer.

3. C3 JS

C3 JS er et bibliotek for å bygge diagrammer basert på D3 JS. Det bryter opp koden for å bygge diagrammer med D3 JS, slik at du kan hoppe over å skrive D3-koden, og bare skrive inn dataene dine. C3 leveres med en rekke APIer som du kan bruke til å kontrollere diagrammer dine enkelt. For å tilpasse diagrammet ditt, definer du dine egne tilpassede stiler til de oppgitte CSS-klassene. Bygg diagrammer fra enkle linjediagrammer for å måle diagrammer. Sjekk ut denne siden for å se hvordan biblioteket fungerer.

4. Flot

flot er et jQuery plguin for å lage diagrammer med interaktive elementer som å slå en serie på eller av, datapunkt-interaksjoner, panorering, zooming og mer. Flot kommer med en rekke alternativer for karttype og hvis du vil ha mer evne på diagrammet ditt, er det noen plugins du kan bruke også. Kartene vil fungere godt med nettlesere som støtter HTML-canvases.

5. EChart

Echart er et utrolig omfattende bibliotek fra Kina som støtter flere karttyper, kan behandle store data (plotting opptil 200 000 datapunkter på kartesisk diagram), har roaming-skalaer, muligheten til enkelt å trekke ut, integrere og utveksle data mellom flere diagrammer, slik at en som enkelt kan bytte fra en datatype til en annen, og mye mer.

6. Peity

Peity vil legge til et minikart til nettsiden din. Det er et lite jQuery-plugin som forvandler et element til en mini svg linje, bar, doughnut eller kaken diagram. Du trenger bare å lage et element og gi en verdi som 1/5 og ring en samtale peity ( 'sektor') på det elementet for å lage et mini kaken diagram. For eksempel å lage et doughnut diagram som bare er en femtedel uthevet, her er HTML:

1/5

Du kan tilpasse diagrammets farge, radius, bredde og høyde, men som standard vises den i liten størrelse.

7. DC JS

DC JS har likheter med C3 JS når det gjelder motor brukt; De bruker begge D3-biblioteket til å gjengi diagrammer i SVG. DC JS er laget for å hjelpe deg med å visualisere data og analyse for nettlesere og mobile enheter. Siden det bruker D3 JS, kan du legge til brukerinteraksjon i diagrammet ditt. DC JS er et kraftig bibliotek for å lage diagrammer fra enkle til høye kompleksiteter.

8. Google-diagram

Du kan opprette interaktive diagrammer og dataredskaper ved hjelp av Google Visualiserings-API via Google Chart. Det er kartgallerier for å sjekke ut Google Charts datavisningsfunksjoner. For å starte, legg inn enkelt JavaScript til websiden din for å laste inn de Google-kartbibliotekene du trenger. Oppgi deretter dataene du vil kartlegge, og gjør noen tilpasninger gjennom kartvalgene. Endelig opprett et diagramobjekt med et id, og opprett på din nettside en

med det id for å vise diagrammet ditt.

9. NVD3

NVD3 er et sett med gjenbrukbare diagrammer og kartkomponenter som er bygget med D3 JS. Dette biblioteket er dermed en "mal" som vil gjøre det enklere for deg å bygge diagrammer. Sjekk ut de mange utvalgskartene som er bygget med NVD3 her.

Nå Les: JavaScript-biblioteker for å lage interaktive og tilpassede kart