Dit zijn de beste JavaScript-kaartbibliotheken voor 2019

Eerst een korte geschiedenis:

Nu het verzamelen en gebruiken van gegevens exponentieel toeneemt, wordt de noodzaak om deze gegevens te visualiseren steeds belangrijker. Ontwikkelaars proberen miljoenen database-records te consolideren in prachtige grafieken en dashboards die mensen snel en intuïtief kunnen interpreteren.

De datavisualisatietechnologie is het afgelopen decennium verder verbeterd en veel geavanceerde kaartbibliotheken zijn nu beschikbaar voor consumenten. In het begin van de jaren 2000 werd het genereren van kaarten gedomineerd door bitmapgrafieken op de serverzijde. Plug-ins zoals Flash en Silverlight boden een meer interactieve kaartervaring, maar met een zware tol op downloadsnelheid, batterijlevensduur en systeembronnen.

Met de explosie van mobiel en tabletgebruik werden plug-ins niet langer ondersteund op grote platforms en moesten ontwikkelaars overstappen op client-technologieën die overal konden worden gebruikt. Tegelijkertijd brachten de komst van schermen met een zeer hoge resolutie en meer gebruikelijk zoomen door aanraakbewegingen resolutie onafhankelijke vectorgrafieken op de voorgrond.

Betreed het huidige tijdperk van datavisualisatie gedomineerd door JavaScript en SVG (Scalable Vector Graphics). Grafieken draaien nu op alle browsers, zonder speciale plug-ins, ondersteunen interactiviteit en animaties en zien er zelfs op de apparaten met de hoogste resolutie scherp uit. Met een beoordeling van meer dan 50 visualisatiebibliotheken, bleken deze 9 producten op te vallen:

d3.js

D3.js is een zeer uitgebreide en krachtige grafische JavaScript-bibliotheek. Hiermee kunt u willekeurige gegevens binden aan een Document Object Model (DOM) en vervolgens gegevensgestuurde transformaties op het document toepassen.

D3 gaat veel verder dan typische grafische bibliotheken, waaronder veel andere kleinere technische modules zoals assen, kleuren, hiërarchieën, contouren, versoepeling, polygonen en meer. Dit alles zorgt voor een steile leercurve.

Proberen om een ​​eenvoudige grafiek te maken kan ingewikkeld zijn. Alle elementen inclusief de assen en andere grafiekitems moeten expliciet worden gedefinieerd. Veel voorbeelden laten zien hoe CSS kan worden gebruikt om grafiekelementen op te maken. Geen op grafieken gebaseerde functies worden automatisch toegepast. Als je in het onkruid wilt duiken en creativiteit wilt gebruiken om elk element volledig te beheersen, is dit de beste keuze. Tegen de klok in werken om te voldoen aan de vereisten van het datavisualisatieproject, is het misschien niet de beste keuze vanaf nul.

D3.js kan een bouwsteen zijn voor een kaartbibliotheek. Ontwikkelaars hebben D3 gebruikt om het gemakkelijker te maken om grafiekoplossingen te gebruiken die het gebruiken, zoals NVD3.

D3.js is open source en gratis te gebruiken.

JSCharting

JSCharting-kaartbibliotheek ondersteunt een groot aantal kaarttypen, waaronder kaarten, gantt, aandelen en andere waarvoor vaak afzonderlijke bibliotheken nodig zijn. Het bevat ingebouwde kaarten van alle wereldlanden en een bibliotheek met SVG-pictogrammen. Een reeks zelfstandige microdiagrammen kan worden weergegeven in elk diagramlabel of in elk div-element op een pagina. UI-besturingselementen (UiItems) zijn ook inbegrepen voor rijkere interactieve grafieken. Het is eenvoudig om gegevens of visualisatievariabelen in realtime te beheren en grafieken kunnen worden geëxporteerd naar de formaten SVG, PNG, PDF en JPG.

De galerij is verdeeld in grafiektype en functievoorbeelden. De grafiekstijl is gepolijst en levert enkele strak ogende grafieken op. De algehele visuals bieden een schone en professionele kaartervaring.

Opgenomen voorbeelden gebruiken een configuratieobject om grafieken aan te passen. De instellingen voor het maken en beheren van grafiektypen zijn zeer eenvoudig te gebruiken. Er zijn weinig eigenschappeninstellingen nodig om complexere grafiektypen op te geven en JSCharting heeft sterke en dynamische standaardwaarden, wat betekent dat het probeert automatisch de beste instellingen voor de scenario's te kiezen.

