Dette er de beste JavaScript-kartbibliotekene for 2019

Først en kort historie:

Når datainnsamling og bruk fortsetter å øke eksponentielt, blir behovet for å visualisere disse dataene viktigere. Utviklere søker å konsolidere millioner av databaseposter i vakre diagrammer og dashbord som mennesker raskt og intuitivt kan tolke.

Datavisualiseringsteknologi har fortsatt å forbedre det siste tiåret, og mange avanserte kartbiblioteker er nå tilgjengelig for forbrukere. På begynnelsen av 2000-tallet ble kartgenerering dominert av bildekartdiagrammer på serversiden. Plugins som Flash og Silverlight ga en mer interaktiv kartopplevelse, men med mye toll på nedlastningshastighet, batterilevetid og systemressurser.

Med eksplosjonen av bruk av mobil og nettbrett ble ikke lenger plugins støttet på store plattformer, og utviklere måtte skifte til åpne teknologier for klientsiden som kunne kjøres overalt. På samme tid førte tilkomsten av skjermer med veldig høy oppløsning og vanligere zooming gjennom berøringsbevegelser uavhengige vektordiagrammer i høysetet.

Gå inn i den nåværende tiden med datavisualisering dominert av JavaScript og SVG (Scalable Vector Graphics). Diagrammer kjøres nå på alle nettlesere, uten spesielle plugins, støtter interaktivitet og animasjoner og ser skarpe ut, selv på enheter med høy oppløsning. Disse 9 produktene gjennomgikk over 50 visualiseringsbiblioteker:

D3.js

D3.js er et veldig omfattende og kraftig JavaScript-bibliotek for grafikk. Den lar deg binde vilkårlige data til en Document Object Model (DOM) og deretter bruke datadrevet transformasjon på dokumentet.

D3 går langt utover typiske kartbiblioteker, inkludert mange andre mindre tekniske moduler som akser, farger, hierarkier, konturer, lettelser, polygoner og mer. Alt dette gir en bratt læringskurve.

Det kan være komplisert å prøve å lage et enkelt diagram. Alle elementer inkludert aksene og andre diagramartikler må defineres eksplisitt. Mange eksempler viser hvordan CSS kan brukes til å utforme diagramelementer. Ingen kartbaserte funksjoner gjelder automatisk. Hvis du vil komme inn i ugresset og bruke kreativitet for å kontrollere hvert enkelt element, er det det beste valget. Arbeider mot klokken for å oppfylle kravene til datavisualisering prosjekt, kan det ikke være det beste valget fra bunnen av.

D3.js kan være en byggestein for et kartbibliotek. Utviklere har brukt D3 for å gjøre det enklere å bruke kartløsninger som bruker den, for eksempel NVD3.

D3.js er åpen kildekode og gratis å bruke.

JSCharting

JSCharting kartbibliotek støtter et stort antall karttyper, inkludert kart, gantt, lager og andre som ofte krever separate biblioteker for å bruke. Det inkluderer innebygde kart over alle verdens land, og et bibliotek med SVG-ikoner. En pakke med frittstående mikrodiagrammer kan gjengis i etikettdiagrammer eller i et hvilket som helst div-element på en side. Brukergrensesnittkontroller (UiItems) er også inkludert som gir rom for interaktive diagrammer. Det er enkelt å kontrollere data eller visualiseringsvariabler i sanntid og diagrammer kan eksporteres til SVG-, PNG-, PDF- og JPG-format.

Galleriet er delt inn i karttype og funksjonseksempler. Kartstilen er polert og gir noen rene sjøkart. Det samlede visuelle gir en ren og profesjonell kartopplevelse.

Inkluderte prøver bruker et konfigurasjonsobjekt for å tilpasse diagrammer. Innstillingene for å opprette og kontrollere diagramtyper er veldig enkle å bruke. Få eiendomsinnstillinger er nødvendige for å spesifisere mer komplekse diagramtyper, og JSCharting har sterke og dynamiske standardverdier, noe som betyr at den prøver å velge de beste innstillingene for scenariene automatisk.

Dokumentasjonen inneholder mange opplæringsprogrammer og grundige beskrivelser av API-egenskaper. Mange egenskaper inkluderer eksempler på bruk og eksempler på lenker.

