9 Javascript-biblioteker til at opbygge interaktive diagrammer
Så du har i din hånd tonsvis af data, med en række variabler, at du på en eller anden måde skal videresende til en anden. Rå, uorganiserede data vil være vanskelige for dem at forstå. Derfor har du brug for hjælp fra diagrammer. I webdesign, diagrammer er et af de bedste værktøjer til data visualisering. Det er let at læse, let på øjnene og relativt let at oprette.
Men lad os tage tingene op: Lad os Tilføj animation og interaktivitet til disse diagrammer, så læserne ikke kun kan lære noget nyt fra diagrammet, men også spille med det. Det er faktisk lettere end det lyder, takket være en række JS biblioteker derude. Lad os tjekke dem ud.
1. Diagram JS
Chart.js er et bibliotek, der ikke er afhængigt, til at opbygge diagrammer i 6 forskellige typer: linjediagrammer, bjælkediagrammer, radardiagrammer, polare områdediagrammer, pie og donutdiagrammer. Biblioteket er også opdelt i henhold til diagramtype, så dine sider er ikke slået ned med det, der ikke er nødvendigt. Det understøtter lydhørt design, og du kan nemt ændre variabler som farve eller animation for at tilpasse diagramgrænsefladen.
2. Chartist JS
Chartist JS er et godt bibliotek til at opbygge lydhørede diagrammer, der gør brug af SVG. Udover sin lydhørhed giver Chartist dig fleksibilitet ved at bruge klar adskillelse af bekymringer: stil med CSS og kontrol med JS. For at gøre tilpasningen nemmere er SASS-filerne inkluderet. Det store her er, at du har ubegrænsede muligheder for at animere dit diagram ved hjælp af Chartist animation API, SMIL, som giver dig ekstra animations muligheder.
3. C3 JS
C3 JS er et bibliotek til at opbygge diagrammer baseret på D3 JS. Det indpakker den nødvendige kode til at opbygge diagrammer med D3 JS, så du kan springe over til at skrive D3-koden og indtaste kun dine data. C3 leveres med en række API'er, som du nemt kan styre dine kort. For at tilpasse dit diagram skal du definere dine egne tilpassede stilarter til de givne CSS-klasser. Byg diagrammer fra enkle linjediagrammer til at måle diagrammer. Tjek denne side for at se, hvordan biblioteket fungerer.
4. Flot
Flot er et jQuery plguin til at oprette diagrammer med interaktive elementer som at slå en serie til eller fra, datapunktinteraktioner, panorering, zoomning og meget mere. Flot kommer med en række forskellige typer af diagramtyper, og hvis du vil have mere evne på dit diagram, er der nogle plugins, du kan bruge så godt. Diagrammerne fungerer fint med browsere, der understøtter HTML canvases.
5. EChart
Echart er et utrolig omfattende bibliotek fra Kina, som understøtter flere diagramtyper, kan behandle store data (opstiller op til 200.000 datapunkter på et kartesisk diagram), har roaming-skalaer, evnen til nemt at udtrække, integrere og udveksle data mellem flere diagrammer, så en til at let skifte fra en datatype til en anden, og meget mere.
6. Peity
Peity vil tilføje et mini diagram til din webside. Det er et lille jQuery-plugin, der omdanner et element til en mini svg linje, bar, donut eller cirkeldiagram. Du skal bare oprette et element og give en værdi som 1/5 og ring et opkald peity ( 'pie') på det element for at lave et mini-cirkeldiagram. For eksempel at oprette et donut diagram, der kun er en femtedel fremhævet, her er HTML:
1/5
Du kan tilpasse diagramfarven, radius, bredde og højde, men som standard vises den i lille størrelse.
7. DC JS
DC JS har ligheder med C3 JS i forhold til den anvendte motor; de begge bruger D3 biblioteket til at gøre diagrammer i SVG. DC JS er udviklet til at hjælpe dig med at visualisere data og analyse til browsere og til mobile enheder. Da det udnytter D3 JS, giver det dig mulighed for at tilføje brugerinteraktion til dit diagram. DC JS er et kraftfuldt bibliotek til at oprette diagrammer fra simple til høje kompleksiteter.
8. Google Chart
Du kan oprette interaktive diagrammer og dataredskaber ved hjælp af Google Visualization API via Google Chart. Der er diagramgallerier for at tjekke Google Charts data visualiseringsfunktioner. For at starte, skal du indlejre simpelt JavaScript til din webside for at indlæse de Google Chart-biblioteker, du har brug for. Indtast derefter de data, du vil have vist, og foretag nogle tilpasninger via diagramindstillingerne. Lav endelig et diagramobjekt med et id, og lav din på din webside NVD3 er et sæt genanvendelige diagrammer og diagramkomponenter, der er bygget med D3 JS. Dette bibliotek er derfor en 'skabelon', der vil gøre det nemmere for dig at opbygge diagrammer. Tjek de mange stikdiagrammer, der er bygget med NVD3 her.
9. NVD3
Læs nu: JavaScript-biblioteker til at oprette interaktive og tilpassede kort
