JavaScript-alapú adat-diagramok létrehozása a Billboard.js-al

A grafikák és a vizuális képek alapvető szerepet játszanak a webtartalom javításában. A modern technológiával olyan egyszerű, hogy az SVG-ikokat tetszőleges vizuális képeket adhasson az oldalára.

De egy másik meglepő vizuális, amit a semmiből építhetsz, egy webes diagram.

Ez segíthet ábrázolja az adatokat vizuálisan így a látogatók gyorsan megragadhatják a vonatkozó információkat. Ahelyett, hogy egy gráfot kódolnánk, használhatsz egy olyan könyvtárat, mint például a Billboard.js.

Ez tulajdonképpen a D3 tetejére épül, amely egy JavaScript adatmegjelenítési könyvtár. Ez egyszerűen a legnépszerűbb, ami a legbiztonságosabb függőség, amit kérhet.

A Billboard.js segítségével gyorsan és egyszerűen elérheti a D3 API-t. A Billboard elsődleges célja könnyű használat, bárki számára hozzáférhető. Noha nem segíti elő a JavaScript használatát, biztosan nem kell szakértőnek lennie.

Csak vegye figyelembe, hogy a teljes kódbázis ES6 szintaxist használ, amely zavaró lehet a kevésbé tapasztalt JS devs-okkal.

Addig ameddig te tudja, hogyan kell összeállítani a kódot rendben kell lenned. Valójában néhány forró funkciót fedeztünk fel az ES6-tól, ha többet szeretne megtudni.

A plugin összes technikai adata szépnek tűnik. De valószínűleg csak tudni akarod mit tehet ez.

Tekintse meg a bemutató oldalt, és kattintson az élő példákra.

Mindent a kördiagramoktól kezdve a szétszórásig és az egyéni animált oszlopdiagramokig talál.

A Billboard.js-al van az adatok teljes ellenőrzése. Beállíthatja, hogyan jelenik meg az oldalon, hogyan strukturálódik, és milyen típusú UI / UX funkciókkal (ha vannak ilyenek).

Ez tényleg egy fantasztikus térképkönyvtár, és ez az egyik legegyszerűbb felvétel. Nézd meg a projekt GitHub repóját, hogy többet megtudj.

Ha a böngésződ kódjával szeretnél játékot játszani, a CodePen-be is belekeveredhetsz.