Tiedot ovat kaikki ympärillämme, ja sen visualisointi on jo tullut olennainen osa elämäämme. Kaaviot, infografiat, kartat ja kojelaudat ovat nykyään erittäin vaatimattomia, koska ne antavat meille tietoa tavalla, joka voidaan helposti tulkita.

Hyvä asia on, että kartoitus ei vaadi suurta taitoa tai erityisosaamista web-kehittäjiltä, ​​suunnittelijoilta tai muilta. Tässä artikkelissa esitämme perusteet ja selostamme vuorovaikutteisten tietojen visualisoinnin JavaScriptin ja HTML5: n avulla helposti.

Aloitamme luomalla yhden sarjan pylväskaavion, jotta voimme ymmärtää perusasiat. Sitten näytämme sinulle nopean tavan tehdä moni-sarja ja pinottu pylväskaavio. Pylväskaaviot ovat suosittu tapa esittää tietoja näinä päivinä, ja kehitetty logiikka voidaan helposti muuntaa muihin kaavioihin.

Viimeinen kaavio on tämä 100% pinottu pylväskaavio:

Katso kynä Lopullinen (nimi). Räätälöity 100% pinottu palkkikartta esittäjä (t): Ruslan ( @ruslankorsar ) päällä CodePen .

Tänään on monia JavaScript-kaavio-kirjastoja ; jotkut niistä ovat täysin ilmaisia, kuten D3 ja Google-kaaviot kun taas toiset vaativat maksua kaupalliseen käyttöön. Mielestäni kaikkein kattavin ja vahvempi niistä on AmCharts , AnyChart , ja Highcharts .

Tätä opetusohjelmaa varten olen päättänyt käyttää AnyChart . Prosessi on kuitenkin hyvin samanlainen jokaiselle kirjastolle, varsinkin jos teet jotain yksinkertaista. AnyChart on laaja dokumentointi ja API-viite samoin kuin suuri valikoima tuetut kaaviotyypit ja demoja koodi leikkipaikka , joten se on hyvä valinta aloittelijoille.

Saat kätevästi kaikki opetusohjelmassa kuvatut esimerkit tämä kokoelma CodePen ja niitä voidaan tutkia suoraan tai viedä ZIP-tiedostoihin CSS / HTML / JavaScript-demo-tiedostoilla.

JS-kaaviot 3 helppoa vaihetta

Prosessin luominen JavaScript -graafiin verkkosivustollesi tai -sovellukselle koostuu seuraavista kolmesta vaiheesta:

  1. Valmista tietosi;
  2. Liitä kirjasto;
  3. Kirjoita yksinkertainen koodi.

1. Tietojen valmistelu

Aivan kuten suuri alus haluaa syviä vesiä, yksinkertainen kaavio haluaa yksinkertaisia ​​tietoja. Tietenkin, jos sinulla on suuria tietomääriä tai sen rakenne ei ole ilmeinen, sinun on ensin valmisteltava se.

Kun rakennamme suurimman osan suosituista karttatyypeistä, tarvitsemme vain X- ja Y-kenttiä. Pylväskaaviot voivat kuitenkin olla yksinkertaisempia, koska useimmiten tapahtuu vain Y-kenttä ja indeksi tai kohteen numero otetaan X. Näin on, kun käytämme JavaScript-tietoryhmää, esimerkiksi:

    // 5 data points = 5 categories for a single seriesvar data = [19, 24, 30, 34, 42];// Y is these values; X is item numbers [0,1,2,3,4,5]

Jos käytät JSON / XML-tiedostoa tietojen siirtoon, tietosi voivat näkyä seuraavasti.

    [{'x': 'Product A','value': 19},{'x': 'Product B','value': 24}...]

Yleisesti ottaen on olemassa monia tapoja käsitellä tietoja, ja visualisointiohjelmistojen kehittäjät yleensä kuvaavat kaikkia tai monia niistä asiakirjoissa. Tässä mielessä suosittelen tarkistaa asiaa koskevasta osasta kaavion kirjaston dokumentaatiosta.

2. Kaavion kirjaston hankkiminen

Käytettävä kirjasto on tietenkin tärkeä ainesosa täällä. Jos aiot käyttää kaavioita paikallisesti, sen pitäisi olla kohtuullinen ladata binaaripaketin ja pitää sen lähellä.

