Need on 2019. aasta parimad JavaScripti graafikute teegid

Esiteks, lühike ajalugu:

Kui andmete kogumine ja kasutamine kasvab jätkuvalt hüppeliselt, muutub vajadus neid andmeid visualiseerida. Arendajad püüavad koondada miljoneid andmebaasikirjeid ilusatesse graafikutesse ja juhtpaneelidesse, mida inimesed saavad kiiresti ja intuitiivselt tõlgendada.

Andmete visualiseerimise tehnoloogia on viimase kümne aasta jooksul jätkuvalt paranenud ja paljud tarbijatele on nüüd kättesaadavad paljud täiustatud graafikute teegid. 2000-ndate aastate alguses domineerisid diagrammide genereerimisel serveripoolsete piltide bitikaartide graafikud. Sellised pistikprogrammid nagu Flash ja Silverlight pakkusid interaktiivsemat kaardistamiskogemust, kuid allalaadimiskiirust, aku kasutusaega ja süsteemiressursse nõudsid suured kulud.

Mobiilseadmete ja tahvelarvutite kasutamise plahvatusega ei toetatud enam peamistel platvormidel pistikprogramme ja arendajad pidid üle minema avatud kliendipoolsetele tehnoloogiatele, mis võiksid töötada kõikjal. Samal ajal tõid väga kõrge eraldusvõimega ekraanide ilmumine ja tavalisem puudutusžestide abil suumimine esiplaanile eraldusvõimest sõltumatud vektorgraafikud.

Sisestage andmete visualiseerimise praegune ajastu, kus domineerivad JavaScripti ja SVG (Scalable Vector Graphics). Diagrammid töötavad nüüd kõigis brauserites, ilma spetsiaalsete pistikprogrammideta, toetavad interaktiivsust ja animatsioone ning näevad teravad välja ka kõrgeima eraldusvõimega seadmetes. Vaadates üle 50 visualiseerimisraamatukogu, paistsid need 9 toodet silma:

D3.js

D3.js on väga ulatuslik ja võimas JavaScripti graafikakogu. See võimaldab siduda suvalisi andmeid dokumendi objektimudeliga (DOM) ja seejärel dokumendile andmepõhiseid teisendusi rakendada.

D3 ületab tavapärastest kaardiraamatukogudest tublisti kaugemale, hõlmates paljusid muid väiksemaid tehnilisi mooduleid nagu teljed, värvid, hierarhiad, kontuurid, leevendus, hulknurgad ja palju muud. See kõik teeb järsu õppimiskõvera.

Lihtsa diagrammi loomise proovimine võib olla keeruline. Kõik elemendid, sealhulgas teljed, ja muud diagrammiüksused tuleb selgelt määratleda. Paljud proovid näitavad, kuidas CSS-i saab kasutada diagrammi elementide stiilimiseks. Ükski diagrammipõhine funktsioon ei kehti automaatselt. Kui soovite umbrohtu sattuda ja kasutada loovust iga elemendi täielikuks kontrollimiseks, on see parim valik. Andmete visualiseerimise projekti nõuete täitmiseks kellaga töötamine ei pruugi algusest peale olla parim valik.

D3.js võib olla diagrammide kogu ehituskivi. Arendajad on kasutanud D3-d selleks, et hõlbustada seda tarbivate diagrammilahenduste, näiteks NVD3, kasutamist.

D3.js on avatud lähtekoodiga ja tasuta kasutamiseks.

JSCharting

JSCharting diagrammiteek toetab palju diagrammitüüpe, sealhulgas kaarte, gantti, stocki ja muid, mille kasutamiseks on sageli vaja eraldi teeke. See sisaldab kõigi maailma riikide sisseehitatud kaarte ja SVG ikoonide kogu. Eraldi mikrokaartide komplekti saab renderdada lehe mis tahes diagrammide siltides või mis tahes div-elementides. Samuti on lisatud kasutajaliidese juhtelemendid (UiItems), mis võimaldavad rikkalikumaid interaktiivseid diagramme. Andmete või visualiseerimise muutujate juhtimine reaalajas on lihtne ja diagramme saab eksportida SVG-, PNG-, PDF- ja JPG-vormingutesse.

Galerii on jagatud diagrammi tüübiks ja funktsiooninäidisteks. Diagrammide stiil on lihvitud ja annab puhtaid graafikuid. Üldine visuaal annab puhta ja professionaalse kaardistamiskogemuse.

Kaasatud näidised kasutavad diagrammide kohandamiseks konfiguratsiooniobjekti. Diagrammitüüpide loomise ja juhtimise seadeid on väga lihtne kasutada. Keerukamate diagrammitüüpide määramiseks on vaja vähe atribuudisätteid ja JSChartingil on tugevad ja dünaamilised vaikesätted, mis tähendab, et see üritab stsenaariumide jaoks parimad sätted automaatselt valida.

