9 knižníc Javascript na vytváranie interaktívnych grafov
Takže máte vo svojej ruke množstvo dát, s množstvom premenných, ktoré musíte nejako preniesť na niekoho iného. Surové, neorganizované údaje im budú ťažké pochopiť. Preto potrebujete pomoc z grafov. Vo web dizajne, grafy sú jedným z najlepších nástrojov na vizualizáciu dát. Je ľahko čitateľný, jednoduchý na oči a pomerne jednoduché nastavenie.
Ale vezmite si veci do zárezu: poďme pridanie animácie a interaktívnosti do týchto grafov, takže čitatelia nielenže môžu naučiť niečo nové z grafu, ale aj s ním hrať. Je to vlastne jednoduchšie, ako to znie, vďaka množstvu knižníc JS. Pozrime sa na to.
1. Graf JS
Chart.js je knižnica bez závislostí na vytváranie grafov v 6 rôznych typoch: líniové grafy, grafové grafy, radarové grafy, tabuľky polárnych oblastí, koláče a šišky. Knižnica je tiež rozdelená podľa typu grafu, aby vaše stránky neboli zablokované tým, čo nie je potrebné. Podporuje prispôsobivý dizajn a môžete ľahko meniť premenné, ako je farba alebo animácia, aby ste prispôsobili rozhranie grafu.
2. Chartist JS
Chartist JS je skvelá knižnica na vytváranie odpovedajúcich grafov, ktoré využívajú SVG. Okrem schopnosti reagovať Chartist ponúka flexibilitu tým, že využíva jasné oddelenie obáv: štýl s CSS a ovládanie pomocou JS. Ak chcete zjednodušiť prispôsobenie, sú zahrnuté súbory SASS. Skvelá vec tu je, že máte neobmedzené možnosti na animáciu vášho grafu pomocou rozhrania Chartist animation API, SMIL, ktorý vám poskytuje ďalšie možnosti animácie.
3. C3 JS
C3 JS je knižnica na vytváranie grafov založených na D3 JS. Zbalí požadovaný kód na vytvorenie grafov s D3 JS, takže môžete preskočiť písanie kódu D3 a stačí vložiť dáta. C3 je dodávaný s rôznymi API, ktoré môžete ľahko ovládať pomocou grafov. Ak chcete prispôsobiť graf, definujte vlastné štýly prispôsobené daným triedam CSS. Vytvárajte grafy z jednoduchých riadkov na grafy. Pozrite sa na túto stránku a zistite, ako funguje knižnica.
4. Flot
flot je jQuery plguin pre vytváranie grafov s interaktívnymi prvkami, ako je zapnutie alebo vypnutie série, interakcie dátových bodov, posúvanie, zväčšenie a ďalšie. Flota sa dodáva s rôznymi možnosťami typu grafu a ak chcete mať viac grafov na grafe, tu sú niektoré doplnky, ktoré môžete použiť aj. Grafy budú fungovať dobre s prehliadačmi podporujúcimi HTML plátna.
5. EChart
Echart je úžasne komplexná knižnica z Číny, ktorá podporuje viaceré typy grafov, spracováva veľké údaje (vykresľuje až 200 000 dátových bodov na kartézskom grafe), má roaming v mierke, schopnosť jednoducho extrahovať, integrovať a vymieňať dáta medzi viacerými grafmi, čo umožňuje jeden ľahko prepínať z jedného dátového typu do druhého a oveľa viac.
6. Zbohom
Peitou pridá vašu webovú stránku mini graf. Je to malý doplnok jQuery, ktorý premieňa prvok na mini svg line, bar, kobliha alebo koláčový graf. Stačí len vytvoriť prvok a dať hodnotu ako 1/5 a zavolajte Peitou ( 'pie') na tento prvok vytvorte mini koláčový graf. Napríklad, ak chcete vytvoriť grafiku šišky, ktorá je len pätina zvýraznená, tu je HTML:
1/5
Môžete prispôsobiť farbu grafu, polomer, šírku a výšku, ale predvolene sa zobrazuje v malej veľkosti.
7. DC JS
DC JS má podobnosť s C3 JS v zmysle použitého motora; obaja používajú knižnicu D3 na vytváranie grafov v SVG. DC JS je vytvorený, aby vám pomohol vizualizovať dáta a analýzy pre prehliadače a pre mobilné zariadenia. Vzhľadom na to, že využíva nástroj D3 JS, umožňuje vám pridať do tabuľky interakciu používateľa. DC JS je jedna silná knižnica na vytváranie grafov od jednoduchých až po veľmi zložité.
8. Google Graf
Pomocou rozhrania Google Visualization API môžete pomocou grafu Google vytvárať interaktívne grafy a dátové nástroje. K dispozícii sú grafy grafov na kontrolu funkcií vizualizácie údajov v grafe Google. Ak chcete začať, vložte do svojej webovej stránky jednoduchý JavaScript a načítajte knižnice knižníc Google, ktoré potrebujete. Potom zadať údaje, ktoré chcete načrtnúť, a vykonajte niektoré úpravy pomocou možností grafu. Nakoniec vytvorte objekt grafu s ID a na svojej webovej stránke vytvorte NVD3 je sada opakovane použiteľných grafov a komponentov grafu, ktoré sú postavené s D3 JS. Táto knižnica je teda "šablóna", ktorá vám pomôže uľahčiť vytváranie grafov. Pozrite sa na mnohé vzorové grafy postavené s NVD3 tu.
9. NVD3
Teraz si prečítajte: Knihovne JavaScript vytvorte interaktívne a prispôsobené mapy
