Dette er de bedste JavaScript-diagrambiblioteker i 2019

Først en kort historie:

Efterhånden som dataindsamlingen og -brugen fortsætter med at stige eksponentielt, bliver behovet for at visualisere disse data vigtigere. Udviklere søger at konsolidere millioner af databaseposter i smukke diagrammer og dashboards, som mennesker hurtigt og intuitivt kan fortolke.

Datavisualiseringsteknologien er fortsat forbedret i løbet af det sidste årti, og mange avancerede kortbiblioteker er nu tilgængelige for forbrugerne. I de tidlige 2000'ere var generering af kort domineret af bitmap-diagrammer på serversiden. Plugins som Flash og Silverlight tilbød en mere interaktiv kortoplevelse, men med en tung afgift på downloadhastighed, batterilevetid og systemressourcer.

Med eksplosionen af ​​mobil- og tabletbrug blev plugins ikke længere understøttet på større platforme, og udviklere måtte skifte til åbne klientside-teknologier, der kunne køre overalt. Samtidig bragte fremkomsten af ​​meget høje opløsningsskærme og mere almindelig zoom gennem berøringsbevægelser frem til opløsningsuafhængige vektordiagrammer.

Indtast den aktuelle æra med datavisualisering domineret af JavaScript og SVG (skalerbar vektorgrafik). Diagrammer køres nu på alle browsere uden specielle plugins, understøtter interaktivitet og animationer og ser skarpe ud, selv på enheder med den højeste opløsning. Gennemgang af over 50 visualiseringsbiblioteker skete disse 9 produkter ud:

D3.js

D3.js er et meget omfattende og kraftfuldt JavaScript JavaScript-bibliotek. Det giver dig mulighed for at binde vilkårlige data til en Document Object Model (DOM) og derefter anvende datadrevne transformationer til dokumentet.

D3 går langt ud over typiske kortbiblioteker, herunder mange andre mindre tekniske moduler som akser, farver, hierarkier, konturer, lettelse, polygoner og mere. Alt dette giver en stejl indlæringskurve.

At prøve at oprette et simpelt diagram kan være kompliceret. Alle elementer inklusive akser og andre diagramelementer skal defineres eksplicit. Mange eksempler viser, hvordan CSS kan bruges til at style diagramelementer. Ingen kortbaserede funktioner gælder automatisk. Hvis du ønsker at komme ind i ukrudtet og bruge kreativitet til fuldt ud at kontrollere hvert element, er det det bedste valg. Når man arbejder døgnet rundt for at imødekomme kravene til datavisualisering, er det måske ikke det bedste valg fra bunden.

D3.js kan være en byggesten til et kortbibliotek. Udviklere har brugt D3 for at gøre det lettere at bruge kortløsninger, der forbruger det, såsom NVD3.

D3.js er open source og gratis at bruge.

JSCharting

JSCharting-diagrambibliotek understøtter et stort antal diagramtyper, herunder kort, gantt, lager og andre, der ofte kræver separate biblioteker at bruge. Det inkluderer indbyggede kort over alle verdenslande og et bibliotek med SVG-ikoner. En række enkeltstående mikrokort kan gengives i ethvert diagrammærke eller i ethvert div-element på en side. UIItems (UiItems) er også inkluderet, hvilket giver mulighed for rigere interaktive diagrammer. Det er nemt at kontrollere data eller visualiseringsvariabler i realtid, og diagrammer kan eksporteres til SVG-, PNG-, PDF- og JPG-formater.

Galleriet er opdelt i diagramtype og funktionseksempler. Kortstilen er poleret og giver nogle rene udseende kort. De overordnede billeder giver en ren og professionel kortoplevelse.

Inkluderede prøver bruger et konfigurationsobjekt til at tilpasse diagrammer. Indstillingerne til oprettelse og kontrol af diagramtyper er meget enkle at bruge. Få egenskabsindstillinger er nødvendige for at specificere mere komplekse diagramtyper, og JSCharting har stærke og dynamiske standarder, hvilket betyder, at det automatisk forsøger at vælge de bedste indstillinger til scenarierne.

