Ovo su najbolje knjižnice JavaScript grafikona za 2019. godinu

Prvo, kratka povijest:

Kako se prikupljanje i uporaba podataka kontinuirano povećava, potreba za vizualizacijom tih podataka postaje sve važnija. Razvojni programeri nastoje objediniti milijune zapisa baze podataka u lijepe tablice i nadzorne ploče koje ljudi mogu brzo i intuitivno protumačiti.

Tehnologija vizualizacije podataka nastavila se poboljšavati tijekom posljednjeg desetljeća, a mnoge napredne knjižnice grafikona sada su dostupne potrošačima. Početkom 2000-ih u generiranju grafikona dominirale su bitmapne grafikone slika na strani poslužitelja. Dodaci kao što su Flash i Silverlight nudili su interaktivnije grafičko iskustvo, ali uz veliku naknadu za brzinu preuzimanja, trajanje baterije i resurse sustava.

Eksplozijom upotrebe mobilnih uređaja i tableta, dodaci više nisu podržani na glavnim platformama, a programeri su se morali prebaciti na otvorene tehnologije na strani klijenta koje su mogle raditi svugdje. Istodobno, pojava zaslona vrlo visoke razlučivosti i češće zumiranje pokretima dodira dovelo je do vektorskih ljestvica neovisnih o razlučivosti.

Uđite u trenutnu eru vizualizacije podataka kojom dominiraju JavaScript i SVG (skalabilna vektorska grafika). Grafikoni se sada prikazuju u svim preglednicima, bez posebnih dodataka, podržavaju interaktivnost i animacije i izgledaju oštro čak i na uređajima s najvećom rezolucijom. Pregledom preko 50 biblioteka za vizualizaciju izdvojilo se ovih 9 proizvoda:

D3.js

D3.js je vrlo opsežna i moćna grafička JavaScript biblioteka. Omogućuje vam povezivanje proizvoljnih podataka s objektnim modelom dokumenta (DOM), a zatim na dokument primjenjujete transformacije vođene podacima.

D3 ide daleko dalje od tipičnih knjižnica grafikona, uključujući mnoge druge manje tehničke module, poput osi, boja, hijerarhija, kontura, ublažavanja, poligona i još mnogo toga. Sve ovo čini strmu krivulju učenja.

Pokušaj stvaranja jednostavnog grafikona može biti složen. Svi elementi, uključujući osi i ostale stavke grafikona moraju biti izričito definirani. Mnogi uzorci pokazuju kako se CSS može koristiti za oblikovanje elemenata grafikona. Nijedna značajka temeljena na grafikonu ne primjenjuje se automatski. Ako želite ući u korov i kreativnošću u potpunosti kontrolirati svaki element, to je najbolji izbor. Ako radite protiv sata kako biste ispunili zahtjeve projekta vizualizacije podataka, možda nije najbolji izbor počevši od nule.

D3.js može biti gradivni element za knjižnicu grafikona. Programeri su koristili D3 kako bi olakšali upotrebu rješenja s grafikonima koja ga troše, poput NVD3.

D3.js je otvoreni izvor i besplatan za upotrebu.

JSCharting

JSCharting knjižnica grafikona podržava velik broj tipova grafikona, uključujući karte, gantt, zalihe i druge koji često zahtijevaju zasebne knjižnice. Uključuje ugrađene mape svih svjetskih zemalja i biblioteku SVG ikona. Paket samostalnih mikro grafikona može se prikazati u bilo kojoj oznaci grafikona ili u bilo kojem div elementu na stranici. Uključene su i kontrole korisničkog sučelja (UiItems) koje omogućuju bogatije interaktivne karte. Jednostavno je kontrolirati podatke ili varijable vizualizacije u stvarnom vremenu, a grafikone je moguće izvesti u formate SVG, PNG, PDF i JPG.

Galerija je podijeljena na uzorke vrsta grafikona i značajki. Oblik grafikona je poliran i daje neke ljestvice čistog izgleda. Cjelokupni vizualni elementi pružaju čisto i profesionalno iskustvo crtanja.

Uključeni uzorci koriste konfiguracijski objekt za prilagodbu grafikona. Postavke za stvaranje i upravljanje vrstama grafikona vrlo su jednostavne za upotrebu. Malo je postavki svojstava potrebno za specificiranje složenijih vrsta grafikona, a JSCharting ima jake i dinamičke zadane vrijednosti, što znači da pokušava automatski odabrati najbolje postavke za scenarije.