De documentatie bevat veel zelfstudies en grondige beschrijvingen van API-eigenschappen. Veel eigenschappen omvatten voorbeeldgebruik en voorbeeldlinks.

JSCharting is gratis voor niet-commercieel en persoonlijk gebruik en biedt ook commerciële licentie-opties die alle kaarttypen en producten voor een enkele vergoeding omvat.

Highcharts

Highcharts is een populaire JavaScript-kaartbibliotheek die wordt gebruikt door veel van 's werelds grootste bedrijven. Grafieken worden gegenereerd met behulp van SVG en fallback naar VML voor achterwaartse compatibiliteit tot IE6 / IE8. De demokaarten laten een redelijk rijke functieset zien, maar zien er niet visueel uit. Algemene documentatie bevat tutorials voor veel relevante onderwerpen en de API-documentatie is grondig.

De grafiek gebruikt configuratie-opties om grafieken te maken en de API is eenvoudig te gebruiken.

Highcharts is gratis voor niet-commercieel en persoonlijk gebruik. Commerciële licenties zijn vereist voor ander gebruik en aandelen-, kaart- en gantt-kaarten worden afzonderlijk gelicentieerd.

amCharts

amCharts heeft onlangs hun versie 4 uitgebracht die een krachtige SVG-animatie-engine toevoegt waarmee filmachtige scènes kunnen worden gemaakt.

De demokaarten zien er erg mooi uit. De meeste demo's bieden een aantal paletten en een gebruikersinterface om de variabelen in realtime aan te passen. Documentatie bevat veel tutorials en volledige API-beschrijvingen van eigenschappen.

Het maken van een grafiek voelt iets anders dan de configuratie-gebaseerde aanpak en gebruikt in plaats daarvan een meer declaratieve API. Het vereist iets meer code om grafieken te configureren, maar biedt een betere code-voltooiing.

amCharts biedt een gratis licentie met merkdiagrammen en betaalde licenties voor ander gebruik.

Google-grafieken

Google-kaarten zijn krachtig en gemakkelijk te gebruiken.

De voorbeeldgrafieken zien er schoon uit en zijn gemakkelijk voor de ogen. De galerij en de uitgebreide galerij tonen veel grafiektypen, maar als u op het hamburgermenu drukt, worden meer typen (zoals kalender) weergegeven die niet in deze galerijlijsten worden weergegeven.

Elk grafiektype heeft een speciale zelfstudie met live voorbeelden. De tutorials bevatten code voor de gerelateerde functies en API-lijsten. Dit is een prettige ervaring om aan de slag te gaan met een nieuwe kaartenbibliotheek.

Grafieken worden aangepast met behulp van het configuratieoptiesobject. Gegevenssets worden gevuld met behulp van een DataTable-klasse die door alle grafieken kan worden gebruikt. Elk grafiektype heeft unieke opties die worden vermeld in de typespecifieke zelfstudies. Naamgeving van eigenschappen is gestandaardiseerd en veel opties werken voor alle typen.

Google-kaarten zijn gratis, maar er is een voorbehoud. Het is een webservice en kan niet lokaal worden gehost. In het verleden heeft Google API's stopgezet, dus als uw gebruik missiekritisch is, wilt u misschien een andere optie kiezen.

ZingChart

ZingChart biedt vele grafiektypen en integreert met hoekige, reactieve en andere frameworks. Het heeft een sterke functieset met veel aanpassingsopties.

De demotabellen tonen een reeks stijlthema's, waarvan sommige er beter uitzien dan andere, maar de opties om ze naar wens te stylen zijn er. Demo's tonen niet alle beschikbare grafiektypen.

Documentatie bevat tutorials voor alle beschikbare types, een groot aantal functies en een volledige API-lijst.

ZingChart gebruikt configuratie-opties om grafieken aan te passen. Voorbeelden omvatten veel instellingen voor eigenschappen, zoals de stijl van het lettertype. Deze kunnen in de weg staan ​​om te begrijpen welke instellingen vereist zijn voor een gegeven grafiek.

ZingChart kan gratis worden gebruikt met branding. Betaalde licenties zijn beschikbaar voor gebruik zonder merknaam.

FushionCharts

FusionCharts bestaat al vele jaren, beginnend als een op Flash gebaseerde grafiekplug-in. Het is een robuuste visualisatiebibliotheek. Het ondersteunt vele gegevensindelingen, waaronder XML, JSON en JavaScript, werkt in moderne browsers en is achterwaarts compatibel tot IE6. Veel JavaScript-frameworks en server-side programmeertalen worden ook ondersteund.