Dokumentationen indeholder mange tutorials og grundige API-egenskabsbeskrivelser. Mange egenskaber inkluderer eksempler på brug og eksempler på links.

JSCharting er gratis til ikke-kommerciel og personlig brug og tilbyder også kommercielle licensmuligheder, der inkluderer alle diagramtyper og produkter til et enkelt gebyr.

Highcharts

Highcharts er et populært JavaScript-kortbibliotek, der bruges af mange af verdens største virksomheder. Diagrammer genereres ved hjælp af SVG og fallback til VML for bagudkompatibilitet hele vejen til IE6 / IE8. Demokortene demonstrerer et ret rigt funktionssæt, men wow ikke visuelt. Generel dokumentation inkluderer tutorials til mange relevante emner, og API-dokumentationen er grundig.

Diagrammet bruger konfigurationsindstillinger til at oprette diagrammer, og API'en er nem at bruge.

Highcharts er gratis til ikke-kommerciel og personlig brug. Kommerciel licensering er påkrævet til anden brug, og lager, kort og gantt-kort er licenseret separat.

amCharts

amCharts har for nylig frigivet deres version 4, der tilføjer en stærk SVG-animationsmotor, der gør det muligt at oprette filmlignende scener.

Demokortene ser meget flot ud. De fleste demoer tilbyder et antal paletter og et skydergrænseflade til at justere diagramvariabler i realtid. Dokumentation inkluderer mange selvstudier og fulde API-egenskabsbeskrivelser.

Oprettelse af et diagram føles lidt anderledes end den konfigurationsbaserede tilgang og bruger i stedet en mere deklarativ API. Det kræver lidt mere kode for at konfigurere diagrammer, men giver en bedre kodefærdiggørelsesoplevelse.

amCharts tilbyder en gratis licens med mærkekort og betalte licenser til anden brug.

Google-diagrammer

Google-diagrammer er effektive og nemme at bruge.

Prøvekortene ser rene ud og er lette at se på. Galleriet og det udvidede galleri viser mange diagramtyper, men at trykke på hamburger-menuen afslører flere typer (som kalender), der ikke vises på disse gallerilister.

Hver diagramtype har en dedikeret tutorial med liveeksempler. Selvstudierne inkluderer kode til de relaterede funktioner og API-lister. Dette er en behagelig oplevelse at komme i gang med et nyt diagrambibliotek.

Diagrammer tilpasses ved hjælp af objektet til konfigurationsindstillinger. Datasæt udfyldes ved hjælp af en DataTable-klasse, som kan forbruges af alle diagrammer. Hver diagramtype har unikke indstillinger, der er anført i de typespecifikke selvstudier. Navn på ejendom er standardiseret, og mange indstillinger fungerer på tværs af alle typer.

Google-diagrammer er gratis, men der er en advarsel. Det er en webservice og kan ikke hostes lokalt. Tidligere har Google trukket API'er tilbage, så hvis din brug er missionskritisk, kan du vælge en anden mulighed.

ZingChart

ZingChart tilbyder mange diagramtyper og integreres med vinkel-, reagerings- og andre rammer. Det har et stærkt funktionssæt med mange tilpasningsmuligheder.

Demokortene viser en række stylingtemaer, hvoraf nogle ser bedre ud end andre, men mulighederne for at style dem efter behov er der. Demoer demonstrerer ikke alle de tilgængelige diagramtyper.

Dokumentation inkluderer tutorials til alle de tilgængelige typer, et stort antal funktioner og fuld API-liste.

ZingChart bruger konfigurationsindstillinger til at tilpasse diagrammer. Prøver inkluderer mange egenskabsindstillinger såsom skrifttypestyling. Disse kan komme i vejen for at forstå, hvilke indstillinger der kræves for et givet diagram.

ZingChart kan bruges gratis med branding. Betalt licensering er tilgængelig til ikke-mærket brug.

FusionCharts

FusionCharts har eksisteret i mange år startende som et Flash-baseret diagram-plugin. Det er et robust diagramvisualiseringsbibliotek. Det understøtter mange dataformater, herunder XML, JSON og JavaScript, fungerer i moderne browsere og er bagudkompatibel tilbage til IE6. Mange JavaScript-rammer og programmeringssprog på serversiden understøttes også.

