Búa til fyrstu gagnvirka JavaScript myndina þína

b) Eftir það skulum við láta í té gögnin okkar:

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) Þá tilgreinum við hvaða tegund af töflu sem við viljum með því að hringja í viðkomandi byggingaraðgerð:

    var chart = anychart.bar();

d) Til að gera hlutina skýrara fyrir áhorfendur vil ég gefa myndinni titil:

    chart.title('Product Sales');

e) Nú skulum við búa til röð:

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

f) Myndin okkar verður að vera sett í ílát, þannig að við tilgreinum þann sem við höfum búið til núna:

    chart.container('container');

g) Allt virðist fínt, þannig að við getum teiknað kortið okkar núna:

    chart.draw();

Hér er hvernig niðurstaðan lítur út:

Eftirfarandi er allur kóðinn til að auðvelda þér:

Útlit frekar einfalt, er það ekki? Og nú getum við auðveldlega borið saman heildarsölu eftir flokkum.

Búa til fjölhreyfla og staflaðan strikamerki

Nú þegar við höfum lært grunnatriði að skrifa með JavaScript, getum við haldið áfram að byggja upp svolítið flóknari línurit sem sýnir fleiri upplýsingar. Eins og ég sagði áður, mun ég sýna þér auðveldan leið til að búa til margar línur barrita og síðan staflaðan.

Í grundvallaratriðum eru verklagsreglurnar alveg svipaðar. Eins og alltaf byrjar allt með gögnum.

Gögn úr töflu

Í samhengi við strikamyndina hér að framan, áttum við eina breytu (vörusölu gagna röð) og nokkrar flokka (tegundir vöru). Til að auki sýna samsetningu hvers verðs, sem er kjarninn í staflaðri töflureikni, þurfum við nánari upplýsingar.

Fyrir þetta getum við notað gögn sem þegar eru birtar á síðunni. Til dæmis, ef þú hefur nú þegar HTML-töflu getur þú auðveldlega búið til línurit byggt á því. Ef þú notar AnyChart er Gögn Adapter mát Allt sem þú þarft er að tilgreina þessi borð sem gagnaheimild.

1) Fáðu gögnin millistykki:

2) Undirbúa gögn úr töflunni:

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

3) Búðu til töflu og tilgreindu gögnin:

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

Skjótasta niðurstaðan er fjölhreyfistafla sem gerir okkur kleift að fljótt bera saman árangur hvers vöru í hverjum einasta flokki.

Breyting gerðarsviðs

Allar nauðsynlegar upplýsingar, þ.mt gögn, eru nú þegar tilgreindar. Nú getum við breytt röð gerð og fá staflað bar töflu út af því hefðbundna multi-röð einn. Það er ekki erfitt yfirleitt þar sem þú þarft aðeins eina línu af kóða til að hafa gildin staflað:

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

Voila!

Við höfum bara búið til staflaðan strikamynd á fljúgunum án þess að breyta stillingum þessarar fjölþættrar einingar. Þess vegna erum við ekki aðeins tilbúin núna til að bera saman heildarveltu eftir flokkum eins og með strikamyndatöflunni frá upphafi greinarinnar en við getum einnig skilgreint hvaða vöru sem er ábyrgur fyrir því að búa til eina flokk sem er minni eða stærri en aðrir .

Þar sem við höfum áður samþykkt að lokamarkmiðið sé 100% staflað strikamerki, skulum við bara breyta stillingu til að fá það:

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

Það er 100% staflað strikamerki sem gerir þér kleift að varpa ljósi á heildar sambönd og meta framlag hvers vöru í heildarflokkinn.

Hönnun Aðlaga

Hönnun er mjög mikilvægt í gagnavinnslu, til að laða að athygli, auka skýrleika og viðhalda sjónrænni heiðarleika innan vefverkefnisins. Gagnlegar með þessari skráningu bókasafns er customization einfaldlega einföld.

Bæta við texta

Til að fá meiri skýrleika er hægt að veita visualization með viðbótar texta. Til dæmis gef ég lóðrétta ásinn titil og bætið töflumerki tímabundið við:

    chart.xAxis().title('Products');chart.label({text: 'Classified!'});

Litur stillingar

Þú getur bætt við lit með stiku ( chart.palette () ) og breyttu bakgrunni stillingunum ( chart.background () ) meðal annars. Eða þú getur notað þema:

Þá þurfum við að tilgreina það í töflunni:

    anychart.theme(anychart.themes.wines);

Mynd gagnvirkni

Búa til JavaScript kort að minnsta kosti smá gagnvirkt er ekki stór samningur.

Sennilega er grundvallaraðferðin að gera sveiflaástandið á gagnapunktum kleift að breyta þeim og bæta við eða breyta merkjum. Valið ástand ákvarðar hvernig hvert lið lítur eftir að smellt er á.

Sumir einföldu sveiflur og velja undirstaða gagnvirkni er með sjálfgefið þannig að núna ætlum við ekki að bæta neinu við dæmi hér að ofan. Vinsamlegast farðu aftur til þess að kanna helstu gagnvirkni, ef þú vilt.

Það er þess virði að tala um tooltip frumefni, sem getur flotið þegar punktur er sveiflast yfir. Ég reyni alltaf að nýta sér tólatæki með því að sýna þeim nokkrar góðar upplýsingar um hvaða röð punktur tilheyrir, hvaða gildi það táknar og svo framvegis. Þú getur auðveldlega stillt verkfæri til að sýna neitt. Við erum að kynna tóltipið og tilgreina hvað á að sýna í henni:

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

Hér er niðurstaðan:

Þetta er bara stutt augnablik á customization valkosti, að fara í smáatriði væri heild grein af sjálfu sér. Fyrir nú mæli ég með að þú lesir gagnvirkni hluti af skjölunum fyrir frekari upplýsingar.

Niðurstaða

Eins og þú sérð er ekki erfitt að búa til gagnvirkt kort með JavaScript. Þar að auki getur þú fundið öll dæmi úr kennsluefni í mínum safn á CodePen og notaðu þau auðveldlega í vinnunni þinni. Bara afritaðu kóðann, breyttu gögnum mínum til þín og fáðu verkefnið þitt upp og keyra mjög fljótt.

Vinsamlegast hafðu alltaf að huga að því að fylgjast með skjölunum og / eða API tilvísuninni og fylgjast með kynningum safnsins sem þú notar, svo sem gallerí þessa AnyChart . Venjulega er ekki flókið að sjá hvort eitthvað sé nálægt því sem þú þarft, finnið dæmi sem passar best, gerðu nokkrar einfaldar breytingar og notaðu það eins og þú þarft.