9 Javascript könyvtárak interaktív diagramok létrehozásához
Tehát a kezedben rengeteg adat van, számos változóval, hogy valahogy másra kell továbbítanod. A nyers, szervetlen adatok nehezen érthetik meg őket. Ezért van szüksége a diagramok segítségére. A web design, A diagramok az egyik legjobb eszköz az adatmegjelenítéshez. Könnyen olvasható, könnyű a szemen és viszonylag könnyen beállítható.
De vegyük fel a dolgokat egy szögben: lássuk adjunk hozzá animációt és interaktivitást ezekhez a diagramokhoz, úgy, hogy az olvasók nemcsak valami újat tudjanak tanulni a diagramból, hanem vele is játszani. Valóban könnyebb, mint amilyennek hangzik, köszönhetően számos JS könyvtárnak. Nézzük meg őket.
1. JS
Chart.js egy nem függő könyvtár, amely 6 különböző típusú diagramokat hoz létre: vonalkódok, sávdiagramok, radar diagramok, poláris terület diagramok, pite és fánk diagramok. A könyvtár a diagramtípus szerint is meg van osztva, így az oldalai nem lesznek leereszkedve azzal, ami nem szükséges. Támogatja a rugalmas kialakítást, és könnyen módosíthatja a változókat, például a színt vagy az animációt, hogy testreszabja a diagram felületét.
2. Chartist JS
Chartist JS nagyszerű könyvtár, amely az SVG-t használó érzékeny diagramokat készít. A válaszadó képessége mellett a Chartist rugalmasságot biztosít azáltal, hogy egyértelműen elkülöníti az aggályokat: a stílust a CSS-szel és az irányítást a JS-sel. A testreszabás megkönnyítése érdekében a SASS fájlokat tartalmazza. A nagyszerű dolog, hogy korlátlan lehetőségeket kínál a diagramod animálására a Chartist animációs API-val (SMIL), amely további animációs lehetőségeket kínál.
3. C3 JS
C3 JS egy könyvtár, amely a D3 JS alapján készít diagramokat. A szükséges kódot a D3 JS-hez való diagramok összeállításához tárolja, így kihagyhatja a D3-kód írását, és csak adja meg az adatokat. A C3 sokféle API-val rendelkezik, amellyel könnyen kezelheti a diagramjait. A diagram testreszabásához adja meg saját egyéni stílusait az adott CSS osztályokhoz. Építsd a diagramokat egyszerű vonalkódoktól a diagramok méréséhez. Nézze meg ezt az oldalt, hogy megtudja, hogyan működik a könyvtár.
4. Flot
Flot egy jQuery plguin egy olyan interaktív elemekkel rendelkező diagramok létrehozásához, mint a sorozat be- és kikapcsolása, adatpontok kölcsönhatása, panoráma, nagyítás és így tovább. A flot számos diagramtípus opcióval rendelkezik, és ha több képességet szeretne a diagramon, itt néhány plugin is használható. A diagramok jól fognak működni a böngészőkkel, amelyek támogatják a HTML vászonokat.
5. EChart
Echart egy elképesztően átfogó kínai könyvtár, amely több diagramtípusot támogat, a nagy adatokat feldolgozhatja (akár 200 000 adatpontot rajzolhat egy kartéziai diagramon), skálázott barangolással rendelkezik, képes arra, hogy könnyedén kivonja, integrálja és kicserélje az adatokat a több diagram között. az egyik, hogy könnyen átválthasson egy adattípust egy másikra, és sokkal többet.
6. Bölcsesség
Peity hozzáad egy mini táblázatot a weboldalához. Ez egy kis jQuery plugin, amely egy elemet mini-ként alakít át svg vonal, bár, fánk vagy kördiagram. Csak egy elemet kell létrehoznia, és olyan értéket kell adnia, mint az 1/5 és hívjon peity ( 'pite') azon az elemen, hogy hozzon létre egy mini kördiagramot. Ha például egy ötödik kiemelt fánk diagramot szeretne létrehozni, itt van a HTML:
1/5
Testreszabhatja a diagram színét, sugarát, szélességét és magasságát, de alapértelmezés szerint kis méretben jelenik meg.
7. DC JS
DC JS hasonlít a C3 JS-hez a használt motor tekintetében; mindketten a D3 könyvtárat használják a grafikonok SVG-ben történő megjelenítéséhez. A DC JS a böngészők és a mobil eszközök adatainak és elemzésének megjelenítésére szolgál. Mivel a D3 JS-t használja, lehetővé teszi a felhasználói interakció hozzáadását a diagramhoz. A DC JS egy erőteljes könyvtár, amely egyszerű és nagy bonyolultságú diagramokat hoz létre.
8. Google diagram
Interaktív grafikonokat és adathordozókat hozhat létre a Google vizualizációs API segítségével a Google Diagramon keresztül. Vannak diagramgalériák, amelyekkel megtekintheti a Google Chart adatmegjelenítési képességeit. Először az egyszerű JavaScript beágyazása a weblapjára, hogy betöltse a szükséges Google Chart könyvtárakat. Ezután jegyezze fel a kívánt adatokat, és készítsen néhány testreszabást a diagram beállításain keresztül. Végül hozzon létre egy azonosítóval rendelkező diagramobjektumot, és a weblapján hozzon létre egy NVD3 egy újrafelhasználható diagramok és diagramösszetevők halmaza, amelyeket D3 JS-vel építettek. Ez a könyvtár tehát egy „sablon”, amely megkönnyíti a grafikonok építését. Itt tekintheti meg az NVD3-val készült sok mintatáblát.
9. NVD3
Most olvassa el: JavaScript-könyvtárak az interaktív és testreszabott térképek létrehozásához
