Nämä ovat parhaat JavaScript-kaavakirjastot vuodelle 2019

Ensinnäkin lyhyt historia:

Kun tiedonkeruu ja käyttö lisääntyvät jatkuvasti räjähdysmäisesti, tietojen visualisointitarve on yhä tärkeämpi. Kehittäjät pyrkivät yhdistämään miljoonia tietokantatietueita kauniiksi kaavioiksi ja mittaristoiksi, jotka ihmiset voivat tulkita nopeasti ja intuitiivisesti.

Datan visualisointitekniikan kehitys on jatkunut viimeisen vuosikymmenen aikana, ja monet edistyneet kaavio-kirjastot ovat nyt kuluttajien käytettävissä. 2000-luvun alussa kaavion luomista hallitsivat palvelinpuolen kuvabittikartat. Laajennukset, kuten Flash ja Silverlight, tarjosivat interaktiivisemman kartoituskokemuksen, mutta latausnopeudesta, akun kestosta ja järjestelmän resursseista kova maksu.

Matkapuhelin- ja tablet-laitteiden käytön räjähdyksen jälkeen laajennuksia ei enää tuettu suurimmilla alustoilla, ja kehittäjien oli siirryttävä avoimen asiakaspuolen tekniikoihin, jotka voisivat toimia kaikkialla. Samaan aikaan erittäin korkean resoluutionäyttöjen ja yleisempien zoomausten tekeminen kosketuseleiden avulla toivat eturiviin resoluutiosta riippumattomat vektorikaaviot.

Anna tietojen visualisoinnin nykyinen aikakausi, jota hallitsevat JavaScript ja SVG (Scalable Vector Graphics). Kaaviot näkyvät nyt kaikissa selaimissa ilman erityisiä laajennuksia, ne tukevat vuorovaikutteisuutta ja animaatioita ja näyttävät teräviltä jopa suurimman tarkkuuden laitteissa. Nämä 9 tuotetta erottautuivat tarkastelemalla yli 50 visualisointikirjastoa:

D3.js

D3.js on erittäin laaja ja tehokas graafinen JavaScript-kirjasto. Sen avulla voit sitoa mielivaltaisia ​​tietoja asiakirjaobjektimalliin (DOM) ja käyttää sitten dataan perustuvia muunnoksia asiakirjaan.

D3 on paljon pidempi kuin tyypilliset karttakirjastot, mukaan lukien monet muut pienemmät tekniset moduulit, kuten akselit, värit, hierarkiat, muodot, kevennys, monikulmio ja paljon muuta. Kaikki tämä tekee jyrkästä oppimiskäyrästä.

Yritä luoda yksinkertainen kaavio voi olla monimutkaista. Kaikki elementit, mukaan lukien akselit, ja muut kaavion kohteet on määriteltävä erikseen. Monet näytteet osoittavat, kuinka CSS: ää voidaan käyttää kaavion elementtien tyylin luomiseen. Mitään karttapohjaisia ​​ominaisuuksia ei käytetä automaattisesti. Jos haluat päästä rikkaruohoon ja käyttää luovuutta hallita kaikkia elementtejä, se on paras valinta. Työskentely kelloa vastaan ​​tietojen visualisointiprojektin vaatimusten täyttämiseksi ei ehkä ole paras valinta alusta alkaen.

D3.js voi olla rakennuslohko karttakirjastolle. Kehittäjät ovat käyttäneet D3: ta helpottaakseen sitä kuluttavien kaavioratkaisujen, kuten NVD3: n, käyttöä.

D3.js on avoimen lähdekoodin ja ilmainen käyttö.

JSCharting

JSCharting-kaavakirjasto tukee suurta määrää kaaviotyyppejä, mukaan lukien kartat, gantt, osakkeet ja muut, joiden käyttö edellyttää usein erillisiä kirjastoja. Se sisältää sisäänrakennetut kartat kaikista maailman maista ja kirjaston SVG-kuvakkeista. Erillisten mikrokaavioiden sarja voidaan hahmotella missä tahansa kaavion otsikossa tai missä tahansa sivun div-elementissä. Mukana on myös käyttöliittymän ohjaimet (UiItems), jotka mahdollistavat rikkaamman vuorovaikutteisen kaavion. Tietojen tai visualisointimuuttujien hallitseminen reaaliajassa on helppoa, ja kaavioita voidaan viedä SVG-, PNG-, PDF- ja JPG-muotoihin.

