Ezek a legjobb JavaScript diagram könyvtárak 2019-re

Először egy rövid történelem:

Mivel az adatgyűjtés és -felhasználás folyamatosan exponenciálisan növekszik, az adatok megjelenítésének igénye egyre fontosabbá válik. A fejlesztők az adatbázis-rekordok millióit kívánják összegyűjteni gyönyörű táblázatokba és irányítópultokba, amelyeket az emberek gyorsan és intuitívan értelmezhetnek.

Az adatmegjelenítési technológia tovább fejlődött az elmúlt évtizedben, és számos fejlett diagramkönyvtár áll a fogyasztók rendelkezésére. A 2000-es évek elején a diagramgenerálást a szerveroldali kép bitkép-diagramjai uralták. Az olyan beépülő modulok, mint a Flash és a Silverlight, interaktívabb térképészeti élményt kínáltak, de jelentősen megterhelték a letöltési sebességet, az akkumulátor élettartamát és a rendszererőforrásokat.

A mobil- és táblagép-használat robbanásával a bővítmények már nem voltak támogatottak a főbb platformokon, és a fejlesztőknek át kellett térniük a nyílt kliensoldali technológiákra, amelyek mindenhol futni tudtak. Ugyanakkor a nagyon nagy felbontású képernyők megjelenése és az érintési gesztusok által gyakoribb zoomolás a felbontástól független vektordiagramokat helyezte előtérbe.

Adja meg az adatok vizualizációjának jelenlegi korszakát, amelyet a JavaScript és az SVG (skálázható vektorgrafika) ural. A diagramok mostantól minden böngészőben futnak, speciális bővítmények nélkül, támogatják az interaktivitást és az animációkat, és élesnek tűnnek még a legnagyobb felbontású eszközökön is. Több mint 50 vizualizációs könyvtárat áttekintve ez a 9 termék kiemelkedett:

D3.js

A D3.js egy nagyon kiterjedt és hatékony grafikus JavaScript könyvtár. Ez lehetővé teszi tetszőleges adatok lekötését egy dokumentumobjektum-modellhez (DOM), majd adat-vezérelt átalakításokat alkalmaz a dokumentumra.

A D3 jóval meghaladja a tipikus diagramkönyvtárakat, beleértve számos kisebb technikai modult, például tengelyeket, színeket, hierarchiákat, kontúrokat, dombornyomást, sokszögeket és egyebeket. Mindez meredek tanulási görbét eredményez.

Egy egyszerű diagram létrehozásának megkísérlése bonyolult lehet. Minden elemet, beleértve a tengelyeket és egyéb diagramelemeket, kifejezetten meg kell határozni. Számos minta mutatja be, hogy a CSS hogyan használható a diagramelemek stílusának megformálásához. Nincsenek diagramalapú szolgáltatások, amelyek automatikusan érvényesek. Ha a gyomokba akar kerülni, és a kreativitás segítségével minden elemet teljes mértékben ellenőrizni akar, akkor ez a legjobb választás. Az óraművel való munka az adatmegjelenítési projekt követelményeinek teljesítése érdekében nem biztos, hogy a legjobb választás a nullától kezdve.

A D3.js egy diagramkészítő könyvtár építőköve lehet. A fejlesztők a D3-at használták, hogy megkönnyítsék az azt fogyasztó diagrammegoldások, például az NVD3 használatát.

A D3.js nyílt forráskódú és ingyenesen használható.

JSCharting

A JSCharting chart library nagyszámú diagramtípust támogat, beleértve a térképeket, a gantt, a stock és más elemeket, amelyek használatához gyakran külön könyvtárakra van szükség. Ez magában foglalja a világ összes országának beépített térképeit és egy SVG ikonok könyvtárát. Az önálló mikrodiagramok készlete bármely diagramcímkében vagy bármely oldal div elemében megjeleníthető. A felhasználói felület vezérlői (UiItems) szintén gazdagabb interaktív diagramokat tesznek lehetővé. Az adatok vagy a vizualizációs változók valós idejű vezérlése egyszerű, és a diagramok exportálhatók SVG, PNG, PDF és JPG formátumba.

A galéria diagramtípusokra és jellemző mintákra oszlik. A diagram stílusa csiszolt és tiszta megjelenésű diagramokat eredményez. Az általános látvány tiszta és professzionális térképi élményt nyújt.

A mellékelt minták egy konfigurációs objektumot használnak a diagramok testreszabásához. A diagramtípusok létrehozásának és vezérlésének beállításai nagyon egyszerűen használhatók. Kevés tulajdonságbeállítás szükséges a bonyolultabb diagramtípusok megadásához, és a JSCharting erőteljes és dinamikus alapértelmezéssel rendelkezik, ami azt jelenti, hogy megpróbálja automatikusan kiválasztani a legjobb beállításokat a forgatókönyvekhez.

