Табло за управление с множество въртящи се таблици. Урок за употреба

Представете си, че имате задача да създадете табло за ефективност, което да показва обобщени и сурови данни едновременно.

Може би се чудите какъв е най-добрият и спестяващ време начин за постигане на този вид цел.

Един възможен подход е да подредите оборотна таблица с обобщени данни и мрежа със сурови данни на една страница. Тези два уеб компонента трябва да споделят едни и същи данни и отчет, но с различни нива на детайлност.

За щастие на Flexmonster API обажданията, това е невероятно лесно.

В този урок ще разгледаме подробно процеса на създаване на напълно интерактивно табло с множество екземпляри на оборотна таблица. Плоската таблица с неагрегирани данни ще реагира на всички промени в компактната въртяща се таблица.

В резултат на това ще получите готов за употреба инструмент за визуализация на данни и уеб отчитане, предоставящ функции, които се предлагат извън кутията - обобщаване, сортиране, филтриране, плъзгане и пускане, проверка и др.

Да започваме!

За методите и събитията

Ще трябва да използваме следните обаждания в API:

  • setReport () - този метод позволява динамична промяна на отчета, т.е. по време на изпълнение. Освен това можете да заредите в въртящата се таблица предварително запазените отчети.
  • reportcomplete - това събитие се задейства, когато данните от отчет, локализационен файл се зареждат в въртящата се таблица и се рендерира мрежата / диаграмата. С други думи, това показва, че можете да започнете да работите с компонента на въртящата се таблица.
  • смяна на отчетите - това събитие се задейства, след като в отчета настъпи някаква промяна (например филтриране, сортиране, форматиране, добавяне на изчислени мерки, изпълнение на заявки и т.н.).

Стъпка 1: Настройка с Flexmonster скриптове

Добавете необходимите скриптове към вашата уеб страница:

Не забравяйте да добавите контейнерите, в които ще бъдат изобразени и двете таблици:

Стъпка 2: Инициализирайте компактна въртяща се таблица

Добавете този JavaScript код, за да създадете първи компонент:

Както виждате, зададохме път към източника на данни и посочихме фрагмент - част от отчета, който описва кои йерархии трябва да бъдат показани в мрежата.

За да подчертаем клетките с цветове въз основа на техните стойности, дефинирахме обекта на условен формат.

Стъпка 3: Създайте плоска решетка

Целият код за плоска таблица е подобен на този по-горе, но за да включите плоския изглед на въртящата се таблица, трябва да я посочите в нейните опции:

Стъпка 4: Осъществяване взаимодействието на въртящите се опори

Прикачете манипулатор на събитията към събитието, завършено в отчета на компактната таблица. В дефиницията на функцията, след като се заредят данните, вземете текущия отчет от компактната таблица и задайте среза на плоската таблица.

По същия начин, добавете обработващ събитие към събитието за смяна на отчетите на екземпляра на компактната таблица, за да можете да слушате промените в отчета.

Тук е реализирана същата логика:

  • получаване на доклад от компактната маса
  • задавайки филийката си към отчета на плоската маса.

Последна стъпка: Насладете се и споделете резултатите

Вижте таблото за управление на шарнирната таблица и графиките на Flexmonster от Flexmonster (@flexmonster) на CodePen.

резюме

Днес научихте на практика как да изградите табло за управление на JavaScript, като свързвате два екземпляра на обобщена таблица заедно с помощта на Flexmonster API обаждания.

С Flexmonster процесът на отчитане има всички шансове да стане проницателен и ефективен. Чувствайте се свободни да го използвате за проследяване на показателите на вашата организация!

Полезни връзки

  • Демонстрация на живо
  • Flexmonster Pivot Table & Charts
  • Още демонстрации на Flexmonster

Първоначално публикуван на https://codepen.io.