Galleria on jaettu kaavion tyyppiin ja ominaisuusnäytteisiin. Kaavion muotoilu on kiillotettu ja tuottaa joitain puhtaita kaavioita. Visuaalisuus tarjoaa puhtaan ja ammattimaisen karttakokemuksen.

Mukana olevat näytteet käyttävät määritysobjektia kaavioiden mukauttamiseen. Kaaviotyyppien luomisen ja hallinnan asetukset ovat erittäin helppoja käyttää. Muutamia ominaisuusasetuksia tarvitaan monimutkaisempien kaaviotyyppien määrittämiseen, ja JSChartingilla on vahvat ja dynaamiset oletusarvot, mikä tarkoittaa, että se yrittää valita parhaat asetukset skenaarioille automaattisesti.

Dokumentaatio sisältää monia opetusohjelmia ja perusteelliset API-ominaisuuksien kuvaukset. Monet ominaisuudet sisältävät esimerkkikäytön ja esimerkkilinkkejä.

JSCharting on ilmainen ei-kaupalliseen ja henkilökohtaiseen käyttöön, ja se tarjoaa myös kaupallisia lisenssivaihtoehtoja, jotka sisältävät kaikki kaaviotyypit ja tuotteet yhdestä maksusta.

Highcharts

Highcharts on suosittu JavaScript-karttakirjasto, jota käyttävät monet maailman suurimmat yritykset. Kaaviot luodaan SVG: llä ja VML-varmuuskopiointi taaksepäin yhteensopivuuteen aina IE6 / IE8: een saakka. Demokaaviot osoittavat melko runsaan ominaisuusjoukon, mutta eivät visua visuaalisesti. Yleinen dokumentaatio sisältää oppaita monille asiaankuuluville aiheille ja API-dokumentaatio on perusteellinen.

Kaavio käyttää määritysvaihtoehtoja kaavioiden luomiseen, ja sovellusliittymää on helppo käyttää.

Highcharts on ilmainen ei-kaupalliseen ja henkilökohtaiseen käyttöön. Kaupallinen lisensointi vaaditaan muuhun käyttöön, ja pörssi-, kartta- ja Gantt-kaaviot on lisensoitu erikseen.

amCharts

amCharts on hiljattain julkaissut version 4, joka lisää vahvan SVG-animaatiomoottorin, jonka avulla voidaan luoda elokuvamaisia ​​kohtauksia.

Demokaaviot näyttävät erittäin hyviltä. Suurin osa demoista tarjoaa useita paletteja ja liukusäätimen käyttöliittymän kaavion muuttujien säätämiseksi reaaliajassa. Dokumentaatio sisältää monia opetusohjelmia ja täydelliset API-ominaisuuksien kuvaukset.

Kaavion luominen tuntuu hieman erilaiselta kuin kokoonpanoon perustuva lähestymistapa, ja sen sijaan käyttää deklaratiivisempaa API: ta. Kaavioiden määrittäminen vaatii hieman enemmän koodia, mutta antaa paremman koodin viimeistelykokemuksen.

amCharts tarjoaa ilmaisen lisenssin, jossa on merkkituotteita ja maksettuja lisenssejä muuhun käyttöön.

Google-kaaviot

Google-kaaviot ovat tehokkaita ja helppokäyttöisiä.

Näytekaaviot näyttävät puhtailta ja helposti silmissä. Galleria ja laajennettu galleria näyttävät monia kaaviotyyppejä, mutta hampurilaisvalikon painaminen paljastaa enemmän tyyppejä (kuten kalenteri), joita ei näy näissä gallerialuetteloissa.