JSCharting er gratis for ikke-kommersiell og personlig bruk og tilbyr også kommersielle lisensalternativer som inkluderer alle karttyper og produkter for en enkelt avgift.

Highcharts

Highcharts er et populært JavaScript-kartbibliotek som brukes av mange av verdens største selskaper. Diagrammer genereres ved hjelp av SVG og tilbakefall til VML for bakoverkompatibilitet helt til IE6 / IE8. Demokartene viser et ganske rikt funksjonssett, men wow ikke visuelt. Generell dokumentasjon inneholder veiledninger for mange relevante emner, og API-dokumentasjonen er grundig.

Diagrammet bruker konfigurasjonsalternativer for å lage diagrammer, og API-en er enkel å bruke.

Highcharts er gratis for ikke-kommersiell og personlig bruk. Kommersiell lisensiering er nødvendig for annen bruk og lager, kart og gantt-lisenser er lisensiert separat.

amCharts

amCharts har nylig gitt ut versjonen 4 som legger til en sterk SVG-animasjonsmotor som gjør det mulig å lage filmlignende scener.

Demokartene ser veldig fine ut. De fleste demoer tilbyr et antall paletter og en glidebrytergrensesnitt for å justere diagramvariabler i sanntid. Dokumentasjon inkluderer mange opplæringsprogrammer og fullstendige beskrivelser av API-egenskaper.

Å lage et diagram føles litt forskjellig fra den konfigurasjonsbaserte tilnærmingen, og bruker i stedet et mer deklarativt API. Det krever litt mer kode for å konfigurere diagrammer, men gir en bedre opplevelse av kodeutførelse.

amCharts tilbyr en gratis lisens med merkede diagrammer og betalte lisenser for annen bruk.

Google-diagrammer

Google-diagrammer er kraftige og enkle å bruke.

Eksempeldiagrammene ser rene ut og er enkle på øynene. Galleriet og det utvidede galleriet viser mange karttyper, men å trykke på hamburgermenyen viser flere typer (som kalender) som ikke vises i disse gallerilistene.

Hver diagramtype har en egen veiledning med levende eksempler. Opplæringen inneholder kode for de relaterte funksjonene og API-oppføringer. Dette er en hyggelig opplevelse å komme i gang med et nytt kartbibliotek.

Diagrammer tilpasses ved hjelp av konfigurasjonsalternativets objekt. Datasett fylles ut med en datatabellklasse som kan forbrukes av alle diagrammer. Hver diagramtype har unike alternativer som er oppført i typespesifikke opplæringsprogrammer. Navn på eiendommer er standardisert og mange alternativer fungerer på tvers av alle typer.

Google-diagrammer er gratis, men det er en advarsel. Det er en webtjeneste og kan ikke hostes lokalt. I det siste har Google gått av med API-er, så hvis bruken din er avgjørende, kan det være lurt å velge et annet alternativ.

ZingChart

ZingChart tilbyr mange karttyper og integreres med vinkel-, reaksjons- og andre rammer. Den har et sterkt funksjonssett med mange tilpasningsalternativer.

Demokartene viser en rekke stylingstemaer, noen av dem ser bedre ut enn andre, men alternativene for å style dem etter behov er der. Demoer demonstrerer ikke alle tilgjengelige diagramtyper.

Dokumentasjon inkluderer opplæringsprogrammer for alle tilgjengelige typer, et godt antall funksjoner og full API-oppføring.

ZingChart bruker konfigurasjonsalternativer for å tilpasse diagrammer. Eksempler inkluderer mange eiendomsinnstillinger, for eksempel fontstyling. Disse kan komme i veien for å forstå hvilke innstillinger som kreves for et gitt diagram.

ZingChart kan brukes gratis med merkevarebygging. Betalt lisensiering er tilgjengelig for ikke-merket bruk.

FushionCharts

FusionCharts har eksistert i mange år som et Flash-basert kart-plugin. Det er et robust kartvisualiseringsbibliotek. Den støtter mange dataformater inkludert XML, JSON og JavaScript, fungerer i moderne nettlesere og er bakoverkompatibel tilbake til IE6. Mange JavaScript-rammer og programmeringsspråk på serversiden støttes også.

