Sukurti „JavaScript“ maitinamų duomenų diagramas su „Billboard.js“

Grafika ir vaizdai vaidina svarbų vaidmenį gerinant interneto turinį. Šiuolaikinėmis technologijomis taip lengva į savo puslapį pridėti pasirinktinius vaizdus, ​​pvz., SVG piktogramas.

Tačiau dar vienas nuostabus vizualus, kurį galite sukurti iš nulio, yra interneto diagrama.

Tai gali jums padėti vizualiai grafikuoja duomenis todėl lankytojai gali greitai nuvilkti reikiamą informaciją. O vietoj grafiko kodavimo galite naudoti tokį biblioteką kaip Billboard.js, kad atliktumėte visą sunkų kėlimą.

Tai faktiškai pastatyta ant D3, kuri yra „JavaScript“ duomenų vizualizacijos biblioteka. Tai lengvai populiariausia ten, todėl ji yra saugiausia priklausomybė, kurią galite paprašyti.

Su Billboard.js galite greitai ir lengvai pasiekti D3 API. Pagrindinis Billboard tikslas yra lengva naudotis, todėl ji prieinama visiems. Nors tai padeda šiek tiek patirties su „JavaScript“, jums tikrai nereikia būti ekspertu.

Atkreipkite dėmesį, kad visa kodo bazė naudoja ES6 sintaksę, kuri gali būti paini su mažiau patyrusiais JS devs.

Tol, kol jūs žinoti, kaip sudaryti kodą turėtumėte būti gerai. Mes norėjome daugiau sužinoti apie ES6 keletą karštų funkcijų.

Visi techniniai duomenys apie šį papildinį gali atrodyti gražūs. Bet tikriausiai tik norite žinoti ką tai gali padaryti.

Pažvelkite į demonstracinį puslapį ir spustelėkite kai kuriuos tiesioginius pavyzdžius.

Viską rasite nuo pyrago diagramų iki sklaidos sklypų ir pasirinktinių animuotų juostų diagramų.

Su Billboard.js turite visiškai kontroliuoti savo duomenis. Jūs kontroliuojate, kaip jis rodomas puslapyje, kaip jis yra struktūrizuotas ir kokios rūšies UI / UX funkcijos pridedamos (jei yra).

Tai tikrai fantastiška diagramų biblioteka ir tai vienas iš paprasčiausių. Pažvelkite į projekto „GitHub“ repo, kad sužinotumėte daugiau.

Jei norite žaisti su savo naršyklės kodu, taip pat galite įeiti į šį „CodePen“ fragmentą.