9 Javascript knihovny vytvořit interaktivní grafy
Takže máte v ruce spoustu dat, s množstvím proměnných, které musíte nějakým způsobem předat někomu jinému. Surové, neorganizované údaje budou pro ně těžké pochopit. Proto potřebujete pomoc z grafů. Ve web designu, grafy jsou jedním z nejlepších nástrojů pro vizualizaci dat. Je snadno čitelný, snadno na očích a relativně snadno nastavitelný.
Ale pojďme si vzít věci do zářezu: pojďme přidávat animace a interaktivitu k těmto grafům, aby se čtenáři mohli nejen naučit něco nového z grafu, ale také si s ním hrát. Je to vlastně jednodušší, než to zní, díky množství knihoven JS venku. Podívejme se na ně.
1. Graf JS
Chart.js je knihovna bez závislosti na sestavení grafů v 6 různých typech: řádkové grafy, sloupcové grafy, radarové grafy, grafy polárních oblastí, grafy koláčů a grafů. Knihovna je také rozdělena podle typu grafu, takže vaše stránky nejsou zapadlé s tím, co není potřeba. Podporuje citlivý design a můžete snadno měnit proměnné, jako je barva nebo animace přizpůsobit rozhraní grafu.
2. Chartist JS
Chartist JS je skvělou knihovnou pro vytváření responzivních grafů, které využívají SVG. Kromě své citlivosti vám Chartist nabízí flexibilitu pomocí jasného oddělení zájmů: styl s CSS a řízení s JS. K usnadnění přizpůsobení jsou zahrnuty soubory SASS. Skvělá věc je, že máte neomezené možnosti animace grafu pomocí API animace Chartist, SMIL, což vám dává další možnosti animace.
3. C3 JS
C3 JS je knihovna pro tvorbu grafů založených na D3 JS. To zabalí požadovaný kód pro sestavení grafů s D3 JS, takže můžete přeskočit psaní D3 kód, a stačí zadat data. C3 je dodáván s řadou API, které můžete použít k ovládání grafů snadno. Chcete-li přizpůsobit svůj graf, definujte vlastní vlastní styly pro dané třídy CSS. Sestavte grafy z jednoduchých řádkových grafů do grafů měřidel. Podívejte se na tuto stránku a podívejte se, jak knihovna funguje.
4. Flot
Flot je jQuery plguin pro vytváření grafů s interaktivními prvky, jako je zapnutí nebo vypnutí série, interakce datových bodů, posouvání, přiblížení a další. Flot je dodáván s řadou možností typu grafu, a pokud chcete více schopností na grafu, zde jsou některé pluginy můžete použít také. Grafy budou dobře fungovat s prohlížeči, které podporují HTML plátna.
5. EChart
Echart Je to neuvěřitelně komplexní knihovna z Číny, která podporuje více typů grafů, dokáže zpracovávat velká data (vykreslování až 200 000 datových bodů na kartézském grafu), má měřítko roamingu, schopnost snadno extrahovat, integrovat a vyměňovat data mezi více grafy, což umožňuje jeden snadno přepnout z jednoho typu dat do druhého, a mnohem více.
6. Peity
Peity přidá mini graf na vaši webovou stránku. Jedná se o malý plugin jQuery, který transformuje prvek na mini svg řádek, pruh, kobliha nebo koláčový graf. Stačí vytvořit prvek a dát hodnotu jako 1/5 volání peity ('koláč') na tento prvek, aby mini koláčový graf. Chcete-li například vytvořit graf, který je zvýrazněn pouze jednou pětinou, zde je HTML:
1/5
Můžete přizpůsobit barvu grafu, poloměr, šířku a výšku, ale ve výchozím nastavení se zobrazuje v malé velikosti.
7. DC JS
DC JS má podobnost s C3 JS, pokud jde o použitý motor; oba používají knihovnu D3 k vykreslování grafů v SVG. DC JS je vytvořen, aby vám pomohl vizualizovat data a analýzy pro prohlížeče a mobilní zařízení. Vzhledem k tomu, že využívá D3 JS, umožňuje přidat uživatelské interakce do grafu. DC JS je jednou z mocných knihoven pro tvorbu grafů od jednoduchých až po vysoké složitosti.
8. Google Chart
Pomocí rozhraní Google Visualization API můžete vytvořit interaktivní grafy a datové nástroje pomocí grafu Google. Tam jsou grafy galerie, aby se podíval na schopnosti grafu Google vizualizace dat. Chcete-li začít, vložte na webovou stránku jednoduchý JavaScript a načtěte potřebné knihovny Google Chart. Pak seznam dat, které chcete zmapovat, a provést některé úpravy prostřednictvím možností grafu. Nakonec vytvořte objekt grafu s ID a na své webové stránce vytvořte NVD3 je sada opakovaně použitelných grafů a komponent grafu, které jsou vytvořeny s D3 JS. Tato knihovna je tedy „šablonou“, která vám usnadní tvorbu grafů. Podívejte se na mnoho vzorových grafů vytvořených s NVD3 zde.
9. NVD3
Nyní si přečtěte: Knihovny JavaScriptu pro vytvoření interaktivních a přizpůsobených map
