Opret JavaScript-drevne datakort med Billboard.js

Grafik og grafik spiller en afgørende rolle for at forbedre webindholdet. Med moderne teknologi er det så nemt at tilføje brugerdefinerede billeder som SVG-ikoner til din side.

Men en anden overraskende visuel du kan bygge fra bunden er et webdiagram.

Dette kan hjælpe dig grafisk dataene visuelt så dine besøgende kan hurtigt skimme relevante oplysninger. Og i stedet for at kode en graf selv kan du bruge et bibliotek som Billboard.js til at gøre alt det tunge løft.

Dette er faktisk bygget oven på D3, som er et JavaScript-data visualiseringsbibliotek. Det er let den mest populære en derude, der gør det til den sikreste afhængighed, du kan bede om.

Med Billboard.js kan du hurtigt og nemt få adgang til D3 API. Det primære mål for Billboard er brugervenlighed gør den tilgængelig for alle. Selv om det hjælper med at have en vis erfaring med JavaScript, behøver du helt sikkert ikke være ekspert.

Bare bemærk, at hele kodebase bruger ES6 syntaks, som kan forvirre til mindre erfarne JS devs.

Så længe du ved hvordan man kompilerer koden du skal være i orden Vi dækkede faktisk nogle få varme funktioner fra ES6, hvis du vil lære mere.

Alle de tekniske detaljer om dette plugin kan virke rart. Men du vil bare bare vide hvad dette kan gøre.

Se på demosiden og klik på nogle af de levende eksempler.

Du finder alt fra cirkeldiagrammer til spredningsdiagrammer og brugerdefinerede animerede bardiagrammer.

Med Billboard.js har du fuld kontrol over dine data. Du styrer, hvordan det vises på siden, hvordan det er struktureret, og hvilken type UI / UX-funktioner du tilføjer (hvis nogen).

Det er virkelig et fantastisk diagrambibliotek, og det er en af ​​de letteste at hente. Se på projektets GitHub repo for at lære mere.

Du kan også grave i denne uddrag på CodePen, hvis du vil lege med koden i din browser.