A dokumentáció sok oktatóanyagot és alapos API tulajdonságleírást tartalmaz. Sok tulajdonság tartalmaz példahasználatot és példamutató linkeket.

A JSCharting ingyenes, nem kereskedelmi és személyes használatra, és kereskedelmi licensz opciókat is kínál, amelyek minden diagramtípust és terméket tartalmaznak, egyetlen díj ellenében.

Highcharts

A Highcharts egy népszerű JavaScript-diagramkönyvtár, amelyet a világ legnagyobb cégei használnak. A diagramokat SVG-vel és a VML-re történő visszaállítással generálják a visszamenőleges kompatibilitás érdekében egészen az IE6 / IE8-ig. A bemutató táblázatok meglehetősen gazdag funkciókészletet mutatnak, de vizuálisan nem hűvösek. Az általános dokumentáció számos releváns témához tartalmaz oktatóanyagokat, és az API dokumentációja alapos.

A diagram konfigurációs opciókat használ a diagramok létrehozásához, és az API könnyen használható.

A Highcharts ingyenes, nem kereskedelmi és személyes használatra. Kereskedelmi engedélyre van szükség az egyéb felhasználásokhoz, és a részvényeket, a térképeket és a Gantt-diagramokat külön engedélyezik.

amCharts

Az amCharts nemrégiben jelentette meg 4-es verzióját, amely erős SVG animációs motort ad hozzá, amely lehetővé teszi filmszerű jelenetek készítését.

A bemutató diagramok nagyon szépek. A legtöbb demó számos palettát és csúszó felhasználói felületet kínál a diagramváltozók valós idejű beállításához. A dokumentáció számos oktatóanyagot és teljes API tulajdonságleírást tartalmaz.

A diagram létrehozása kissé eltér a konfiguráció-alapú megközelítéstől, ehelyett egy deklaratívabb API-t használ. A diagramok konfigurálásához valamivel több kódra van szükség, de jobb kódfeltöltési élményt nyújt.

Az amCharts ingyenes licencet kínál márkás listákkal és más használatra fizetett licencekkel.

Google Charts

A Google diagramok hatékonyak és könnyen használhatók.

A mintadiagramok tisztának tűnnek, és könnyűek a szemükön. A galéria és a kibővített galéria sok diagramtípust mutat, de a hamburger menü megnyomásával több olyan típus (például naptár) jelenik meg, amelyek nem szerepelnek ezekben a galéria listákban.

Minden diagramtípusnak van egy dedikált oktatóanyaga élő példákkal. Az oktatóanyagok tartalmazzák a kapcsolódó szolgáltatások kódját és az API-listákat. Ez egy kellemes élmény az új diagramkönyvtár használatának megkezdéséhez.

A diagramokat a konfigurációs beállítások objektummal testreszabhatjuk. Az adatsorok egy DataTable osztály használatával kerülnek feltöltésre, amelyet minden diagram fel tud használni. Minden diagramtípus egyedi opciókat tartalmaz a típusspecifikus oktatóanyagokban. A tulajdonságok elnevezése szabványosított, és számos lehetőség működik minden típusban.

A Google diagramok ingyenesek, de van egy figyelmeztetés. Ez egy webes szolgáltatás, és nem helyben tárolható. A múltban a Google megszüntette az API-kat, így ha a használat kritikus fontosságú, érdemes egy másik lehetőséget választani.

ZingChart

A ZingChart számos diagramtípust kínál, és integrálódik a szögletes, a reakció és más keretekkel. Erős tulajdonságokkal rendelkezik, számos testreszabási lehetőséggel.

A bemutató táblázatok egy sor stílusstílust mutatnak be, amelyek némelyike ​​jobban néz ki, mint mások, de lehetőségük van a stílusuk szükség szerinti megadására. A demók nem mutatják be az összes rendelkezésre álló diagramtípust.

A dokumentáció tartalmaz oktatóanyagokat az összes elérhető típushoz, számos funkciót és teljes API-listát.

A ZingChart konfigurációs beállításokat használ a diagramok testreszabásához. A minták számos tulajdonságbeállítást tartalmaznak, például betűtípust. Ezek megismerhetik az adott diagramhoz szükséges beállításokat.

A ZingChart márkajelzéssel ingyenesen használható. Fizetett licencelés nem márkás használatra érhető el.

FusionCharts

A FusionCharts évek óta létezik, Flash-alapú diagram pluginként kezdve. Ez egy robusztus diagrammegjelenítési könyvtár. Számos adatformátumot támogat, beleértve az XML, JSON és JavaScript programot, modern böngészőkben működik, és visszafelé kompatibilis az IE6-tal. Számos JavaScript keretrendszer és szerveroldali programozási nyelv is támogatott.