Kartgalleriet inneholder et stort antall eksempler, og de har et rent visuelt utseende.

Dokumentasjon inneholder gode API-beskrivelser, og eksempler på hver diagramtype. Konfigurasjonsegenskapene er gruppert etter oppgaver og kartfunksjoner.

Diagrammer er laget ved hjelp av konfigurasjonsbaserte alternativer og er relativt enkle å bruke. Listen over egenskaper kan være lang når du graver dypere i API. Alle konfigurasjonsegenskaper er grunne, for eksempel {chartLeftMargin, showAlternateHGridColor}. Det virker som et forsøk på å forbedre fullføringen av koden.

FusionCharts er gratis for personlig bruk med merkevarebygging. Betalt lisensiering er tilgjengelig for umerket og kommersiell bruk.

KOOLCHART

KoolChart er et HTML 5 lerretbasert JavaScript-kartbibliotek. Et kartleggings- og rutenettprodukt er også tilgjengelig.

Deres nye v5-utgivelse inkluderer et mer interaktivt funksjonssett og oppdatert styling. Visualene er rene og moderne. Bruken av lerret gir bedre ytelse på bekostning av å være rasterbasert.

Prøvene bruker en strengbasert XML for å anvende diagramalternativer som virker mindre praktiske enn andre tilnærminger. Disse alternativene ser ut som HTML5, men er satt gjennom en JavaScript-streng.

APIen er godt dokumentert med eksempletabeller for hver eiendom. En PDF-manual for 173 sider er også tilgjengelig.

En prøveperiode på to måneder er tilgjengelig for evaluering. Lisensiering kreves etter at prøveperioden er utløpt.

Chart.js

Chart.js er et open source JavaScript-bibliotek som støtter 8 karttyper. Det er et lite js-bibliotek på bare 60 kb. Typer inkluderer linjediagrammer, stolpediagrammer, områdekart, radar, kakediagrammer, boble, spredte plott og blandet. En tidsserie støttes også. Den bruker lerretselement for gjengivelse og reagerer på størrelse på vindu for å opprettholde granulitet i skalaen. Den er bakoverkompatibel med IE9. Polyfiller er tilgjengelige for å jobbe med IE7 også.

Eksempelvisualene er ganske moderne og inkluderer første animasjoner når du tegner for første gang. Det animeres jevnt når du legger til serier eller datapunkter i sanntid. Kartalternativer kan endres etter og kalle en oppdateringsfunksjon () tegner diagrammet på nytt.

Eksempel på kildekode vises ikke nettstedets galleri, men er tilgjengelig i GitHub-repo. Konfigurasjonsalternativer brukes til å opprette og endre diagrammer. Alternativer API er rent og intuitivt.

Dokumentasjonen er grundig og inneholder opplæringsprogrammer med API og kodeutdrag for eiendommer.

Chart.js er et åpen kildekodebibliotek og gratis å bruke til personlig og kommersiell bruk som er et pluss. Det begrensede antallet typer kan være et problem for mer avanserte krav til dashbord.

Konklusjon

Økosystemet for JavaScript-kartleggingsbiblioteker har utviklet seg betydelig det siste tiåret. I dag er det et stort antall kartleggingsprodukter som oppfyller svært forskjellige krav, og serverer et bredt spekter av prosjekter, men hundrevis av karttyper. De fleste biblioteker tilbyr en gratis prøveversjon eller merkevareversjon som lar deg evaluere kartets effektivitet med dine egne data, lasting og prosjektkompleksitet.

Det er enkelt for de fleste kartbiblioteker å håndtere enkle kuraterte datasett og statiske visualiseringer. Imidlertid kan det hende at ikke alltid diagrammer håndterer ting jevnt når dynamiske data fra virkeligheten blir visualisert. Mer arbeid kan være nødvendig for å justere og ordne elementer slik at diagrammer virker riktig og denne manuelle finjusteringen kan gå i stykker når nye dynamiske data blir visualisert.

For å velge den beste JS-kartløsningen for dine unike behov, anbefaler jeg å teste dine egne data mot et par av bibliotekene som er nevnt over for å sikre en ideell passform for nåværende og fremtidige prosjekter.