Dokumentacija uključuje mnoge vodiče i temeljite opise svojstava API-ja. Mnoga svojstva uključuju primjer upotrebe i uzorke veza.

JSCharting je besplatan za nekomercijalnu i osobnu upotrebu, a također nudi i komercijalne mogućnosti licence koje uključuju sve vrste grafikona i proizvode za jednu naknadu.

Highcharts

Highcharts je popularna JavaScript knjižnica grafikona koju koriste mnoge najveće svjetske tvrtke. Karte se generiraju pomoću SVG-a i zamjenskog VML-a radi povratne kompatibilnosti sve do IE6 / IE8. Demokratske ljestvice pokazuju prilično bogat skup značajki, ali vizualno se ne dopadajte. Opća dokumentacija uključuje vodiče za mnoge relevantne teme, a API dokumentacija je temeljita.

Grafikon koristi konfiguracijske mogućnosti za stvaranje grafikona, a API je jednostavan za upotrebu.

Highcharts je besplatan za nekomercijalnu i osobnu upotrebu. Komercijalno licenciranje potrebno je za drugu uporabu i zalihe, karte i karte ganta licenciraju se odvojeno.

amCharts

amCharts je nedavno objavio svoju verziju 4 koja dodaje snažan SVG animacijski mehanizam koji omogućuje stvaranje scena sličnih filmovima.

Demo ljestvice izgledaju vrlo lijepo. Većina demonstracija nudi brojne palete i korisničko sučelje klizača za podešavanje varijabli grafikona u stvarnom vremenu. Dokumentacija uključuje mnoge vodiče i potpune opise svojstava API-ja.

Stvaranje grafikona čini se nešto drugačijim od pristupa temeljenog na konfiguraciji i umjesto toga koristi deklarativniji API. Potrebno je malo više koda za konfiguriranje grafikona, ali daje bolje iskustvo dovršenja koda.

amCharts nudi besplatnu licencu s robnim markama i plaćenim licencama za drugu upotrebu.

Google karte

Google karte su moćne i jednostavne za upotrebu.

Grafikoni s uzorcima izgledaju čisto i lako ih se vidi. Galerija i proširena galerija prikazuje mnoge vrste grafikona, ali pritiskom na izbornik hamburgera otkriva se više vrsta (poput kalendara) koje nisu prikazane na ovim popisima galerije.

Svaka vrsta grafikona ima poseban vodič s primjerima uživo. Vodiči uključuju kod za srodne značajke i API popise. Ovo je ugodno iskustvo početka rada s novom knjižnicom grafikona.

Karte se prilagođavaju pomoću objekta opcija konfiguracije. Skupovi podataka popunjavaju se pomoću klase DataTable koju mogu koristiti sve grafikone. Svaka vrsta grafikona ima jedinstvene opcije navedene u vodičima za određeni tip. Imenovanje svojstava standardizirano je i mnoge opcije rade na svim vrstama.

Googleove ljestvice su besplatne, ali postoji upozorenje. To je web usluga i ne može se hostirati lokalno. U prošlosti Google je povukao API-je, pa ako je vaša upotreba kritična, možda ćete htjeti odabrati drugu opciju.

ZingChart

ZingChart nudi mnoge vrste grafikona i integrira se s kutnim, reakcijskim i drugim okvirima. Ima snažan skup značajki s mnogim mogućnostima prilagodbe.

Demo grafikoni prikazuju niz tema za oblikovanje, od kojih neke izgledaju bolje od drugih, ali postoje mogućnosti za njihovo oblikovanje prema potrebi. Demonstracije ne pokazuju sve dostupne vrste grafikona.

Dokumentacija uključuje vodiče za sve dostupne vrste, dobar broj značajki i cjelovit popis API-ja.

ZingChart koristi konfiguracijske opcije za prilagodbu grafikona. Uzorci uključuju mnoge postavke svojstava, poput stila fonta. Oni mogu spriječiti razumijevanje postavki koje su potrebne za određeni grafikon.

ZingChart se može besplatno koristiti s brendiranjem. Plaćeno licenciranje dostupno je za nebrendiranu upotrebu.

FusionCharts

FusionCharts postoji već dugi niz godina počevši od dodatka za grafikone temeljenog na Flash-u. To je robusna knjižnica za vizualizaciju grafikona. Podržava mnoge formate podataka, uključujući XML, JSON i JavaScript, radi u modernim preglednicima i unatrag je kompatibilan s IE6. Podržani su i mnogi JavaScript okviri i programski jezici na strani poslužitelja.