Diagramgalleriet indeholder et stort antal eksempler, og de har et rent visuelt udseende.

Dokumentation inkluderer gode API-beskrivelser og eksempler på hver diagramtype. Konfigurationsegenskaberne er grupperet efter opgaver og diagramfunktioner.

Diagrammer oprettes ved hjælp af konfigurationsbaserede indstillinger og er relativt nemme at bruge. Listen over egenskaber kan være lang, når man graver dybere ned i API'en. Alle konfigurationsegenskaber er lave, f.eks. {ChartLeftMargin, showAlternateHGridColor}. Det virker som et forsøg på at forbedre færdiggørelsen af ​​koden.

FusionCharts er gratis til personlig brug med chart branding. Betalt licensering er tilgængelig til ikke-mærket og kommerciel brug.

KOOLCHART

KoolChart er et HTML 5-lærred-baseret JavaScript-kortbibliotek. Et kortlægnings- og gitterprodukt er også tilgængeligt.

Deres nye v5-udgave inkluderer et mere interaktivt funktionssæt og opdateret styling. Det visuelle er rent og moderne. Brug af lærred giver bedre ydeevne på bekostning af at være rasterbaseret.

Prøverne bruger en strengbaseret XML til at anvende kortindstillinger, der synes mindre praktiske end andre tilgange. Disse indstillinger ligner HTML5, men indstilles gennem en JavaScript-streng.

API'en er veldokumenteret med eksempeldiagrammer for hver ejendom. En PDF-manual på 173 sider er også tilgængelig.

En prøveperiode på to måneder er tilgængelig til evaluering. Licensering er påkrævet, efter at prøveperioden udløber.

Chart.js

Chart.js er et open source JavaScript-bibliotek, der understøtter 8 diagramtyper. Det er et lille js-bibliotek på kun 60 kb. Typerne inkluderer linjediagrammer, søjlediagrammer, områdediagrammer, radar, cirkeldiagrammer, boble, spredningsdiagrammer og blandet. En tidsserie understøttes også. Det bruger lærredselement til gengivelse og er lydhør ved vinduesændring for at opretholde skalaens granularitet. Den er bagudkompatibel med IE9. Polyfills er også tilgængelige til at arbejde med IE7.

Prøvevisualerne ser ret moderne ud og inkluderer indledende animationer, når de tegner for første gang. Det animeres problemfrit, når der tilføjes serier eller datapunkter i realtid. Diagramindstillinger kan ændres efter, og kald af en opdateringsfunktion () tegner diagrammet igen.

Eksempel på kildekode vises ikke på webstedsgalleriet, men er tilgængelig i GitHub-repoen. Konfigurationsmuligheder bruges til at oprette og ændre diagrammer. Option API'et er rent og intuitivt.

Dokumentationen er grundig og inkluderer tutorials med egenskab API og kodestykke.

Chart.js er et open source-bibliotek og gratis at bruge til personlig og kommerciel brug, hvilket er et plus. Det begrænsede antal typer kan være et problem for mere avancerede dashboardkrav.

Konklusion

Økosystemet med JavaScript-kortlægningsbiblioteker har udviklet sig betydeligt i løbet af det sidste årti. I dag er der et stort antal kortlægningsprodukter, der opfylder meget forskellige krav, og som betjener en bred vifte af projekter gennem hundreder af korttyper. De fleste biblioteker tilbyder en gratis prøveversion eller branded version, der giver dig mulighed for at evaluere kortets effektivitet med dine egne data, indlæsning og projektkompleksitet.

Det er let for de fleste kortbiblioteker at håndtere enkle kuraterede datasæt og statiske visualiseringer. Dog kan diagrammer ikke altid håndtere ting problemfrit, når dynamiske data i den virkelige verden visualiseres. Der kan kræves mere arbejde for at justere og arrangere elementer, så diagrammerne vises korrekte, og denne manuelle tilpasning kan bryde, når nye dynamiske data visualiseres.

For at vælge den bedste JS-diagramløsning til dine unikke behov anbefaler jeg at teste dine egne data mod et par af de ovennævnte biblioteker for at sikre en ideel pasform til dine nuværende og fremtidige projekter.