Jos kuitenkin tarvitset kaavioita verkkosovellukselle tai sivulle verkkosivustolla, a CDN voi olla parempi vaihtoehto. Se lataa tiedostot lähimmästä palvelimesta asiakkaallesi, mikä nopeuttaa sivukuormitusta ja parantaa suorituskykyä.

3. Yksinkertaisen HTML / JavaScript-koodin kirjoittaminen

Kun tietomme ja kirjasto ovat valmiit, voimme alkaa kirjoittaa koodia itse piirtää kaavion.

a) Ensin meidän on luotava kaavasäiliö sivulle. Paras tapa on käyttää a

elementti ja aseta sen tunnus:

    

b) Tämän jälkeen liitetään tiedot:

var data = [{x: 'DVD player', y: 19},{x: 'Home theater system', y: 24},{x: 'Karaoke player', y: 30},{x: 'Projector', y: 34},{x: 'TV receiver', y: 42}];

c) Sitten määritämme haluamamme kaavion tyypin kutsumalla asiaankuuluva konstruktoritoiminto:

    var chart = anychart.bar();

d) Jotta asiat selviäisivät katsojille, haluan antaa kaavalle otsikon:

    chart.title('Product Sales');

e) Luo nyt sarja:

    chart.addSeries(data);// or we can specify a simple dataset within the method:chart.addSeries([19, 24, 30, 34, 42]);

f) Kaavios on sijoitettava säiliöön, joten määritämme juuri luomamme:

    chart.container('container');

g) Kaikki näyttää hyvältä, joten voimme piirtää kaavion nyt:

    chart.draw();

Seuraavassa on, miten tulos näyttää:

1-single-sarja-pylväskaaviossa

Seuraavassa on koko koodi:

Näyttää melko yksinkertaiselta, eikö niin? Ja nyt voimme helposti verrata kokonaismyyntiä luokittain.

Monisarjan ja pinonpalkkikarttojen luominen

Nyt kun olemme oppineet JavaScript-skeduloinnin perusasiat, voimme jatkaa hieman monimutkaisemman kaavion rakentamista, joka näyttää lisää tietoja. Kuten aiemmin totesin, minä näytän sinulle helpon tavan tehdä moni-sarjan pylväskaavio ja sitten pinottu.

Periaatteessa menettelyt ovat melko samankaltaiset. Kuten aina, kaikki alkaa datasta.

Tiedot taulukosta

Yllä olevassa palkkikartassa meillä oli yksi muuttuja (tuotemyyntitietosarja) ja useita luokkia (tuotetyyppejä). Jotta näytettäisiin jokaisen arvon koostumus, joka on päällystettyjen pylväskaavojen ydin, tarvitsemme yksityiskohtaisempia tietoja.

Tätä varten voimme käyttää tietoja, jotka näkyvät jo sivulla. Jos sinulla on jo HTML-taulukko, voit helposti luoda sen perusteella perustuvan kaavion. Jos käytät AnyChartia Data Adapter -moduuli sinun tarvitsee vain määrittää taulukko tietolähteeksi.

1) Hanki datasovitin:

    

2) Valmista taulukon tiedot:

    var tableData = anychart.data.parseHtmlTable('#tableWithData');

3) Luo kaavio ja määritä tietolähde:

    var chart = anychart.bar();chart.data(tableData);

Välitön tulos on monisarjan palkkikartta, jonka avulla voimme esimerkiksi vertailla nopeasti kunkin tuotteen suorituskykyä jokaisessa yksittäisessä luokassa.

2-multi-sarja-pylväskaaviossa

Sarjan tyypin muuttaminen

Kaikki tarvittavat tiedot, mukaan lukien tiedot, on jo määritelty. Nyt voimme vaihtaa sarjatyypin ja saada pinonpalkkikuvion pois tavanomaisesta monisarjasta. Ei ole vaikeaa ollenkaan, koska tarvitset vain yhden rivin koodin, jotta arvot ovat pinossa:

    chart.yScale().stackMode('values');

Voila!

3-pinottu-pylväskaaviossa

