Структура и Использование

Webix Pivot Chart состоит из двух функциональных частей:

  • Webix chart - диаграмма отражающая заданные поля данных:

Окно настроек

Окно настроек отражает текущую структуру Pivot Chart и содержит пять списков. Элементы внутри списков формируются на основе полей данных. Вы можете перетягивать элементы, тем самым меня структуру Pivot Chart:

Пример данных

[
    {"name": "China", "year": 2005, "continent": "Asia", "form": "Republic", 
    "gdp": 2256.919, "oil": 59.615, "balance": 134.098},
    //...
]
  • Список "Fields" содержит все доступные в данных поля (например, name, year, и т.п. из примера данных), КРОМЕ тех, которые находятся в списках "Filters" и "Group By".
  • Элементы списка "Values" определяют какие данные будут загружены для отображения в диаграмме. Каждый элемент данных будет представлен на диаграмме в отдельном столбце (подробнее).
  • Элемент списка "Group By" - это критерий группировки для элементов списка "Values". Например, если пользователь выберет элемент "balance" для списка "Values" (операция суммирования) и элемент "year" для списка "Group By", то диаграмма выведет общую сумму по странам за каждый год. Обратите внимание что для списка "Group By" можно выбрать только один элемент.
  • Элементы списка "Filters" определяют критерии для фильтрации диаграммы. Для каждого элемента списка "Filters" Pivot Chart создает инпут в заголовке диаграммы (подробнее).
  • В списке "Chart" вы можете задать логарифмическую диаграмму и выбрать ее тип.

Вы не можете поместить один элемент сразу в несколько списков. Однако элементы перемещенные в список Values все еще доступны для использования во всех списках кроме Filters.

Операции с данными

Текущие операции с данными связаны со значениями, которым они назначены в списке "Values". Вы можете изменить операцию, кликнув по ее названию в списке "Values".

  • Sum - суммирует все значения;
  • Max - выводит максимальное значение;
  • Min - выводит минимальное значение;
  • Count - подсчитывает количество вхождений.

В дополнение к упомянутым операциям, вы также можете создать свою.

Параметры фильтрации

По умолчанию, Webix Pivot предлагает следующие виды фильтров:

  • text - фильтрация по вводимым в текстовое поле символам. Поддерживает базовые математическое сравнения, например "< 100", "> 2.5" или "= 12". При отсутствии математических операторов, фильтр будет искать текстовые совпадения;
  • select - фильтрация по опциям, автоматически выбранным из данных (все уникальные значения). Например, если вы укажите Continents, все уникальные имена континентов из набора данных станут опциями фильтрации;
  • multiselect - фильтрация по опциям, автоматически выбранным из данных (все уникальные значения). Например, если вы укажите Continents, все уникальные имена континентов из набора данных станут опциями фильтрации. Фильтр позволяет выбирать несколько вариантов одновременно;
  • datepicker - фильтрация по датам, выбранным в календаре.

Вы можете задать фильтры в коллекции filters. Подробнее в статье Работа с Фильтрами.

Логарифмическая диаграмма

При широком диапазоне сравниваемых значений, рассмотреть наименьшие из них будет затруднительно. Для таких задач, вместо дефолтной столбчатой, лучше подойдет логарифмическая диаграмма.
Переключиться на логарифмический тип диаграмм вы можете в списке "Chart".

Наверх
If you have not checked yet, be sure to visit site of our main product Webix web ui framework and page of javascript pivot table product.