9 Javascript raamatukogud interaktiivsete diagrammide loomiseks

Nii et teil on käes tonni andmeid, millel on mitu muutujat, et teil on kellegi teisega relee. Toorsed, organiseerimata andmed on nende jaoks raskesti mõistetavad. See on põhjus, miks teil on vaja diagramme. Veebidisainis, graafikud on üks parimaid vahendeid andmete visualiseerimiseks. Seda on kerge lugeda, silmadele lihtne ja suhteliselt lihtne seadistada.

Aga võtkem asju sälku: olgem lisage neile graafikutele animatsioon ja interaktiivsus, nii et lugejad ei saa mitte ainult midagi uut õppida, vaid ka sellega mängida. See on tegelikult lihtsam, kui see kõlab, tänu paljudele JS raamatukogudele. Vaatame need välja.

1. JS

Chart.js on sõltumatut raamatukogu, mis ehitab diagramme kuues erinevas tüübis: liinikaardid, ribadiagrammid, radarikaardid, polaarpiirkonna kaardid, pirukad ja sõõrikud. Raamat on jagatud ka vastavalt diagrammi tüübile, nii et teie leheküljed ei ole vajaliku koormusega. See toetab reageerivat disaini ja saate hõlpsasti muuta muutujaid, nagu värv või animatsioon, et kohandada diagrammi liidest.

2. Chartist JS

Chartist JS on suurepärane raamatukogu, et luua vastavaid diagramme, mis kasutavad SVG-d. Lisaks oma reageerimisvõimele annab Chartist teile paindlikkust, kasutades selget muret: stiil ja CSS ning kontroll JS-iga. Kohandamise lihtsustamiseks lisatakse SASS-failid. Siin on suur asi, et teil on piiramatud võimalused oma diagrammi animeerimiseks Chartist animatsiooni API, SMIL abil, mis annab teile täiendavaid animatsioonivõimalusi.

3. C3 JS

C3 JS on raamatukogu, mis ehitab graafikuid D3 JS põhjal. See ümbritseb vajaliku koodi, et luua graafikuid D3 JS-ga, nii et saate D3-koodi kirjutamise vahele jätta ja lihtsalt sisestada oma andmed. C3 on varustatud erinevate API-dega, mida saate oma diagrammide hõlpsaks juhtimiseks kasutada. Diagrammi kohandamiseks määrake oma kohandatud stiilid antud CSS klassidele. Kujundage graafikuid lihtsate liinikaartide kohta graafikute mõõtmiseks. Vaadake seda lehte, et näha, kuidas raamatukogu töötab.

4. Flot

Flot on jQuery plguin interaktiivsete elementidega graafikute loomiseks, näiteks seeria sisse- või väljalülitamine, andmepunktide interaktsioonid, paanimine, suumimine ja muud. Flotil on erinevaid diagrammi tüübi valikuid ja kui soovite oma diagrammis rohkem võimeid, on siin mõned pluginad, mida saate kasutada. Diagrammid toimivad hästi ka brauseritega, mis toetavad HTML-i kaaneid.

5. EChart

Echart on hämmastavalt laiahaardeline Hiina raamatukogu, mis toetab mitut diagrammi tüüpi, saab töödelda suuri andmeid (joonistades kuni 200 000 andmepunkti Cartesiuse diagrammil), omab ulatuslikku rändlust, võimet hõlpsasti ekstraktida, integreerida ja vahetada andmeid mitme diagrammi vahel, võimaldades üks on lihtne vahetada ühelt andmetüübilt teisele ja palju muud.

6. Peity

Peity lisab oma veebilehele mini-diagrammi. See on väike jQuery plugin, mis muudab elemendi mini-ks svg joon, baar, sõõrik või pirukas diagramm. Peate lihtsalt looma elemendi ja andma sellisele väärtusele 1/5 helistada peity ('pie') selle elemendi kohta, et teha mini-kiipkaart. Näiteks selleks, et luua sõõrikakaart, mis on ainult üks viiendik, on siin HTML:

1/5

Saate kohandada diagrammi värvi, raadiust, laiust ja kõrgust, kuid vaikimisi kuvatakse see väikese suurusega.

7. DC JS

DC JS on sarnased C3 JS kasutatava mootoriga; nad mõlemad kasutavad D3 raamatukogu SVG-s graafikute esitamiseks. DC JS on loodud selleks, et aidata teil visualiseerida brauserite ja mobiilseadmete andmeid ja analüüse. Kuna see võimendab D3 JS-i, siis saate lisada kasutajate interaktsiooni diagrammile. DC JS on üks võimas raamatukogu, mis loob graafikuid lihtsast kuni suure keerukusega.

8. Google Chart

Google'i diagrammi abil saate luua Google'i visualiseerimise API abil interaktiivseid graafikuid ja andmevahendeid. Google Chart'i andmete visualiseerimisvõimaluste kontrollimiseks on olemas diagrammigaleriid. Alustamiseks kinnitage oma veebilehele lihtne JavaScripti, et laadida alla Google Chart'i raamatukogud, mida vajate. Seejärel loetlege andmed, mida soovite kaardistada, ja teha mõned kohandused diagrammi valikute kaudu. Lõpuks looge ID-ga diagrammi objekt ja looge oma veebilehel a

diagrammi kuvamiseks.

9. NVD3

NVD3 on korduvkasutatavate diagrammide ja diagrammikomponentide kogum, mis on ehitatud D3 JS-iga. See raamatukogu on seega „mall”, mis aitab teil diagrammide koostamist lihtsustada. Vaadake siin palju NVD3-ga ehitatud proovikaarte.

Nüüd loe: JavaScript-raamatukogud interaktiivsete ja kohandatud kaartide loomiseks