A diagramgaléria számos példát tartalmaz, és tiszta vizuális megjelenéssel rendelkeznek.

A dokumentáció tartalmaz jó API-leírásokat és példákat az egyes diagramtípusokra. A konfigurációs tulajdonságok feladatok és diagram jellemzők szerint vannak csoportosítva.

A diagramok konfigurációs alapú opciók segítségével készülnek, és viszonylag egyszerűen használhatók. A tulajdonságok listája hosszadalmas lehet, ha mélyebbre ásunk az API-ban. Minden konfigurációs tulajdonság sekély, például {chartLeftMargin, showAlternateHGridColor}. Kísérletnek tűnik a kód befejezésének javítására.

A FusionCharts ingyenes, személyes használatra, diagrammárkával. A fizetős licencek márkajel nélküli és kereskedelmi felhasználásra állnak rendelkezésre.

KOOLCHART

A KoolChart egy HTML 5 vászon alapú JavaScript diagramkészítő könyvtár. Térképezési és rácstermék is rendelkezésre áll.

Új v5 kiadásuk interaktívabb szolgáltatáskészletet és frissített stílust tartalmaz. A látvány tiszta és modern. A vászon használata jobb teljesítményt kínál a raszteralapúság rovására.

A minták egy string alapú XML-t használnak a diagramopciók alkalmazásához, ami kevésbé tűnik praktikusnak, mint más megközelítések. Ezek az opciók úgy néznek ki, mint a HTML5, de egy JavaScript karaktersorozaton keresztül vannak beállítva.

Az API jól dokumentálva van, az egyes tulajdonságokhoz tartozó diagramokkal. 173 oldalas PDF kézikönyv is rendelkezésre áll.

Két hónapos próbaidő áll rendelkezésre az értékeléshez. A próbaidő lejárta után engedélyre van szükség.

Chart.js

A Chart.js egy nyílt forráskódú JavaScript könyvtár, amely 8 diagramtípust támogat. Ez egy kis js könyvtár, mindössze 60kb-os. A típusok magukban foglalják a vonaldiagramokat, az oszlopdiagramokat, a területi diagramokat, a radart, a kördiagramokat, a buborékokat, a szórási ábrákat és a vegyes ábrákat. Idősor is támogatott. A megjelenítéshez vászon elemet használ, és az ablak átméretezésénél reagál a skála részletességének fenntartására. Visszafelé kompatibilis az IE9-gyel. A polifill-ek az IE7-hez is használhatók.

A minta látvány meglehetősen modern megjelenésű, és első rajzoláskor tartalmazzák a kezdeti animációkat. Simán animál, amikor valós idejű sorozatot vagy adatpontot ad hozzá. A diagramopciók módosíthatók, és egy update () függvény meghívása újrarajzolja a diagramot.

A forráskód mintája nem jelenik meg a webhely galériájában, de elérhető a GitHub repóban. Konfigurációs lehetőségek használhatók diagramok létrehozására és módosítására. Az Options API tiszta és intuitív.

A dokumentáció alapos, és oktatóanyagokat tartalmaz tulajdonság API-val és kódrészletekkel.

A Chart.js egy nyílt forráskódú könyvtár, amely ingyenesen használható személyes és kereskedelmi célokra, ami plusz. A korlátozott számú típus problémát jelenthet a fejlettebb irányítópult követelmények esetén.

Következtetés

A JavaScript-diagramkönyvtárak ökoszisztémája jelentősen fejlődött az elmúlt évtizedben. Manapság nagyszámú olyan grafikus termék létezik, amelyek nagyon eltérő követelményeknek felelnek meg, és sokféle projektet szolgálnak ki, több száz diagramtípus mellett. A legtöbb könyvtár ingyenes próbaverziót vagy márkás verziót biztosít, amely lehetővé teszi a diagram hatékonyságának értékelését saját adatokkal, betöltéssel és a projekt összetettségével.

A legtöbb diagramkönyvtárnak egyszerű kezelnie az egyszerű kurátori adatsorokat és a statikus megjelenítéseket. A diagramok azonban nem mindig tudják simán kezelni a dolgokat, amikor valós, dinamikus adatokat jelenítenek meg. További munkára lehet szükség az elemek beállításához és elrendezéséhez, hogy a diagramok helyesek legyenek, és ez a manuális beállítás megváltozzon az új dinamikus adatok megjelenésekor.

Az egyedi igényekhez legjobban megfelelő JS diagram megoldás kiválasztásához azt javaslom, hogy tesztelje saját adatait a fent felsorolt ​​könyvtárak egy részével, hogy ideális illeszkedést biztosítson jelenlegi és jövőbeli projektjeihez.