Tablou de bord cu mai multe tabele pivot. Cum să-tutorial

Imaginați-vă că aveți o sarcină pentru a crea un tablou de bord de performanță care afișează simultan și rezumate date.

Este posibil să vă întrebați care este cea mai bună și economisire de timp pentru a atinge acest tip de obiectiv.

O abordare posibilă este de a aranja un tabel pivot cu date agregate și o grilă cu date brute pe o singură pagină. Aceste două componente web trebuie să partajeze aceleași date și raport, dar la niveluri diferite de detaliu.

Din fericire pentru apelurile API Flexmonster, este extrem de ușor de făcut.

În acest tutorial, vom aborda în detaliu procesul de creare a unui tablou de bord complet interactiv cu mai multe instanțe de tabel pivot. Tabelul plat cu date neagregate va reacționa la orice modificări din tabelul pivot compact.

În consecință, veți obține un instrument gata de utilizare pentru vizualizarea datelor și raportarea web care oferă funcții care nu sunt disponibile - agregarea, sortarea, filtrarea, drag-and-drop, drill-through și multe altele.

Să începem!

Despre metode și evenimente

Va trebui să folosim următoarele apeluri API:

  • setReport () - această metodă permite schimbarea raportului în mod dinamic, adică la timpul de execuție. De asemenea, puteți încărca în tabelul pivot rapoartele salvate anterior.
  • reportcomplete - acest eveniment este declanșat atunci când datele dintr-un raport, fișierul de localizare este încărcat în tabelul pivot și graficul / graficul a fost redat. Cu alte cuvinte, indică faptul că puteți începe să lucrați cu componenta tabelului pivot.
  • reportchange - acest eveniment este declanșat odată ce apare o modificare într-un raport (de exemplu, filtrarea, sortarea, formatarea, adăugarea măsurilor calculate, rularea interogărilor etc.).

Pasul 1: Configurarea cu scripturi Flexmonster

Adăugați scripturile necesare pe pagina web:

Nu uitați să adăugați containerele în care vor fi redate ambele tabele:

Pasul 2: Inițializați un tabel pivot compact

Adăugați acest cod JavaScript pentru a iniția prima componentă:

După cum vedeți, am setat o cale către sursa de date și am specificat o felie - o parte din raport care descrie ce ierarhii ar trebui să fie afișate pe grilă.

Pentru a evidenția celulele cu culori bazate pe valorile lor, am definit obiectul format condițional.

Pasul 3: Creați o grilă plană

Întregul cod pentru o masă plană este similar cu cel de mai sus, dar pentru a activa vizualizarea plană a tabelului pivot, trebuie să îl specificați în opțiunile sale:

Pasul 4: Crearea pivotilor interacționează

Atașați un handler de evenimente la evenimentul complet complet de raport al tabelului compact. În definiția funcției, odată ce datele sunt încărcate, obțineți raportul curent de la tabelul compact și setați felia pe masa plană.

De asemenea, adăugați un gestionar de evenimente la evenimentul de schimbare a raportului din instanța tabelului compact pentru a putea asculta modificările raportului.

Aici se implementează aceeași logică:

  • obținerea unui raport din tabelul compact
  • stabilindu-și felia pe raportul mesei plate.

Pasul final: bucurați-vă și partajați rezultatele

A se vedea Tabloul de bord și tabelele cu pixuri Flexmonster de Flexmonster (@flexmonster) pe CodePen.

rezumat

Astăzi ați învățat în practică cum să construiți un tablou de bord JavaScript, legând două instanțe de tabel pivot împreună cu ajutorul apelurilor API Flexmonster.

Cu Flexmonster, procesul de raportare are toate șansele de a deveni clar și eficient. Simțiți-vă liber să o utilizați pentru urmărirea valorilor organizației dvs.!

Link-uri utile

  • Demonstrație live
  • Flexmonster Pivot Table și Diagrame
  • Mai multe demo-uri Flexmonster

Publicat inițial la https://codepen.io.