Å legge til diagrammer i brukergrensesnittet ditt hjelper deg å fortelle historier på en visuelt overbevisende måte. Men hvordan oppnår du dette uten å skrive lang kode fra bunnen av? Det er lett. Alt du trenger er et passende JavaScript-diagrambibliotek for å gjøre dataene dine om til ferdige plott.
Enten du ønsker å lage sanntidsdiagrammer eller trenger å vise brukerne dine en historisk trend, er dette de beste JavaScript-bibliotekene du kan bruke.
Chart.js er et JavaScript-bibliotek med åpen kildekode for å lage HTML-baserte diagrammer. Det er et av de enkleste visualiseringsbibliotekene for JavaScript, og det har støtte for linje-, søyle-, scatter-, smultring-, kake-, radar-, område- og boblediagrammer.
En av dens unike funksjoner er dens evne til å animere og tilpasse diagrammer for å passe til opplevelsen du ønsker for brukergrensesnittet ditt (UI). Chart.js er også ganske enkel å integrere. Enten du skriver vanilla JavaScript eller bruker en front-end stack som React eller Angular, alt du trenger å gjøre er å installere Chart.js som en pakke eller kalle det fra CDN.
I slekt:Hvordan lage et diagram med Chart.js
Til syvende og sist aksepterer den en X- og Y-matrise, og hele koden kjører i en enkel objektlogikk for å gjengi diagrammet til front-end i HTML-lerret basert på dataene den leser. Og du kan kombinere diagrammer hvis du vil.
Her er et hendig JavaScript-diagrambibliotek for React-programmerere. Bygget med en kombinasjon av React og D3.js, bruker Recharts skalerbar vektorgrafikk (SVG) for å gjengi diagrammer primært i React. Så hvis du bruker Vanilla JavaScript, vil du kanskje vurdere andre kartbibliotekalternativer.
Biblioteket støtter 11 karttyper. Og i tillegg til å være en React-komponent i seg selv, er hver del av et gjengitt diagram i Recharts, inkludert forklaringen, aksene og mer, en uavhengig komponent i en forelder.
Følgelig kan du tilpasse hver komponent ved å manipulere rekvisitter som du vil. Dette betyr at du enkelt kan koble og koble deler av diagrammet fra helheten uten å påvirke andre React-komponenter.
CanvasJS er allsidig, rask, enkel og har opptil 30 diagramtyper som er gjengitt i HTML divs heller enn et lerret. Den er også svært tilpassbar, med støtte for animasjon og diagramkombinasjoner. En av dens unike funksjoner lar deg endre diagramtemaet ditt dynamisk i brukergrensesnittet.
I tillegg til JavaScript front-end-rammeverk, støtter den diagramgjengivelse i serversideteknologier som PHP, ASP.NET og MVC-stabler. Det gir også enkle løsninger i dokumentene for forskjellige scenarier.
Biblioteket kommer til og med fra en profesjonell vinkel som et dashbordverktøy for å visualisere data fra ulike perspektiver. Det er enkelt å plotte aksjerelaterte diagrammer med canvasJS. Og til syvende og sist har den separate CDN-er for aksje- og generelle diagrammer.
Hvis du ikke har noe imot å bli skitne til å lage en SVG og deklarere akser fra bunnen av før du plotter selve diagrammet, kan det være lurt å sjekke ut D3.js for å tegne grafer på nettstedet ditt. Selv om det er mer detaljert enn andre JavaScript-diagrambibliotek, gir det deg et bedre grep om kartområdet og dets innhold.
Det faktum at det er kraftig og fungerer på et lavere nivå enn andre JavaScript-diagrambibliotek, gjør det til et ideelt verktøy når ytelse er det høyeste målet. Dens API tilbyr innebygde CSS-attributter som lar deg style diagrammene dine som du vil.
Og fordi du har kontroll over SVG-beholderen, kan du designe graftemaet slik at det passer UI-designet ditt. D3.js kan være teknisk når du starter. Til syvende og sist, når du kjenner deg rundt det, kan du plotte omtrent alle typer diagram med det.
Google Charts bruker HTML5 og SVG til å skrive tilpassede grafer til Document Object Model (DOM). Den er enkel å bruke og gir nok eksempler i dokumentasjonen til at du ikke vil føle deg tapt underveis. Den tilbyr også en mulighet for å koble til ulike datakilder som støtter kartverktøyprotokollen.
I slekt:Gratis HTML-maler for enkelt å lage raske nettsteder
Den gir en DataTable-klasse som gjør det enkelt å dele, filtrere og endre dataene dine i separate arrayer av kolonner og rader. Biblioteket fjerner også behovet for ekstra beregning mens du koder et diagram. Du trenger for eksempel ikke å beregne prosentfordelingen av dataene dine mens du plotter et sektordiagram. Den gjør dette for deg.
Hver diagramtype i Google Charts kommer som en JavaScript-klasse, og du kan enkelt tilordne dataobjektet og tilpasningsalternativene til separate variabler. Derfor lar den deg sende dem separat til hovedkartklassen. Faktisk er logikken ryddig og omfattende.
ApexCharts.js er et åpen kildekode JavaScript-bibliotek for å gjengi responsive diagrammer til brukergrensesnittet. Du vil finne det vennlig å bruke, spesielt med dens omfattende dokumentasjon.
ApexCharts.js har fått sitt rykte for å ha tilpasningsalternativer som lar deg finjustere diagrammene dine for å tilpasse seg ulike skjermstørrelser uten å bekymre deg for ekstra styling. Den støtter også mange av diagramtypene som brukes i daglige visualiseringer.
Dette biblioteket fungerer også bra med flere diagrammer. Å kombinere forskjellige diagramtyper i et enkelt rutenett er en av dens sterke sider.
Chartist.js er et åpen kildekode-prosjekt som kommer fra misnøyen til dets bidragende fellesskap i andre JavaScript-diagrambibliotek. Den bruker kombinasjonen av innebygd SVG, CSS og JavaScript for å tegne, style, konfigurere og til slutt gjengi diagrammer til DOM.
Dette kartbiblioteket har også forskjellige typer diagrammer som mange andre biblioteker tilbyr. Chartists.js har sterk støtte for CSS-animasjon og respons. Derfor tilpasser kartutgangene seg dynamisk basert på skjermstørrelse.
Selv om animasjonseffektene er unike, kan det være vanskelig for nybegynnere å jobbe med dette biblioteket. Ikke desto mindre vil du finne de omfattende og redigerbare eksemplene i dokumentasjonen som er nyttige for enhver tilpasning eller animasjoner du ønsker å legge til.
Enten du jobber med en frontend JavaScript-stabel, TypeScript eller vanlig JavaScript, er billboard.js enkel og verdt å bruke. Det er et D3 v4-basert JavaScript-diagrambibliotek.
Biblioteket støtter 21 diagramtyper og har omfattende eksempler for hver av dem i API-dokumentene. Dette gjør det enkelt å lære og pålitelig for å lage visualiseringer raskt i brukergrensesnittet.
I slekt:JavaScript-rammer verdt å lære
All koden du trenger for å lage et diagram med billboard.js ligger i et objektlag, og datainnsetting er enkelt siden du kan dele data i separate arrays for å tegne så mange grafer du vil.
Fortell historier på nettstedet ditt med JavaScript
Åpen kildekode-verktøy gjør programmering raskt og enkelt i dagens tid. Kartpresentasjon er en av stadiene i prosjektet ditt hvor du kan spare mye tid ved å bruke et av disse eksisterende JavaScript-diagrambibliotekene.
Dessuten har de den ekstra fordelen av å gjøre appen din mer modulær og lett uten å få deg til å vikle hodet rundt å skrive ekstra skript.
Å plotte diagrammer med JavaScript-rammeverk er toppen av isfjellet for språket på nettet. Det er utallige prosjekter der ute som venter på å bli opprettet. Lykke til med hacking!
JavaScript er et viktig programmeringsspråk å lære. Hvis du er ny på det, her er noen prosjekter for å hjelpe deg med å øke kunnskapen din.
Les Neste
- Programmering
- JavaScript
- Webutvikling
- Programmering
Idowu er lidenskapelig opptatt av alt smart teknologi og produktivitet. På fritiden leker han med koding og bytter til sjakkbrettet når han kjeder seg, men han elsker også å bryte ut av rutinene en gang i blant. Hans lidenskap for å vise folk veien rundt moderne teknologi motiverer ham til å skrive mer.
Abonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis e-bøker og eksklusive tilbud!
Klikk her for å abonnere