Pridanie grafov do používateľského rozhrania vám pomôže rozprávať príbehy vizuálne pútavým spôsobom. Ale ako to dosiahnuť bez písania dlhého kódu od začiatku? Je to ľahké. Všetko, čo potrebujete, je vhodná knižnica grafov JavaScript na premenu vašich údajov na hotové grafy.
Či už chcete vytvárať grafy v reálnom čase alebo potrebujete ukázať svojim používateľom historický trend, toto sú najlepšie knižnice JavaScriptu, ktoré môžete použiť.
Chart.js je open source knižnica JavaScript na vytváranie grafov založených na HTML. Je to jedna z najjednoduchších vizualizačných knižníc pre JavaScript a obsahuje podporu pre čiarové, pruhové, bodové, prstencové, koláčové, radarové, plošné a bublinové grafy.
Jednou z jeho jedinečných funkcií je schopnosť animovať a prispôsobovať grafy tak, aby vyhovovali vášmu používateľskému rozhraniu (UI). Graf.js je tiež celkom jednoduchý na integráciu. Či už píšete vanilkový JavaScript alebo používate front-end stack ako React alebo Angular, všetko, čo musíte urobiť, je nainštalovať Chart.js ako balík alebo ho zavolať z CDN.
Súvisiace:Ako vytvoriť graf pomocou Chart.js
Nakoniec akceptuje pole X a Y a celý kód beží v jednoduchej objektovej logike, aby vykreslil váš graf na front-end v HTML plátne na základe údajov, ktoré číta. A môžete kombinovať grafy, ak chcete.
Tu je praktická knižnica grafov JavaScript pre programátorov React. Recharts, vytvorený kombináciou React a D3.js, využíva škálovateľnú vektorovú grafiku (SVG) na vykresľovanie grafov primárne v Reacte. Takže, ak používate Vanilla JavaScript, možno budete chcieť zvážiť iné možnosti knižnice grafov.
Knižnica podporuje 11 typov grafov. A okrem toho, že ide o samotný komponent React, každá časť vykresleného grafu v Recharts, vrátane legendy, osí a ďalších, je nezávislým komponentom vo vnútri rodiča.
V dôsledku toho môžete každý komponent prispôsobiť manipuláciou s rekvizitami, ako sa vám páči. To znamená, že môžete ľahko pripojiť a oddeliť časti grafu od celku bez ovplyvnenia ostatných komponentov Reactu.
CanvasJS je všestranný, rýchly, jednoduchý a obsahuje až 30 typov grafov, ktoré sa vykresľujú v HTML divs skôr ako plátno. Je tiež vysoko prispôsobiteľný s podporou animácií a kombinácií grafov. Jedna z jeho jedinečných funkcií vám umožňuje dynamicky meniť tému grafu v používateľskom rozhraní.
Okrem front-end frameworkov JavaScript podporuje vykresľovanie grafov v technológiách na strane servera, ako sú PHP, ASP.NET a MVC stacky. Poskytuje tiež jednoduché riešenia v dokumentoch pre rôzne scenáre.
Knižnica dokonca vychádza z profesionálneho uhla pohľadu ako nástroj dashboardu na vizualizáciu údajov z rôznych uhlov pohľadu. Pomocou canvasJS je ľahké vytvárať grafy súvisiace s akciami. A nakoniec má samostatné CDN pre akciové a všeobecné grafy.
Ak vám nevadí zašpiniť si ruky vytváraním SVG a deklarovaním osí od začiatku pred vykreslením skutočného grafu, možno budete chcieť vyskúšať D3.js na kreslenie grafov na vašom webe. Aj keď je podrobnejší ako iné knižnice grafov JavaScript, poskytuje vám lepšie uchopenie oblasti grafu a jej obsahu.
Skutočnosť, že je výkonný a funguje na nižšej úrovni ako iné knižnice grafov JavaScript, z neho robí ideálny nástroj, keď je najvyšším cieľom výkon. Jeho API ponúka vstavané atribúty CSS, ktoré vám umožňujú upravovať štýl grafov tak, ako chcete.
A pretože máte kontrolu nad kontajnerom SVG, môžete navrhnúť tému grafu tak, aby vyhovovala vášmu dizajnu používateľského rozhrania. D3.js môže byť technický, keď začnete. Nakoniec, keď sa v tom vyznáte, môžete s ním vykresliť takmer akýkoľvek typ grafu.
Google Charts používa HTML5 a SVG na písanie vlastných grafov do Document Object Model (DOM). Je ľahko použiteľný a vo svojej dokumentácii poskytuje dostatok príkladov, vďaka ktorým sa počas cesty nebudete cítiť stratení. Ponúka tiež cestu na pripojenie k rôznym zdrojom údajov, ktoré podporujú protokol nástroja grafu.
Súvisiace:Bezplatné HTML šablóny na jednoduché vytváranie rýchlych webových stránok
Poskytuje triedu DataTable, ktorá uľahčuje rozdelenie, filtrovanie a úpravu údajov do samostatných polí stĺpcov a riadkov. Knižnica tiež odstraňuje potrebu ďalších výpočtov pri kódovaní grafu. Pri vykresľovaní koláčového grafu napríklad nemusíte počítať percentuálne rozdelenie údajov. Robí to za vás.
Každý typ grafu v Google Charts prichádza ako trieda JavaScript a môžete jednoducho priradiť dátový objekt a možnosti prispôsobenia samostatným premenným. Umožňuje vám ich odovzdať samostatne do hlavnej triedy grafu. Jeho logika je skutočne úhľadná a komplexná.
ApexCharts.js je open source knižnica JavaScript na vykresľovanie responzívnych grafov do používateľského rozhrania. Zistíte, že sa používa jednoducho, najmä vďaka komplexnej dokumentácii.
ApexCharts.js si získal svoju reputáciu vďaka možnostiam prispôsobenia, ktoré vám umožňujú vylepšiť grafy tak, aby sa prispôsobili rôznym veľkostiam obrazovky bez toho, aby ste sa museli obávať ďalšieho štýlu. Podporuje tiež mnoho typov grafov používaných v každodenných vizualizáciách.
Táto knižnica tiež funguje dobre s viacerými grafmi. Kombinácia rôznych typov grafov do jednej mriežky je jednou z jej silných stránok.
Chartist.js je projekt s otvoreným zdrojovým kódom, ktorý pramení z nespokojnosti prispievateľskej komunity v iných knižniciach grafov JavaScript. Používa kombináciu inline SVG, CSS a JavaScript na kreslenie, štýl, konfiguráciu a nakoniec vykresľovanie grafov do DOM.
Táto knižnica máp obsahuje aj rôzne typy máp, ktoré ponúka mnoho iných knižníc. Chartists.js má silnú podporu pre CSS animáciu a odozvu. Preto sa jeho výstupy grafu dynamicky prispôsobujú na základe veľkosti obrazovky.
Hoci sú animačné efekty jedinečné, práca s touto knižnicou môže byť pre začiatočníkov náročná. Napriek tomu nájdete komplexné a upraviteľné príklady v dokumentácii užitočné pre akékoľvek prispôsobenie alebo animácie, ktoré chcete pridať.
Či už pracujete s front-end zásobníkom JavaScript, TypeScript alebo obyčajným JavaScriptom, billboard.js je jednoduchý a oplatí sa ho používať. Je to knižnica grafov JavaScript založená na D3 v4.
Knižnica podporuje 21 typov grafov a obsahuje komplexné príklady pre každý z nich vo svojich dokumentoch API. Vďaka tomu sa ľahko učí a je spoľahlivý na rýchle vytváranie vizualizácií vo vašom používateľskom rozhraní.
Súvisiace:Rámce JavaScript, ktoré sa oplatí naučiť
Všetok kód, ktorý potrebujete na vytvorenie grafu pomocou billboard.js, je umiestnený vo vrstve objektov a vkladanie údajov je jednoduché, pretože údaje môžete rozdeliť do samostatných polí a nakresliť toľko grafov, koľko chcete.
Rozprávajte príbehy na svojom webe pomocou JavaScriptu
Nástroje s otvoreným zdrojovým kódom uľahčujú a uľahčujú programovanie v dnešnej dobe. Prezentácia grafu je jednou z etáp vo vašom projekte, kde môžete ušetriť veľa času použitím ktorejkoľvek z týchto existujúcich knižníc grafov JavaScript.
Okrem toho majú ďalšiu výhodu v tom, že vaša aplikácia je modulárnejšia a ľahšia bez toho, aby ste museli písať ďalšie skripty.
Vykresľovanie grafov pomocou rámcov JavaScriptu je špičkou ľadovca pre jazyk webu. Existuje nespočetné množstvo projektov, ktoré čakajú na vytvorenie. Šťastné hackovanie!
JavaScript je kľúčový programovací jazyk, ktorý sa treba naučiť. Ak ste v tejto oblasti nováčik, tu je niekoľko projektov, ktoré vám pomôžu rozšíriť vaše znalosti.
Prečítajte si ďalej
- Programovanie
- JavaScript
- Vývoj webových aplikácií
- Programovanie
Idowu je nadšený z akejkoľvek inteligentnej technológie a produktivity. Vo voľnom čase sa hrá s kódovaním a keď sa nudí, prepne na šachovnicu, no tiež sa rád raz za čas odpúta od rutiny. Jeho vášeň ukázať ľuďom cestu okolo moderných technológií ho motivuje k ďalšiemu písaniu.
prihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné e-knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber