Пользовательское руководство

Webix Pivot – это современное решение для визуализации и бизнес-анализа больших объемов данных. Виджет позволяет создавать сводные таблицы и чарты, гибко их настраивать и работать с данными в трех режимах: Таблица, Дерево и Чарт. В этом гайде мы рассмотрим все основные возможности этого многофункционального инструмента.

Основной экран

Виджет можно визуально разделить на 4 основных части:

  • Тулбар
  • Левая панель
  • Панель данных (Сводная таблица/Чарт)
  • Панель настроек.

Тулбар

Тулбар находится в верхней части приложения и содержит контролы для управления виджетом. В правой части тулбара расположены кнопки для навигации между режимами работы с данными: Таблица, Дерево и Чарт. В левой части отображается кнопка, с помощью которой вы сможете показывать/прятать Панель настроек компонента. В центре тулбара будут отображаться добавленные фильтры.

Режим "Таблица"

В режиме Таблица, информация на Панели данных представлена в виде сводной таблицы. Левая панель виджета в этом режиме также будет отображаться в виде таблицы. На Панели настроек вы сможете настраивать Левую панель и Панель данных по своему усмотрению. Подробнее о настройках читайте в соответствующих параграфах гайда.

Режим "Дерево"

В режиме Дерево, информация на Панели данных представлена в виде сводной таблицы. Левая панель виджета в этом режиме будет отображаться в виде дерева (древовидной структуры). На Панели настроек вы сможете настраивать Левую панель и Панель данных по своему усмотрению. Подробнее о настройках читайте в соответствующих параграфах гайда.

Режим "Чарт"

В режиме Чарт, информация на Панели данных представлена в виде диаграмм. На Панели настроек вы сможете настраивать диаграммы по своему усмотрению. Подробнее о настройках читайте в соответствующих параграфах гайда.

Обратите внимание, что Левая панель в этом режиме отсутствует!

Настройка рядов таблицы

В режимах Таблица и Дерево вы можете настраивать ряды сводной таблицы. Названия рядов будут отображаться на Левой панели виджета в виде таблицы или дерева (в зависимости от выбранного режима). Чтобы их настроить, вам необходимо кликнуть по кнопке "Configure Pivot" в левой части Тулбара и перейти к соответствующей секции на Панели настроек.

В секции Rows вы можете делать следующее:

  • добавлять новые ряды при клике по кнопке "Add row"
  • удалять ряды при клике по крестику с правой стороны селектора
  • менять порядок и приоритет отображения рядов, перетаскивая их в нужное положение с помощью специального контрола слева от селектора. Чем выше ряд находится в списке, тем выше его приоритет и положение относительно левого края на Левой панели. Ряды с наивысшим приоритетом находятся в крайней левой позиции и включают в себя другие ряды, приоритет которых ниже
  • задавать параметр, данные которого будут отображаться в текущем ряду. Для этого нужно кликнуть по селектору рядов и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

Опции выпадающего списка, отмеченные цветными круглыми маркерами, уже используются для определения столбцов или значений таблицы. При выборе таких опций для создания рядов, они исчезнут из столбцов и значений таблицы!

В зависимости от установленного режима ( Таблица или Дерево ), Левая панель будет выглядеть следующим образом:

Левая панель в режиме "Таблица"

Левая панель в режиме "Дерево"

Настройка столбцов таблицы

В режимах Таблица и Дерево вы можете настраивать столбцы сводной таблицы. Названия столбцов будут отображаться в хедере таблицы. Чтобы их настроить, вам необходимо кликнуть по кнопке "Configure Pivot" в левой части Тулбара и перейти к соответствующей секции на Панели настроек.

В секции Columns вы можете делать следующее:

  • добавлять новые столбцы при клике по кнопке "Add column"
  • удалять столбцы при клике по крестику с правой стороны селектора
  • менять порядок и приоритет отображения столбцов, перетаскивая их в нужное положение с помощью специального контрола слева от селектора. Чем выше столбец находится в списке, тем выше его приоритет в хедере таблицы. Столбцы с наивысшим приоритетом находятся в самом верху хедера и включают в себя другие столбцы, приоритет которых ниже
  • задавать параметр, данные которого будут отображаться в текущем столбце. Для этого нужно кликнуть по селектору столбцов и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

Опции выпадающего списка, отмеченные цветными круглыми маркерами, уже используются для определения рядов или значений таблицы. При выборе таких опций для создания столбцов, они исчезнут из рядов и значений таблицы!

