Dashboard mit mehreren Pivot-Tabellen. Anleitung

Stellen Sie sich vor, Sie haben die Aufgabe, ein Leistungs-Dashboard zu erstellen, in dem zusammengefasste und unformatierte Daten gleichzeitig angezeigt werden.

Sie fragen sich vielleicht, wie Sie dieses Ziel am besten und zeitsparend erreichen können.

Ein möglicher Ansatz besteht darin, eine Pivot-Tabelle mit aggregierten Daten und ein Raster mit Rohdaten auf einer einzigen Seite anzuordnen. Diese beiden Webkomponenten müssen dieselben Daten und Berichte mit unterschiedlichen Detaillierungsgraden gemeinsam nutzen.

Dank der Flexmonster-API-Aufrufe ist dies unglaublich einfach.

In diesem Lernprogramm wird das Erstellen eines vollständig interaktiven Dashboards mit mehreren Pivot-Tabelleninstanzen ausführlich beschrieben. Die flache Tabelle mit nicht aggregierten Daten reagiert auf Änderungen in der kompakten Pivot-Tabelle.

Als Ergebnis erhalten Sie ein sofort einsatzbereites Tool für die Datenvisualisierung und das Erstellen von Webberichten mit sofort einsatzbereiten Funktionen - Aggregieren, Sortieren, Filtern, Ziehen und Ablegen, Drillthrough und mehr.

Lasst uns beginnen!

Über Methoden & Ereignisse

Wir müssen die folgenden API-Aufrufe verwenden:

  • setReport () - Mit dieser Methode kann der Bericht dynamisch geändert werden, d. h. zur Laufzeit. Sie können auch die zuvor gespeicherten Berichte in die Pivot-Tabelle laden.
  • reportcomplete - Dieses Ereignis wird ausgelöst, wenn die Daten aus einem Bericht, einer Lokalisierungsdatei in die Pivot-Tabelle geladen und das Raster / Diagramm gerendert wurden. Mit anderen Worten bedeutet dies, dass Sie mit der Pivot-Tabellenkomponente arbeiten können.
  • reportchange - Dieses Ereignis wird ausgelöst, sobald Änderungen in einem Bericht vorgenommen wurden (z. B. Filtern, Sortieren, Formatieren, Hinzufügen berechneter Kennzahlen, Ausführen von Abfragen usw.).

Schritt 1: Einrichten mit Flexmonster-Skripten

Fügen Sie die erforderlichen Skripte zu Ihrer Webseite hinzu:

Vergessen Sie nicht, die Container hinzuzufügen, in denen beide Tabellen gerendert werden:

Schritt 2: Initialisieren Sie eine kompakte Pivot-Tabelle

Fügen Sie diesen JavaScript-Code hinzu, um die erste Komponente zu instanziieren:

Wie Sie sehen, haben wir einen Pfad zur Datenquelle festgelegt und ein Segment angegeben - ein Teil des Berichts, der beschreibt, welche Hierarchien im Raster angezeigt werden sollen.

Um die Zellen anhand ihrer Werte farblich hervorzuheben, haben wir das Objekt für das bedingte Format definiert.

Schritt 3: Erstellen Sie ein flaches Raster

Der gesamte Code für einen flachen Tisch ist dem obigen ähnlich, aber um die flache Ansicht des Pivot-Tisches zu aktivieren, müssen Sie ihn in seinen Optionen angeben:

Schritt 4: Pivots interagieren lassen

Hängen Sie einen Ereignishandler an das reportcomplete-Ereignis der Kompakttabelle an. Wenn in der Funktionsdefinition die Daten geladen sind, rufen Sie den aktuellen Bericht aus der kompakten Tabelle ab und setzen Sie den Slice auf die flache Tabelle.

Fügen Sie dem Ereignis reportchange der Instanz der kompakten Tabelle einen Ereignishandler hinzu, um die Änderungen des Berichts abhören zu können.

Hier ist die gleiche Logik implementiert:

  • einen Bericht von der kompakten Tabelle erhalten
  • Setzen Sie den Slice auf den Bericht des flachen Tisches.

Letzter Schritt: Genießen und teilen Sie die Ergebnisse

Weitere Informationen finden Sie im Pen Flexmonster Pivot Table & Charts Dashboard von Flexmonster (@flexmonster) auf CodePen.

Zusammenfassung

Heute haben Sie in der Praxis gelernt, wie Sie ein JavaScript-Dashboard erstellen, indem Sie mithilfe von Flexmonster-API-Aufrufen zwei Pivot-Tabelleninstanzen zusammenbinden.

Mit Flexmonster hat der Berichtsprozess alle Chancen, aufschlussreich und effektiv zu werden. Sie können es gerne zur Verfolgung der Messdaten Ihres Unternehmens verwenden!

Nützliche Links

  • Live-Demo
  • Flexmonster Pivot Table & Charts
  • Weitere Flexmonster-Demos

Ursprünglich veröffentlicht unter https://codepen.io.