Dokumentatsioon sisaldab palju õpetusi ja põhjalikke API omaduste kirjeldusi. Paljud atribuudid hõlmavad näite kasutamist ja näidislinke.

JSCharting on tasuta mitteäriliseks ja isiklikuks kasutamiseks ning pakub ühtlasi kommertslitsentsivõimalusi, mis sisaldavad kõiki diagrammitüüpe ja tooteid.

Edetabelid

Highcharts on populaarne JavaScripti graafikute kogu, mida kasutavad paljud maailma suurimad ettevõtted. Diagrammid genereeritakse SVG-ga ja varundatakse VML-iga tagurpidi ühildumiseks kuni IE6 / IE8-ni. Demodiagrammid näitavad üsna rikkalikku funktsioonikomplekti, kuid visuaalselt ei vau. Ülddokumentatsioon sisaldab õpetusi paljude asjakohaste teemade jaoks ja API dokumentatsioon on põhjalik.

Diagramm kasutab diagrammide loomiseks seadistusvõimalusi ja API-d on lihtne kasutada.

Highcharts on tasuta mitteäriliseks ja isiklikuks kasutamiseks. Muul otstarbel on vaja ärilist litsentsi ja aktsia-, kaardi- ja Gantt-graafikud on litsentsitud eraldi.

amCharts

amCharts avaldas hiljuti oma versiooni 4, mis lisab tugeva SVG-animatsioonimootori, mis võimaldab luua filmisarnaseid stseene.

Demotabelid näevad välja väga kena. Enamik demosid pakuvad diagrammi muutujate reaalajas kohandamiseks mitmeid palette ja liugurit. Dokumentatsioon sisaldab palju õpetusi ja täielikke API omaduste kirjeldusi.

Diagrammi loomine tundub veidi erinev konfiguratsioonipõhisest lähenemisest ja kasutab selle asemel deklaratiivsemat API-d. Diagrammide konfigureerimiseks on vaja veidi rohkem koodi, kuid see annab parema koodi lõpuleviimise kogemuse.

amCharts pakub kaubamärgiga graafikutega tasuta litsentsi ja tasulisi litsentse muuks kasutamiseks.

Google'i graafikud

Google'i edetabelid on võimsad ja hõlpsasti kasutatavad.

Näidisdiagrammid näevad välja puhtad ja on silmadele lihtsad. Galerii ja laiendatud galerii näitavad paljusid diagrammitüüpe, kuid hamburgerimenüü vajutamine näitab rohkem tüüpe (nt kalender), mida nendes galeriiloendites ei kuvata.

Igal diagrammitüübil on spetsiaalne õpetus reaalsete näidetega. Õpetused sisaldavad seotud funktsioonide koodi ja API loendeid. See on meeldiv kogemus uue graafikakoguga alustamisel.

Diagrammid on kohandatud konfiguratsioonivalikute objekti abil. Andmekogumid täidetakse klassi DataTable abil, mida saavad kasutada kõik graafikud. Igal diagrammitüübil on tüübispetsiifilistes õpetustes loetletud unikaalsed valikud. Atribuutide nimetamine on standardiseeritud ja paljud valikud töötavad kõigi tüüpide puhul.

Google'i edetabelid on tasuta, kuid on olemas hoiatus. See on veebiteenus ja seda ei saa kohapeal hostida. Varem on Google API-d vananenud, nii et kui teie kasutamine on missioonikriitiline, võiksite valida mõne muu võimaluse.

ZingChart

ZingChart pakub palju diagrammitüüpe ja integreerub nurk-, reageerimis- ja muude raamistikega. Sellel on tugev funktsioonikomplekt koos paljude kohandamisvõimalustega.

Demodiagrammid näitavad erinevaid stiiliteemasid, millest mõned näevad paremad välja kui teised, kuid võimalused nende kujundamiseks vastavalt vajadusele on olemas. Demod ei näita kõiki saadaolevaid diagrammitüüpe.

Dokumentatsioon sisaldab õpetusi kõigi saadaolevate tüüpide jaoks, palju funktsioone ja täielikku API loendit.

ZingChart kasutab diagrammide kohandamiseks seadistusvõimalusi. Näidised hõlmavad paljusid atribuudisätteid, näiteks fondi stiili. Need võivad aidata mõista, milliseid seadeid on vaja antud diagrammi jaoks.

ZingCharti saab brändimisega tasuta kasutada. Tasumata litsentsimine on saadaval kaubamärgita kasutamiseks.

FusionCharts

FusionCharts on olnud kasutusel juba aastaid Flash-põhise diagrammi pistikprogrammina. See on kindel diagrammide visualiseerimise teek. See toetab paljusid andmevorminguid, sealhulgas XML, JSON ja JavaScripti, töötab tänapäevastes brauserites ja ühildub tagasi IE6-ga. Samuti toetatakse paljusid JavaScripti raamistikke ja serveripoolseid programmeerimiskeeli.