Galerija grafikona uključuje velik broj primjera i imaju čist vizualni izgled.

Dokumentacija uključuje dobre opise API-ja i primjere svake vrste grafikona. Svojstva konfiguracije grupirana su prema zadacima i značajkama grafikona.

Grafikoni se izrađuju pomoću opcija temeljenih na konfiguraciji i relativno je jednostavan za korištenje. Popis svojstava može biti dugačak ako se dublje uđe u API. Sva svojstva konfiguracije su plitka, poput {chartLeftMargin, showAlternateHGridColor}. Čini se kao pokušaj poboljšanja dovršenja koda.

FusionCharts je besplatan za osobnu upotrebu s brendiranjem grafikona. Plaćeno licenciranje dostupno je za nebrendiranu i komercijalnu upotrebu.

KOOLCHART

KoolChart je JavaScript 5 grafička knjižnica temeljena na platnu. Dostupan je i preslikavanje i mrežni proizvod.

Njihovo novo izdanje v5 uključuje interaktivniji skup značajki i ažurirani stil. Vizualni elementi su čisti i moderni. Korištenje platna nudi bolje performanse na štetu rasterske temeljenosti.

Uzorci koriste XML zasnovan na nizovima za primjenu opcija grafikona što se čini manje praktično od ostalih pristupa. Te opcije izgledaju poput HTML5, ali su postavljene kroz JavaScript niz.

API je dobro dokumentiran s primjerima grafikona za svako svojstvo. Dostupan je i priručnik za PDF na 173 stranice.

Dvomjesečno probno razdoblje dostupno je za ocjenu. Licenciranje je potrebno nakon isteka probnog razdoblja.

Chart.js

Chart.js je JavaScript biblioteka otvorenog koda koja podržava 8 vrsta grafikona. To je mala js biblioteka sa samo 60 kb. Tipovi uključuju linijske, trakasti, površinski, radar, tortne karte, mjehuriće, raspršene plohe i mješovite karte. Podržana je i vremenska serija. Za prikaz koristi element platna i reagira na promjenu veličine prozora kako bi održao granulaciju razmjera. Povratno je kompatibilan s IE9. Polipuni su dostupni i za rad s IE7.

Primjeri vizuala prilično su modernog izgleda i uključuju početne animacije kada prvi put crtate. Glatko animira dodavanjem serija ili točaka podataka u stvarnom vremenu. Opcije grafikona mogu se izmijeniti nakon što funkcija poziva update () ponovno iscrta grafikon.

Uzorak izvornog koda nije prikazan na galeriji web stranica, ali je dostupan u repozitoriju GitHub. Opcije konfiguracije koriste se za stvaranje i izmjenu grafikona. API opcija je čist i intuitivan.

Dokumentacija je temeljita i uključuje vodiče s API-jem svojstava i isječcima koda.

Chart.js je biblioteka otvorenog koda i besplatna za osobnu i komercijalnu upotrebu, što je plus. Ograničeni broj vrsta može predstavljati problem za naprednije zahtjeve nadzorne ploče.

Zaključak

Ekosustav JavaScript knjižnica grafikona znatno se razvio tijekom posljednjeg desetljeća. Danas postoji velik broj grafičkih proizvoda koji zadovoljavaju vrlo raznolike zahtjeve, a poslužuju širok spektar projekata kroz stotine vrsta grafikona. Većina knjižnica nudi besplatnu probnu verziju ili markiranu verziju koja vam omogućuje da procijenite učinkovitost grafikona s vlastitim podacima, učitavanjem i složenošću projekta.

Većini knjižnica grafikona lako je riješiti jednostavne kurirane skupove podataka i statičke vizualizacije. Međutim, grafikoni ne moraju uvijek glatko rješavati stvari kad se vizualiziraju dinamični podaci u stvarnom svijetu. Možda će biti potrebno više posla na podešavanju i uređivanju elemenata tako da grafikoni izgledaju ispravno i ovo ručno podešavanje može se pokvariti vizualizacijom novih dinamičkih podataka.

Da biste odabrali najbolje rješenje JS grafikona za vaše jedinstvene potrebe, preporučujem testiranje vlastitih podataka u nekoliko gore navedenih knjižnica kako biste osigurali idealno prilagođavanje vašim trenutnim i budućim projektima.