Jokaisella kaaviotyypillä on oma opetusohjelma, jossa on live-esimerkkejä. Oppaat sisältävät koodin liittyviin ominaisuuksiin ja API-luetteloihin. Tämä on miellyttävä kokemus uuden kaavakirjaston käytön aloittamisesta.

Kaaviot mukautetaan määritysvaihtoehtojen avulla. Tietojoukot täytetään käyttämällä DataTable-luokkaa, jota kaikki kaaviot voivat käyttää. Jokaisella kaaviotyypillä on yksilölliset vaihtoehdot, jotka on lueteltu tyyppikohtaisissa opetusohjelmissa. Ominaisuuden nimeäminen on standardoitu ja monet vaihtoehdot toimivat kaikentyyppisissä.

Google-kaaviot ovat ilmaisia, mutta on olemassa varoitus. Se on verkkopalvelu, eikä sitä voi isännöidä paikallisesti. Aiemmin Google on poistanut sovellusliittymät käytöstä, joten jos käyttösi on kriittistä, kannattaa ehkä valita toinen vaihtoehto.

Zing-kaavio

ZingChart tarjoaa monia kaaviotyyppejä ja integroituu kulma-, reaktio- ja muihin kehyksiin. Siinä on vahva ominaisuusjoukko, jossa on monia mukautusvaihtoehtoja.

Esittelytaulukot esittävät erilaisia ​​tyyliteemoja, joista jotkut näyttävät paremmilta kuin toiset, mutta vaihtoehtoja tyylin luomiseen tarpeen mukaan on olemassa. Demot eivät näytä kaikkia käytettävissä olevia kaaviotyyppejä.

Dokumentaatio sisältää oppaita kaikille käytettävissä oleville tyypeille, suuren määrän ominaisuuksia ja täydellisen API-luettelon.

ZingChart käyttää määritysvaihtoehtoja kaavioiden mukauttamiseen. Esimerkit sisältävät monia ominaisuusasetuksia, kuten fonttityylin. Nämä voivat auttaa ymmärtämään, mitä asetuksia tietylle kaaviosta vaaditaan.

ZingChartia voidaan käyttää ilmaiseksi tuotemerkin kanssa. Maksettua lisensointia on saatavana ei-tuotemerkkikäyttöön.

Fuusiokaaviot

FusionCharts on ollut käytössä jo vuosia Flash-pohjaisena kaavion laajennuksena. Se on vankka kaavion visualisointikirjasto. Se tukee monia datamuotoja, kuten XML, JSON ja JavaScript, toimii nykyaikaisissa selaimissa ja on taaksepäin yhteensopiva takaisin IE6: n kanssa. Myös monia JavaScript-kehyksiä ja palvelinpuolen ohjelmointikieliä tuetaan.

Kaavio-galleria sisältää suuren määrän esimerkkejä ja niillä on puhdas visuaalinen ilme.

Dokumentaatio sisältää hyvät API-kuvaukset ja esimerkkejä kustakin kaaviotyypistä. Kokoonpanon ominaisuudet on ryhmitelty tehtävien ja kaavion ominaisuuksien mukaan.

Kaaviot luodaan määritykseen perustuvilla vaihtoehdoilla ja niitä on suhteellisen helppo käyttää. Ominaisuuksien luettelo voi olla pitkä, kun kaivetaan syvemmälle sovellusliittymään. Kaikki määritysominaisuudet ovat matalia, kuten {chartLeftMargin, showAlternateHGridColor}. Se näyttää yritykseltä parantaa koodin täydennystä.

FusionCharts on ilmainen henkilökohtaiseen käyttöön karttabrändin avulla. Maksettua lisensointia on saatavana tuotemerkittömään ja kaupalliseen käyttöön.

KOOLCHART

KoolChart on HTML 5 -kankaalle perustuva JavaScript-kartoituskirjasto. Kartoitus- ja ruudukkotuote on myös saatavana.

Heidän uusi v5-julkaisunsa sisältää interaktiivisemman ominaisuusjoukon ja päivitetyn tyylin. Visuaalit ovat siistejä ja moderneja. Kankaan käyttö tarjoaa paremman suorituskyvyn rasteripohjaisen kustannuksella.