Настройка значений таблицы

В режимах Таблица и Дерево вы можете настраивать значения сводной таблицы. Названия значений будут отображаться в хедере таблицы под названиями соответствующих столбцов. Чтобы их настроить, вам необходимо кликнуть по кнопке "Configure Pivot" в левой части Тулбара и перейти к соответствующей секции на Панели настроек.

В секции Values вы можете делать следующее:

  • добавлять новые значения при клике по кнопке "Add value"
  • удалять значения при клике по крестику с правой стороны селектора
  • менять порядок и приоритет отображения значений, перетаскивая их в нужное положение с помощью специального контрола слева от селектора. Чем выше значение находится в списке, тем выше его приоритет в таблице. Значение с наивысшим приоритетом находится в крайней левой позиции столбца к которому относится
  • задавать параметр, данные которого будут отображаться в каждой ячейке столбца значении таблицы. Для этого нужно кликнуть по селектору значенией и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

Опции выпадающего списка, отмеченные цветными круглыми маркерами, уже используются для определения рядов или столбцов таблицы. При выборе таких опций для создания значений, они исчезнут из рядов и столбцов таблицы!

  • задавать функции, которые будут применяться для всех данных столбца значений таблицы. Для этого нужно кликнуть по селектору функций, который находится напротив каждого селектора значений, и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

Результат функций вы можете увидеть в футере таблицы (если он активирован) или в ряду с наивысшим приоритетом (в корневом ряду), находясь в режиме "Дерево".

В частности, вы можете задать следующие функции:

  • sum – сумма всех значений столбца (используется по умолчанию)
  • min – минимальное значение
  • max – максимальное значение
  • count – количество значений
  • avg – среднее значение
  • wavg – средневзвешенное значение
  • counta - returns the number of values in a dataset. Counts all types of data, does not count empty cells
  • countunique - returns the number of unique values in a list of specified values and ranges
  • median - returns the middle number of a group of numbers
  • product - returns the number obtained by multiplying all the given numbers
  • var - returns the variance of the values, treating them as a sample of a bigger set of values
  • varp - returns the variance of the values, treating them as an entire set of values
  • stdev - returns the standard deviation of the values, treating it as a sample of a bigger set of values
  • stdevp - returns the standard deviation of the values, treating it as the entire set of values
  • any – произвольное значение
  • complex - работает с составными выражениями и применяет пользовательские функции с более чем двумя параметрами.

Если в вашем проекте есть пользовательские функции (подробнее о них можно прочитать в соответствующей статье), то они будут добавлены в конец выпадающего списка:

Если вы выбираете пользовательскую функцию, которая принимает два параметра, то виджет отобразит два селектора:

В поле ввода complex вы можете вписать свои собственные составные выражения. Также это поле используется для применения пользовательских функций, которые принимают более двух параметров:

Общие настройки таблицы

В режимах Таблица и Дерево вы можете задавать общие настройки для сводной таблицы. Чтобы это сделать, вам нужно кликнуть по контролу "Configure Pivot" в левой части Тулбара, чтобы отобразить Панель настроек.

В секции Table вы можете делать следующее:

  • размещать результаты математических вычислений по горизонтальной оси с помощью чекбокса "Values on the row axis"
  • выделять минимальные значения ряда с помощью чекбокса "Min X"
  • выделять максимальные значения ряда с помощью чекбокса "Max X"
  • выделять минимальные значения столбца с помощью чекбокса "Min Y"
  • выделять максимальные значения столбца с помощью чекбокса "Max Y"
  • управлять футером таблицы, используя следующие контролы:
    • Off - прячет футер
    • On - показывает футер и отображает значения столбцов в соответствии с установленными функциями
    • Sum Only - показывает футер и отображает значения столбцов, к которым применена функция sum
  • управлять столбцом\столбцами с итогом для каждого значения, используя следующие контролы:
    • Off - прячет столбец\столбцы с итогом
    • On - показывает столбец\столбцы с итогом для каждого значения
    • Sum Only - показывает столбец\столбцы с итогом для столбцов, к которым применена функция sum
  • прятать/показывать повторяющиеся названия рядов крайнего левого столбца в режиме Таблица. Для этого нужно отметить чекбокс "Clean rows".

Настройки чарта

В режиме Чарт вы можете просматривать данные в виде диаграмм и гибко их настраивать. Для конфигурации Чарта вам нужно кликнуть по контролу "Configure Pivot" в левой части Тулбара, чтобы отобразить Панель настроек. Здесь вы можете делать следующее:

  • определять значения чарта
  • группировать данные по одному из параметров
  • фильтровать данные
  • задавать общие настройки чарта.