De grafiekgalerij bevat een groot aantal voorbeelden en ze hebben een strak uiterlijk.

Documentatie bevat goede API-beschrijvingen en voorbeelden van elk grafiektype. De configuratie-eigenschappen zijn gegroepeerd op taken en grafiekfuncties.

Grafieken worden gemaakt met behulp van op configuratie gebaseerde opties en zijn relatief eenvoudig te gebruiken. De lijst met eigenschappen kan lang zijn als u dieper in de API graaft. Alle configuratie-eigenschappen zijn ondiep, zoals {chartLeftMargin, showAlternateHGridColor}. Het lijkt een poging om de voltooiing van de code te verbeteren.

FusionCharts is gratis voor persoonlijk gebruik met grafiek branding. Betaalde licenties zijn beschikbaar voor merkloos en commercieel gebruik.

KOOLCHART

KoolChart is een HTML 5 canvas-gebaseerde JavaScript-kaartbibliotheek. Er is ook een kaart- en rasterproduct beschikbaar.

Hun nieuwe versie v5 bevat een meer interactieve functieset en bijgewerkte styling. De visuals zijn schoon en modern. Het gebruik van canvas biedt betere prestaties ten koste van raster-gebaseerd.

De voorbeelden gebruiken een op string gebaseerde XML om grafiekopties toe te passen, wat minder praktisch lijkt dan andere benaderingen. Deze opties zien eruit als HTML5, maar worden ingesteld via een JavaScript-tekenreeks.

De API is goed gedocumenteerd met voorbeeldgrafieken voor elke eigenschap. Een 173-pagina PDF-handleiding is ook beschikbaar.

Een proefperiode van twee maanden is beschikbaar voor evaluatie. Licenties zijn vereist nadat de proefperiode is verstreken.

Chart.js

Chart.js is een open source JavaScript-bibliotheek die 8 grafiektypen ondersteunt. Het is een kleine js-bibliotheek van slechts 60 kB. Typen zijn lijndiagrammen, staafdiagrammen, vlakdiagrammen, radar, cirkeldiagrammen, bellen, spreidingsdiagrammen en gemengd. Een tijdreeks wordt ook ondersteund. Het maakt gebruik van canvas-elementen voor het renderen en reageert op de grootte van vensters om de schaalgrootte te behouden. Het is achterwaarts compatibel met IE9. Polyfills zijn ook beschikbaar om met IE7 te werken.

De voorbeeldvisuals zien er redelijk modern uit en bevatten eerste animaties wanneer je voor het eerst tekent. Het animeert soepel bij het in realtime toevoegen van series of gegevenspunten. Grafiekopties kunnen worden gewijzigd na en het aanroepen van een update () functie tekent de grafiek opnieuw.

Voorbeeldbroncode wordt niet weergegeven in de websitegalerij maar is beschikbaar in de GitHub-repo. Configuratieopties worden gebruikt om grafieken te maken en te wijzigen. De opties-API is schoon en intuïtief.

De documentatie is grondig en bevat tutorials met property-API en codefragmenten.

Chart.js is een open source-bibliotheek en gratis te gebruiken voor persoonlijk en commercieel gebruik, wat een pluspunt is. Het beperkte aantal typen kan een probleem zijn voor geavanceerdere dashboardvereisten.

Gevolgtrekking

Het ecosysteem van JavaScript-kaartenbibliotheken is de afgelopen tien jaar aanzienlijk geëvolueerd. Tegenwoordig is er een groot aantal kaartproducten die aan zeer uiteenlopende eisen voldoen en een breed scala aan projecten bedienen, hoewel honderden kaarttypen. De meeste bibliotheken bieden een gratis proefversie of merkversie waarmee u de effectiviteit van de grafiek kunt evalueren met uw eigen gegevens, laad- en projectcomplexiteit.

Voor de meeste kaartbibliotheken is het eenvoudig om te werken met eenvoudige samengestelde gegevenssets en statische visualisaties. Grafieken zullen dingen echter niet altijd soepel afhandelen wanneer real-world, dynamische gegevens worden gevisualiseerd. Meer werk kan nodig zijn om elementen aan te passen en te rangschikken zodat grafieken correct lijken en deze handmatige aanpassingen kunnen breken als nieuwe dynamische gegevens worden gevisualiseerd.

Om de beste JS-kaartoplossing voor uw unieke behoeften te selecteren, raad ik aan om uw eigen gegevens te testen met een aantal van de hierboven genoemde bibliotheken om een ​​ideale pasvorm voor uw huidige en toekomstige projecten te garanderen.