Näytteet käyttävät merkkijonopohjaista XML: ää kaavion vaihtoehtojen soveltamiseen, mikä vaikuttaa vähemmän käytännölliseltä kuin muut lähestymistavat. Nämä vaihtoehdot näyttävät HTML5: ltä, mutta ne asetetaan JavaScript-merkkijonon kautta.

Sovellusliittymä on dokumentoitu hyvin, ja jokaiselle omaisuudelle on esimerkkikaaviot. Saatavana on myös 173 sivun PDF-käyttöopas.

Kahden kuukauden kokeilujakso on käytettävissä arviointia varten. Lupa vaaditaan koeajan päättymisen jälkeen.

Chart.js

Chart.js on avoimen lähdekoodin JavaScript-kirjasto, joka tukee 8 kaaviotyyppiä. Se on pieni js-kirjasto, vain 60 kt. Tyyppejä ovat viivakaaviot, pylväskaaviot, aluekaaviot, tutka, ympyräkaaviot, kupla, sirontakaaviot ja sekoitetut. Aikasarjaa tuetaan myös. Se käyttää piirtoelementtiä ja on reagoiva ikkunan koon säilyttämiseksi mittakaavan rakeisuuden. Se on taaksepäin yhteensopiva IE9: n kanssa. Polyfillit ovat käytettävissä myös IE7: n kanssa.

Näytemallit ovat melko modernin näköisiä ja sisältävät alkuperäisiä animaatioita piirrettäessä ensimmäistä kertaa. Se animoi sujuvasti, kun lisäät sarjoja tai datapisteitä reaaliajassa. Kaavion asetuksia voidaan muokata sen jälkeen, kun päivitystoiminnon () kutsuminen piirtää kaavion uudelleen.

Lähdekoodimallia ei näytetä verkkosivustogalleriassa, mutta se on saatavilla GitHub-repossa. Määritysvaihtoehtoja käytetään kaavioiden luomiseen ja muokkaamiseen. Options API on puhdas ja intuitiivinen.

Dokumentaatio on perusteellinen ja sisältää oppaita ominaisuus-API: lla ja koodinpätkillä.

Chart.js on avoimen lähdekoodin kirjasto ja ilmainen käyttää henkilökohtaiseen ja kaupalliseen käyttöön, mikä on plus. Rajoitettu määrä tyyppejä voi olla ongelma edistyneemmille hallintapaneelivaatimuksille.

Johtopäätös

JavaScript-kartoituskirjastojen ekosysteemi on kehittynyt huomattavasti viime vuosikymmenen aikana. Nykyään on olemassa suuri joukko kartoitustuotteita, jotka täyttävät hyvin erilaiset vaatimukset, ja jotka palvelevat monenlaisia ​​projekteja satojen kaaviotyyppien avulla. Useimmat kirjastot tarjoavat ilmaisen kokeiluversion tai tuotemerkkiversion, jonka avulla voit arvioida kaavion tehokkuutta omilla tiedoillasi, latauksellasi ja projektin monimutkaisuudella.

Useimpien kaavio-kirjastojen on helppo käsitellä yksinkertaisia ​​kuratoituja tietojoukkoja ja staattisia visualisointeja. Kaaviot eivät kuitenkaan välttämättä aina käsittele asioita sujuvasti, kun reaalimaailman dynaamisia tietoja visualisoidaan. Elementtien säätäminen ja järjestäminen saattaa vaatia enemmän työtä, jotta kaaviot näyttävät oikeilta ja tämä manuaalinen säätäminen voi rikkoutua, kun uutta dynaamista tietoa visualisoidaan.

Suosittelemme, että valitset parhaan JS-kaavioratkaisun yksilöllisiin tarpeisiisi, testaamalla omat tietosi parilla yllä luetelluilla kirjastoilla, jotta varmistat ihanteellisen sovituksen nykyisiin ja tuleviin projekteihisi.