Prístrojová doska s viacerými kontingenčnými tabuľkami. Výukový program

Predstavte si, že máte úlohu vytvoriť informačný panel výkonnosti, ktorý zobrazuje súčasne súhrnné aj nespracované údaje.

Možno sa pýtate, aký je najlepší a časovo úsporný spôsob, ako dosiahnuť tento druh cieľa.

Jedným z možných prístupov je usporiadanie kontingenčnej tabuľky so súhrnnými údajmi a mriežky so surovými údajmi na jednej stránke. Tieto dve webové komponenty musia zdieľať rovnaké údaje a správy, ale na rôznych úrovniach podrobnosti.

Našťastie volanie na rozhrania API rozhrania Flexmonster je neuveriteľne ľahké.

V tomto návode sa podrobne venujeme procesu vytvorenia úplne interaktívneho dashboardu s viacerými inštanciami kontingenčných tabuliek. Plochá tabuľka s neagregovanými údajmi bude reagovať na akékoľvek zmeny v kompaktnej kontingenčnej tabuľke.

Vo výsledku získate nástroj na vizualizáciu údajov a vytváranie webových prehľadov, ktorý je pripravený na okamžité použitie, a ktorý poskytuje funkcie, ktoré sú k dispozícii okamžite - zoskupovanie, triedenie, filtrovanie, pretiahnutie, prejdenie a ďalšie.

Začnime!

O metódach a udalostiach

Budeme musieť použiť nasledujúce hovory API:

  • setReport () - táto metóda umožňuje dynamickú zmenu správy, t. j. za behu. Do kontingenčnej tabuľky môžete tiež načítať predtým uložené prehľady.
  • reportcomplete - táto udalosť sa spustí, keď sa údaje zo správy, lokalizačného súboru načítajú do kontingenčnej tabuľky a vykreslí sa mriežka / graf. Inými slovami to znamená, že môžete začať pracovať s komponentom kontingenčnej tabuľky.
  • reportchange - táto udalosť sa spustí, keď nastane nejaká zmena v správe (napr. filtrovanie, triedenie, formátovanie, pridávanie vypočítaných mier, spúšťanie otázok atď.).

Krok 1: Nastavenie pomocou skriptov Flexmonster

Pridajte na svoju webovú stránku potrebné skripty:

Nezabudnite pridať kontajnery, v ktorých budú vykreslené obe tabuľky:

Krok 2: Inicializácia kompaktného otočného stola

Pridajte tento kód JavaScript na vytvorenie prvého komponentu:

Ako vidíte, nastavili sme cestu k zdroju údajov a určili sme časť - časť prehľadu, ktorá popisuje, ktoré hierarchie sa majú zobraziť v mriežke.

Na zvýraznenie buniek farbami na základe ich hodnôt sme definovali objekt podmieneného formátu.

Krok 3: Vytvorte rovnú mriežku

Celý kód pre plochý stôl je podobný ako vyššie uvedený, ale ak chcete zapnúť plochý pohľad na otočnú tabuľku, musíte ju uviesť v jej možnostiach:

Krok 4: Vytvorenie interakcie čapov

Pripojte obslužný program udalosti k udalosti dokončenia správy kompaktnej tabuľky. V definícii funkcie po načítaní údajov získajte aktuálnu správu z kompaktnej tabuľky a nastavte jej rez na rovnú tabuľku.

Podobne pridajte obslužný program udalosti do udalosti changechange inštancie kompaktnej tabuľky, aby ste mohli počúvať zmeny správy.

Tu je implementovaná rovnaká logika:

  • získať správu z kompaktnej tabuľky
  • položí svoj výrez na správu plochého stola.

Posledný krok: Vychutnajte si a zdieľajte výsledky

Pozri tabuľku otočných tabuliek a tabuliek grafov Flex Flexster spoločnosti Flexmonster (@flexmonster) na stránke CodePen.

zhrnutie

Dnes ste sa v praxi naučili, ako zostaviť informačný panel JavaScript tak, že spojíte dve inštancie kontingenčných tabuliek spolu s hovormi Flexmonster API.

V prípade Flexmonster má postup vykazovania všetky šance stať sa prehľadným a efektívnym. Neváhajte ho použiť na sledovanie metrík vašej organizácie!

Užitočné odkazy

  • Živé ukážky
  • Kontingenčný stôl a grafy Flexmonster
  • Viac ukážok Flexmonster

Pôvodne uverejnené na https://codepen.io.