Nadzorna ploča s više stožernih stolova. Vodič s uputama

Zamislite da imate zadatak stvoriti nadzornu ploču performansi koja istovremeno prikazuje sažete i neobrađene podatke.

Možda se pitate koji je najbolji i štedi vrijeme način da postignete ovakav cilj.

Jedan od mogućih pristupa je organiziranje stožerne tablice s objedinjenim podacima i rešetke s neobrađenim podacima na jednoj stranici. Te dvije web komponente moraju dijeliti iste podatke i izvještavati, ali na različitim razinama detalja.

Srećom na Flexmonster API pozive, to je nevjerojatno jednostavno učiniti.

U ovom ćemo tutorialu detaljno objasniti postupak stvaranja potpuno interaktivne nadzorne ploče s više instancija okretne tablice. Ravna tablica s nepokupljenim podacima reagirat će na sve promjene u kompaktnom okretnom stolu.

Kao rezultat toga, dobit ćete spreman alat za vizualizaciju podataka i web izvješćivanje koji nudi značajke izvan okvira - objedinjavanje, sortiranje, filtriranje, povlačenje i ispustanje, probijanje i još mnogo toga.

Počnimo!

O metodama i događajima

Trebat ćemo koristiti sljedeće pozive API-ja:

  • setReport () - ova metoda omogućuje dinamično mijenjanje izvještaja, tj. tijekom izvođenja. Također, možete unaprijed spremiti izvješća u stožernu tablicu.
  • reportcomplete - ovaj se događaj pokreće kada se podaci iz izvješća, lokalizacijska datoteka učitaju u okretnu tablicu i renderiraju rešetka / grafikon. Drugim riječima, to znači da možete započeti rad s komponentom okretne tablice.
  • izmjena izvještaja - ovaj se događaj pokreće nakon što se u izvješću dogodi neka promjena (npr. filtriranje, sortiranje, oblikovanje, dodavanje izračunatih mjera, pokretanje upita itd.).

1. korak: postavljanje sa Flexmonster skriptama

Dodajte potrebne skripte na svoju web stranicu:

Ne zaboravite dodati spremnike u kojima će biti prikazane obje tablice:

Korak 2: Inicijalizirajte kompaktnu okretnu tablicu

Dodajte ovaj JavaScript kôd da aktivirate prvu komponentu:

Kao što vidite, postavili smo put do izvora podataka i odredili krišku - dio izvješća koji opisuje koje hijerarhije bi trebale biti prikazane na mreži.

Da bismo ćelije označili bojama na temelju njihovih vrijednosti, definirali smo objekt uvjetnog formata.

Korak 3: Stvorite ravnu mrežu

Cijeli je kod za ravnu tablicu sličan onome koji je gore, ali da biste uključili ravni prikaz okretne tablice, morate je specificirati u njezinim mogućnostima:

Korak 4: Uspostavljanje interakcije okretnih stubova

Priložite alat za obradu događaja na događaj nepotpune tablice sa izvješćem. U definiciji funkcije, nakon što se podaci učitaju, izvadite tekuće izvješće iz kompaktne tablice i postavite njegov rez na ravnu tablicu.

Isto tako, dodajte alat za obradu događaja događaju izmjene izvještaja kompaktne tablice kako biste mogli slušati promjene izvješća.

Ovdje se provodi ista logika:

  • dobivanje izvještaja iz kompaktnog stola
  • postavljajući svoju krišku na izvješće ravnog stola.

Završni korak: uživajte i dijelite rezultate

Pogledajte nadzornu ploču Flexmonster (@flexmonster) na CodePen nadzornoj ploči olovke i olovke olovke olovke Flexmonster.

Sažetak

Danas ste u praksi naučili kako izraditi JavaScript nadzornu ploču vezanjem dviju instanci stožerne tablice uz pomoć Flexmonster API poziva.

S Flexmonsterom postupak prijavljivanja ima sve šanse postati uvidljiv i učinkovit. Slobodno ga koristite za praćenje pokazatelja vaše organizacije!

Korisni linkovi

  • Demonstracija uživo
  • Flexmonster stožerna tabela i grafikoni
  • Više demo podataka Flexmonster

Izvorno objavljeno na https://codepen.io.