Настройка Pivot Chart

Получение и настройка объекта конфигурации

Для получения и установки объекта конфигурации Pivot Chart необходимо следующее:

// получить текущие настройки
var config = $$("pivot").getStructure();
 
// установить новые настройки
$$("pivot").setStructure(config);

Формат объекта config аналогичен параметру "structure" в конструкторе:

var config = {
    groupBy: "year",
    values: [{name:"balance", operation:"sum", color: "#eed236"}],
    filters:[{name:"name", type:"select"}]
}

Related sample:  Configuration

Получение объекта Chart

Вы можете получить доступ к объекту Chart, используя следующий код:

var chart = $$("pivot").$$("chart");

С доступом к объекту Chart вы можете воспользоваться любыми событиями и методами чарта.

Определение свойств Chart

Чтобы переопределить дефолтные свойства диаграммы, такие как легенда или ширина столбцов, используйте объект chart. Любое свойство, указанное в объекте chart, переопределит аналогичное свойство в дефолтном объекте конфигурации:

view:"pivot-chart",
chart: {
    scale: "logarithmic",
    barWidth: 25,
    legend: {
        layout: "x",
        align: "center",
        valign: "bottom"
    }
}

Related sample:  Defining Chart Properties

Вы можете использовать любое свойство из списка доступных для компонента Chart.

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

Операции задаются в объекте "structure" в массиве "values". Свойство "name" в объекте операции ссылается на свойство элемента данных, свойство color - на цвет соответствующего столбца диаграммы:

view:"pivot-chart",
id:"pivot",
structure:{
    values:[
        {name:"gdp",operation:"sum",color:"#eed236"}, // "GDP" будут суммированы
        {name:"oil",operation:"max",color:"#36abee"} // будет выведено наибольшее "oil"
    ]
}

Существуют 4 встроенные операции с данными:

  • sum - (по умолчанию) суммирует все значения;
  • max - выводит максимальное значение;
  • min - выводит минимальное значение;
  • count - подсчитывает количество вхождений.

Добавление пользовательской операции

По необходимости вы можете добавлять свои операции одним из следующих способов:

1) через параметр конфигурации groupMethods:

view:"pivot-chart",
groupMethods:{
    abssum: function(template, data){
        data = data || this;
        var summ = 0;
        for (var i = 0; i < data.length; i++)
            summ+= Math.abs(template(data[i])*1);
        return summ;
    }
}

И использовать его как:

values:[ name:"oil", operation:"abssum"]

Related sample:  Adding New Group Methods

2) с помощью метода addGroupMethod():

метод принимает два параметра:

  • name - (string) имя операции
  • operation - (function) функция, которая будет вызываться для каждой ячейки в колонке с этой операцией. Принимает два параметра:
    • template - (function) функция, которая позволяет получить доступ к свойству, по которому данные были сгруппированы
    • data - (object) объект данных с элементами группы
$$('pivot').addGroupMethod("median", function(template, data){
  if (!data.length) return 0;
  var summ = 0;
  for (var i = data.length - 1; i >= 0; i--) {
    summ += template(data[i])*1;
  };
  return summ/data.length;
});

Related sample:  The addGroupMethod() Method

Удаление операции

Чтобы удалить операцию, используйте метод removeGroupMethod(). В качестве параметра метод принимает имя удаляемой операции:

$$('pivot').removeGroupMethod("min");

Фильтры

Фильтры задаются внутри объекта "structure", в массиве filters. Параметр name - это имя элемента данных, используемого для фильтрации свойства:

view:"pivot-chart",
structure:{
    values:[
        {name:"name",type:"select"},
        {name:"continent", type:"text"}
    ]
}

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

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

Переименование полей

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

[{ a1:100, a2:1.34 }, ...]

В таком случае, чтобы задать подходящие для вас имена (вместо a1 и a2) вы можете воспользоваться свойством fieldMap:

webix.ui({
    view:"pivot",
    fieldMap:{ "a1" : "GDP", "a2" : "Grow ratio" },
    //...
});

Related sample:  Mapping Field Names

Добавление типов

По умолчанию Pivot Chart предоставляет возможность использовать три типа диаграмм: 'bar', 'line', 'radar'. Вы можете переопределить дефолтный тип или добавить новый.

Дополнительно могут быть добавлены только типы 'stacked bar' и 'area'.

Чтобы добавить новый тип в Pivot Chart, используйте свойство chartMap:

Добавление нового типа диаграммы

view:"pivot-chart",
chartMap: {
    "Area Radar": function(color){ // добавляется новый тип 'Area Radar'
        return {
            type: "radar",
            alpha: 0.4,
            disableItems: true,
            fill: color,
            line:{
                color: color,
                width:1
            }
        }
    },
    "Line": function(color){ // переопределяется дефолтный тип 'Line'
        type:"line",
        offset:false,
        preset:"plot"
    }
}

Типы диаграмм определяются по названиям ("Area Radar" и "Line" в коде выше). Названия типов по умолчанию вы можете найти в списке поля "Chart" Окна настроек.

Установка режима "Только для чтения"

Чтобы отключить возможность редактирования настроек Pivot Chart, вы можете задать свойству readonly значение true:

webix.ui({
    view: "pivot-chart",
    readonly:true,
    //...
});

Related sample:  Read-Only

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