Dinamikus grafikonok gyors felépítése a D3-on a Plottable.js segítségével

A szabad D3.js könyvtár csak egy a sok közül, ami lehetővé teszi interaktív grafika létrehozása az oldalon. Míg a D3 talán a legnépszerűbb a csomóból, a használat megtanulása nem könnyű feladat.

Ezért Plottable.js egy ilyen értékes könyvtár. Ez egy ingyenes nyílt forráskódú projekt épült a D3.js tetején, megkönnyíti bárki számára a létrehozást interaktív adatgrafikonok a semmiből.

Ez a könyvtár kezeli az összes piszkos munkát, így összpontosíthat a sajátosságokra, például az adatokra. Plottable generálja a megfelelő kódot a választott diagramok méretére és pozíciójára.

Minden diagram rendelkezik saját összetevőjével a Plottable-ban, ahol lehet másolja / illessze be a sablon kódot önállóan újjáépíteni a diagramot. Ebből az írásból kiválasztható 10 grafikon grafikon stílusa, beleértve a sávdiagramokat, a kördiagramokat, a szórólapokat és a területterületeket.

tudsz újjáépíteni az összetevőket egyénileg és a beállításokat dinamikusan testre szabhatja. Így könnyen megváltoztathatja az interaktív elemeket, a színeket, az animációkat, a helymeghatározásokat, a méreteket és bármi mást, amire szüksége van.

A teljes könyvtár elérhető a GitHub-on, ha a forráskódot szeretné böngészni és másolni.

De a legjobb módja a tanulásnak a példa. Éppen ezért érdemes megnézni őket a Plottable-ot futtató minta grafikonok hogy hogyan működik a cselekvés.

Minden grafikon teljesen interaktív, forráskóddal indítható. Ha hasonló grafikont szeretne újraépíteni, másolja / illessze be a JS kódot, és szükség esetén formázza újra.

Két személyes kedvencem van a webhelyükről: a Naptár Heatmap a GitHub tevékenységi táblája és a Szinkronizált diagramok dinamikus kiválasztási funkciókkal.

Ha még soha nem használta a D3.js-ot, akkor megpróbálja megtanulni ezt a könyvtárat. Különösen, mert ez írva TypeScript-ben, úgyhogy valószínűleg ezt is fel akarja venni. Az utolsó kód az ES5 JavaScript-be fordították, így kell minden nagyobb böngészőben.

Ha hajlandó vagy merülni, nézze meg őket Oktatóanyagok oldal tele van hasznos erőforrásokkal. Megtanul mindent, amire szüksége van ahhoz, hogy elkezdhessük a Plottable és a dinamikus web-alapú grafikonok létrehozása a semmiből.