Olemme juuri luoneet päällekkäisen palkkikartan ilman, että muutettaisiin todellisuudessa kyseistä monisarjaa. Tämän tuloksena ei ole vain valmiita vertailemaan kokonaismyyntiä luokittain, kuten yhden sarjan palkkikartan mukaan artikkelin alusta, mutta voimme myös tunnistaa, mikä tuote vastaa yhden ryhmän lisäämisestä pienempiä tai suurempia kuin toiset .

Koska olemme sopineet etukäteen, että lopullinen tavoite on 100-prosenttisesti pinottu palkkikartta, vaihdetaan vain tilan saada se:

    chart.yScale().stackMode('percent');
4-prosenttia pinota-pylväskaaviossa

Se on 100% pinottu palkkikartta, jonka avulla voit korostaa osa-kokoisuussuhteita ja arvioida kunkin tuotteen osuutta kokonaislukuun.

Suunnittelun räätälöinti

Suunnittelu on erittäin tärkeää tiedon visualisoinnissa, houkuttelemisessa, selkeyden lisäämisessä ja visuaalisen eheyden ylläpitämisessä webprojektissa. Helpotus tämän kartoituskirjaston kanssa räätälöinti on melko yksinkertainen.

Tekstin lisääminen

Selkeyden lisäämiseksi voit antaa visualisointiasi lisäämällä tekstejä. Annan esimerkiksi pystysuoran akselin otsikon ja lisätään kaavion etiketti tilapäisesti:

    chart.xAxis().title('Products');chart.label({text: 'Classified!'});
5-prosenttia pinota-bar-kaavio-, jossa on teksti-

Väriasetukset

Voit lisätä väriä paletin ( chart.palette () ) kautta ja muuttaa taustaasetuksia (chart.background () ) muun muassa. Tai voit käyttää teemaa:

    

Sitten meidän on määritettävä se kaavion asetuksissa:

    anychart.theme(anychart.themes.wines);
6

Kaavio Interaktiivisuus

JavaScript-kaavion tekeminen ainakin vähän interaktiivista ei ole iso juttu.

Todennäköisesti kaikkein perustavanlaatuinen lähestymistapa on se, että siirrytään tilaa datapisteille, jotta ne voivat muuttaa väriä ja lisätä tai muokata merkkejä. Valintatila määrittää, kuinka kukin kohta näyttää klikattavan.

Jotkut yksinkertaiset hover- ja select-pohjaiset vuorovaikutteisuus sisällytetään oletusarvoihin, joten nyt emme aio lisätä mitään yllä olevaan esimerkkiin. Palaa siihen, jos haluat tutkia vuorovaikutteisuutta.

Kannattaa puhua työkalupalkkielementistä, joka voi kellua, kun piste on lepotilassa. Yritän aina käyttää hyödyllisiä työkalupaloja näyttämällä heille joitain hyödyllisiä tietoja siitä, mihin pisteeseen piste kuuluu, mitä arvoa se edustaa ja niin edelleen. Voit helposti muokata työkaluvinkkejä näyttämään jotain. Esittelemme työkalupaketin ja täsmennämme, mitä sen pitäisi näyttää:

    var tooltip = chart.tooltip();tooltip.displayMode('union');tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');

Tässä on tulos:

7

Tämä on vain lyhyt silmäyksellä räätälöintivaihtoehdoista, yksityiskohtaisiin yksityiskohtiin olisi koko artikkeli itsessään. Nyt ehdotan, että luet vuorovaikutteisuutta lisätietoja.

johtopäätös

Kuten näette, ei ole vaikeaa rakentaa interaktiivisia kaavioita JavaScriptin kanssa. Lisäksi löydät kaikki esimerkit opetusohjelmasta minun kokoelma CodePenistä ja käytä niitä helposti työhösi. Kopioi koodi, muokkaa tietoja omalle ja hankkasi projektisi nopeasti ja nopeasti.

Muista aina tarkistaa dokumentaatio ja / tai API-viite sekä kiinnittää huomiota käytettävän kirjaston demoihin, kuten tämä AnyChartin galleria . Yleensä ei ole monimutkaista nähdä, onko jotain lähellä mitä tarvitset, löydä sopiva esimerkki, tehdä joitain yksinkertaisia ​​muutoksia ja käyttää sitä sitten haluamallasi tavalla.