Значения чарта

В секции Values вы можете делать следующее:

  • добавлять новые значения чарта при клике по кнопке "Add value"
  • удалять значения при клике по крестику с правой стороны селектора
  • менять порядок и приоритет отображения значений, перетаскивая их в нужное положение с помощью специального контрола слева от селектора
  • выбирать название параметра, данные которого будут отображаться в чарте. Для этого нужно кликнуть по селектору значенией и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

  • задавать цвет чарта. Для этого нужно кликнуть по селектору цвета и выбрать подходящий. Смотрите изображение ниже:

  • задавать функцию, которая будет применяться к данным выбранного чарта. Для этого нужно кликнуть по селектору функций и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

Группирование данных чарта

В секции Group By вы можете сгруппировать данные чарта по одному из параметров. Для этого нужно кликнуть по селектору параметров и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

Сгруппированные данные будут отображаться в Чарте по оси X!

Диаграмма, данные которой сгруппированы по годам, будет выглядеть следующим образом:

Вы можете показывать/прятать любую из диаграмм при клике по иконкам в правой части Чарта.

Общие настройки Чарта

В секции Chart вы можете делать следующее:

  • устанавливать тип чарта. Для этого нужно кликнуть по селектору чартов и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

  • выбирать тип маркеров: квадратные, треугольные, ромбовидные или круглые (для типов Line, Spline, Radar, Scatter);

  • изменять положение легенды с помощью селектора Legend align;

  • указать название оси X графика через специальное поле;

  • указать название оси Y графика через специальное поле;

  • задать цвет шкалы графика.

Для этого перейдите в поле "Цвет оси" и выберите нужный цвет на цветовой палитре. Вы также можете задать название цвета непосредственно в поле ввода (HEX-код или строковое значение).

Следующий блок настроек представлен серией чекбоксов. Их количество зависит от типа диаграммы:

  • показать/скрыть подписи с помощью чекбокса Label (для типов Bar, Line, Radar, Spline, Scatter);
  • показать/скрыть тултипы с помощью чекбокса Tooltips;
  • создать гистограмму с накоплением с помощью чекбокса Stacked (для Bar и Area);
  • изменить ориентацию диаграммы на горизонтальную с помощью чекбокса Horizontal (только для Bar);
  • показать/скрыть логарифмическую шкалу с помощью чекбокса Logarithmic scale;
  • показать/скрыть линии осей X и Y с помощью соответствующих чекбокса X axis lines и Y axis lines (для типа Bar используется чекбокс Lines);
  • залить область графика цветом с помощью чекбокса Fill area (только для Radar);
  • закруглить линии с помощью чекбокса Circled lines (только для Radar).

Настройки для чартов Pie и Donut отличаются от других типов:

  • включить/выключить трехмерный вид диаграммы
  • показать/скрыть значения внутри диаграммы

Фильтрация данных

Webix Pivot позволяет применять множественную фильтрацию данных, вне зависимости от установленного режима (Таблица, Дерево или Чарт). Вы можете добавлять новые фильтры в тулбар приложения и гибко их настраивать.

Управление фильтрами

Для работы с фильтрами, перейдите в секцию Filters на Панели настроек (в любом режиме). Здесь вы можете управлять фильтрами следующим образом:

  • добавлять новые фильтры при клике по кнопке "Add filter"
  • удалять фильтры при клике по крестику с правой стороны селектора
  • менять порядок и приоритет применения фильтров, перетаскивая их в нужное положение с помощью специального контрола слева от селектора
  • выбирать нужный фильтр из списка доступных. Для этого вам следует кликнуть по селектору фильтров и выбрать необходимую опцию из выпадающего списка. Смотрите изображение ниже:

Настройка фильтров

Все добавленные фильтры будут отображаться на Тулбаре приложения. Приоритет фильтрации данных начинается с крайнего левого фильтра.

Чтобы настроить фильтрацию данных, кликните по нужному фильтру на Тулбаре и укажите необходимые параметры фильтрации.

Компактный режим

Вы можете использовать Webix Pivot на телефоне или планшете. Для этого у виджета предусмотрен компактный режим. Все функции приложения остаются такими же, как и у настольной версии. Изменения в интерфейсе смотрите на изображениях ниже.

Режим Дерево

Режим Таблица

Режим Чарт

Наверх