Создание Pivot Chart на Странице

Поскольку Pivot является дополнением к библиотеке Webix, вам необходимо включить скрипты Webix и Pivot Chart а также их CSS файлы. Убедитесь, что вы указали относительные пути к этим файлам:

<html>
 <head>
  <!-- js files -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <script src="codebase/pivot.js" type="text/javascript"></script>
  <!-- css files -->
  <link rel="stylesheet" href="codebase/webix.css" type="text/css" charset="utf-8">
  <link rel="stylesheet" href="codebase/pivot.css" type="text/css" charset="utf-8">
 </head>
 <body>
   <div id = "testA"></div>  <!-- container for Pivot Chart-->
 </body>
</html>

Инициализация Pivot не отличается от инициализации других компонентов Webix и выполняется с помощью конструктора webix.ui(), где вы перечисляете все необходимые свойства:

webix.ui({
    container:"testA",
    id:"pivot",
    view:"pivot-chart",
    structure:{
        groupBy: "continent",
        values: [
            {name:"balance", operation:"max", color: "#eed236"},
            {name:"oil", operation:"max", color: "#36abee"}
        ],
        filters:[{name:"year", type:"select"}]
    },
    url: "../common/data.json"
});

Related sample:  Initialization with Inline Data

Основные свойства

  • id - (string,number) ID компонента, должен быть уникальным в пределах страницы. Обращение к любому компоненту в Webix осуществляется по его ID: $$("id");
  • container - (string) ID контейнера HTML, в который можно поместить Pivot Chart (необязательное свойство);
  • fieldMap - (object) используется для задания пользовательских названий для полей (необязательное свойство). Больше информации в разделе (Переименование Полей);
  • data или url - (string) определяет данные (подробнее в статье);
  • structure - (object) определяет начальную структуру и внешний вид Pivot Chart (подробности ниже);
  • chart - (object) дефолтные параметры диаграммы, доступные для переопределения (подробнее);
  • chartType - (string) определяет дефолтный тип диаграммы;
  • chartMap - (object) используется для переопределения дефолтных типов диаграммы ('bar', 'line', 'radar') или добавления нового ('stacked bar' or 'area') (подробнее);
  • filterWidth - (number) устанавливает ширину фильтра (применяется к ширине инпута и его названия) в заголовке диаграммы;
  • filterLabelWidth - (number) устанавливает ширину для "подписи с названием" (label) фильтра;
  • filterLabelAlign - (string) устанавливает горизонтальное выравнивание для "подписи с названием" (label) фильтра;
  • editButtonWidth - (number) устанавливает ширину кнопки "Settings";
  • singleLegendItem - (boolean) указывает, должна ли отображаться легенда, если она содержит только 1 элемент;
  • palette - (array) устанавливает цветовую палитру для элементов списка Values'
    palette:[ ["#e33fc7","#a244ea",...],["#d3ee36","#eed236",.. ],.. ]
    каждый внутренний массив определяет строку в палитре;
  • separateLabel - (boolean) разделяет "label" и фильтр Pivot и снимает размерные ограничения для "label", по умолчанию true.

Объект "structure"

  • values - массив полей, значения из которых будут представлены на диаграмме;
  • filters - массив полей, которые будут использованы для фильтрации и будут отображаться в заголовке диаграммы;
  • groupBy - поле для группировки значений.
Наверх
If you have not checked yet, be sure to visit site of our main product Webix html5 library and page of javascript pivot grid product.