Graafikute galeriis on palju näiteid ja need on puhta visuaalse välimusega.

Dokumentatsioon sisaldab häid API kirjeldusi ja iga diagrammitüübi näiteid. Konfiguratsiooni atribuudid on rühmitatud ülesannete ja diagrammi funktsioonide järgi.

Diagrammid luuakse konfiguratsioonipõhiste valikute abil ja neid on suhteliselt lihtne kasutada. API-sse süvenemisel võib omaduste loend olla pikk. Kõik konfiguratsiooni atribuudid on madalad, näiteks {chartLeftMargin, showAlternateHGridColor}. See näib olevat katse parandada koodi lõpuleviimist.

FusionCharts on isiklikuks kasutamiseks koos graafikabrändiga tasuta. Tasuline litsentsimine on saadaval kaubamärgita ja äriliseks kasutamiseks.

KOOLCHART

KoolChart on HTML 5 lõuendil põhinev JavaScripti graafikute kogu. Saadaval on ka kaardistus- ja ruudustikutoode.

Nende uus versioon v5 sisaldab interaktiivsemat funktsioonide komplekti ja uuendatud stiili. Visuaal on puhas ja kaasaegne. Lõuendi kasutamine pakub paremat jõudlust rasteripõhise arvelt.

Valimites kasutatakse diagrammivalikute rakendamiseks stringipõhist XML-i, mis tundub vähem praktiline kui muud lähenemisviisid. Need valikud näevad välja nagu HTML5, kuid need on määratud JavaScripti stringi kaudu.

API on hästi dokumenteeritud, näidisdiagrammidega iga atribuudi kohta. Saadaval on ka 173-leheküljeline PDF-i kasutusjuhend.

Hindamiseks on saadaval kahekuune prooviperiood. Pärast prooviperioodi lõppu on vajalik litsentsimine.

Chart.js

Chart.js on avatud lähtekoodiga JavaScripti teek, mis toetab 8 diagrammitüüpi. See on väike js raamatukogu, mille maht on vaid 60 kb. Tüüpide hulka kuuluvad joondiagrammid, tulpdiagrammid, piirkonnadiagrammid, radar, sektordiagrammid, mullid, hajumisdiagrammid ja segatud. Toetatakse ka aegrida. See kasutab renderdamisel lõuendi elementi ja on akna suuruse muutmisel tundlik, et säilitada skaala detailsust. See on tagurpidi ühilduv IE9-ga. Polüfillid on saadaval ka IE7-ga töötamiseks.

Näidisvisuaalid on üsna kaasaegse välimusega ja sisaldavad esmakordsel joonistamisel esialgseid animatsioone. Reaalajas seeria- või andmepunktide lisamisel animeeritakse sujuvalt. Diagrammivalikuid saab muuta pärast seda, kui funktsiooni update () kutsumine joonistab diagrammi uuesti.

Lähtekoodi näidist ei kuvata veebisaidi galeriis, kuid see on saadaval GitHubi repos. Konfiguratsioonisuvandeid kasutatakse diagrammide loomiseks ja muutmiseks. Valikute API on puhas ja intuitiivne.

Dokumentatsioon on põhjalik ja sisaldab õpetusi koos atribuudi API ja koodijuppidega.

Chart.js on avatud lähtekoodiga teek, mis on plussiks tasuta kasutamiseks isiklikuks ja äriliseks kasutamiseks. Piiratud arv tüüpe võib olla probleem juhtpaneeli täpsemate nõuete jaoks.

Järeldus

JavaScripti diagrammide teekide ökosüsteem on viimase kümnendi jooksul märkimisväärselt arenenud. Tänapäeval on suur hulk diagrammitooteid, mis vastavad väga erinevatele nõuetele, pakkudes laias valikus projekte, kuigi sadu graafikutüüpe. Enamik raamatukogusid pakub tasuta prooviversiooni või kaubamärgiga versiooni, mis võimaldab teil diagrammi tõhusust hinnata oma andmete, laadimise ja projekti keerukuse põhjal.

Enamiku diagrammiteekide jaoks on lihtne toime tulla lihtsate kureeritud andmekogumite ja staatiliste visualiseerimistega. Reaalsete dünaamiliste andmete visualiseerimisel ei pruugi graafikud alati asjadega sujuvalt hakkama saada. Elementide kohandamiseks ja korrastamiseks võib vaja minna rohkem tööd, et diagrammid oleksid õiged ja see käsitsi kohandamine võib uute dünaamiliste andmete visualiseerimisel katki minna.

Parima JS-diagrammilahenduse valimiseks oma ainulaadsete vajaduste jaoks soovitan testida oma andmeid paari ülalnimetatud teegi põhjal, et tagada ideaalne sobivus teie praeguste ja tulevaste projektide jaoks.