Базовые графики

В зависимости от общей компоновки страницы и бизнес-логики, разработчикам предлагается использовать один из контролов для реализации Графика:

  • Graphs/HighChartsLight - используется при работе с готовыми данными;
  • Graphs/HighCharts - используется при работе с данными из источника БЛ.

Graphs/HighChartsLight

1 <UINewDesign.components.AutodocDemoComponent.DemoComponent require="Engine-demo/Graphs/HighChartsLight/Index" index="{{1}}" isWasaby="{{true}}" />

Graphs/HighChartsLight является базовым контролом и позволяет отображать графики с использованием сторонней библиотеки HighCharts. С его помощью можно гибко настроить и отобразить график в любом поддерживаемом компанией браузере.

Справочные материалы и ресурсы

Руководство разработчика по конфигурации контрола

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

  1. Добавить контрол Graphs/HighChartsLight в шаблон страницы;
  2. Контрол конфигурируется с помощью единственной опции chartOptions. Это js-объект, который представляет собой полную конфигурацию для диаграммы HighCharts.
    WML:
<Graphs.HighChartsLight chartOptions="{{ _chartOptions }}" />
  1. Формируем конфигурацию, которую установим в опцию chartOptions. Опция соответствует документации библиотеки HighCharts. TS:
...
protected _beforeMount(): void {
   this._chartOptions = {
      chart: {
         type: 'line'
      },
      series: [{
         data: [10, 20, 30, 20, 10]
      }]
   };
}
...   

В результате получаем линейный график вида:

График с пользовательским форматированием всплывающей подсказки

Одной из возможностей контрола является отображение подсказки при наведении на точку графика.

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

WML подсказки:

<div>{{ x }} + {{ y }} = {{ x + y }}</div>

JS:

// шаблон подсказки
define('MyComponent', [
   'Core/Control',
   'wml!SomeDirectory/tooltipTemplate'
], function(Control, tooltipTemplate) {
   'use strict';
   return Control.extend({
      _chartOptions: null,
         
      _beforeMount: function() {
         this._chartOptions = {
            chart: {
               type: 'line'
            },
            series: [{ data: 1, 2, 3 }, { data: 3, 2, 1 }],
            tooltip: {
               formatter: this._tooltipFormatterFunction
            }
         }
      },
       
      // функция обратного вызова для форматирования подсказки
      tooltipFormatterFunction: function() {
         return tooltipTemplate({
            x: this.x,
            y: this.y
         });
      }
   });
});

Пользовательский шаблон всплывающей подсказки необходимо описывать в отдельном файле, не мешая wml и ts.

В результате получим график:

График с пользовательским форматированием подписей в виде таблицы

Ещё одна возможность контрола — отображение подписей по оси X в виде таблицы. Для того, чтобы вывести данные, необходимо выполнить базовую настройку контрола, а после подключить шаблон подписи и передать в него массив данных для отображения. Аналогично настраивается и ось Y.

WML подписи:

<div>
    <div>{{ date }}</div>
    <ws:for data="value in values">
        <div>{{ value }}</div>
    </ws:for>
</div>

TS:

define('MyComponent', [
   'Core/Control',
   'wml!SomeDirectory/labelTemplate'
], function(Control, labelTemplate) {
   'use strict';
   return Control.extend({
      _chartOptions: null,
      _beforeMount: function() {
         this._chartOptions = {
            chart: {
               type: 'column'
            },
            series: [{
                id: 'series1',
                name: 'Доходы',
                data: [1.1, 2.1, 2.9, 3.9, 5.1, 6.0, 7.8, 10.3]
            }, {
                id: 'series2',
                name: 'Расходы',
                data: [0.9, 1.5, 2.1, 3.4, 4.3, 5.1, 6.8, 9.1]
            }, {
                id: 'series3',
                name: 'Прибыль',
                data: [0.2, 0.5, 0.7, 0.5, 0.8, 0.9, 1.0, 1.2]
            }]
            xAxis: {
               labels: {
                  useHTML: true,
                  formatter: function() {
                     var year = new Date().getFullYear();
                     var values = [];
                     for (var i = 0; i < this.chart.series.length; i++) {
                           var value = this.chart.series[i].yData[this.pos];
                           values.push(value);
                     }
                     return labelTemplate({ year, values });
                  }
               }
            },
            legend: {
                y: 8,
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'bottom',
                symbolRadius: 0,
                itemMarginTop: 1,
                itemMarginBottom: 6
            }
         }
      }
   });
});

Пользовательский шаблон всплывающей подсказки необходимо описывать в отдельном файле, не мешая wml и ts.

В результате получим график:

Graphs/HighCharts

Graphs/HighCharts — контрол отображения данных на графиках посредством обращения к источнику бизнес логики.

Справочные материалы и ресурсы

Руководство разработчика по конфигурации контрола

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

  1. Добавить контрол Graphs/HighCharts в шаблон страницы;
  2. Контрол конфигурируется с помощью опций:

    • chartOptions — js-объект, который представляет собой полную конфигурацию для диаграммы HighCharts;
    • dataSource — источник данных;
    • filter — фильтр для источника данных;
    • wsAxis — массив конфигураций графиков (количество элементов в массиве равно количеству графиков);
    • wsSeries — массив полей к источнику данных для графиков (количество элементов в массиве равно количеству графиков) с параметрами.

    Массивом можно передать неограниченное количество графиков.

Рассмотрим пример конфигурации двух графиков — линейного и радиального.

WML:

<Graphs.HighCharts
   dataSource="{{ _dataSource }}"
   chartOptions="{{ _chartConfig }}"
   wsSeries="{{ _wsSeries }}"
   wsAxis="{{ _wsAxis }}"
   filter="{{ _filter }}"
/>

TS:

...
protected _beforeMount(): void {
   this._filter = '1';
   this._chartConfig = {
      credits: {
         enabled: false
      },
      title: {
         text: 'Example'
      }
   };
   this._dataSource = new Memory({
      rawData: [
         {
            title: 100,
            value: 11
         },
         {
            title: 200,
            value: 50
         },
         {
            title: 300,
            value: 130,
            id: 1
         }
      ]
   });
   this._wsSeries = [{
      sourceFieldX: 'title',
      sourceFieldY: 'value',
      sourceFieldId: 'id',
      type: 'line'
   },{
      sourceFieldX: 'title',
      sourceFieldY: 'value',
      sourceFieldId: 'id',
      type: 'pie'
   }, {
      sourceFieldX: 'title',
      sourceFieldY: 'value',
      sourceFieldId: 'id',
      type: 'spline'
   }];
   this._wsAxis = [{
      title: 'Title of line chart',
   }, {
      title: 'Title of pie chart',
   }, {
      title: 'Title of spline chart'
   }];
   this._filter = '1';
}
...

Дополнительные возможности

Контрол поддерживает разные типы графиков:

  • line — линейный;
  • spline — полиномиальный линейный;
  • pie — радиальный Pie chart;
  • column — столбчатый;
  • bar — столбчатый горизонтальный;
  • area — график с областями;
  • areaspline — полиномиальный график с областями;
  • scatter — точечный график;
  • arearange — интервальный;
  • areasplinerange — полиномиальный интервальный.

Также, контрол поддерживает два типа осей:

  • xAxis — горизонтальная ось;
  • yAxis — вертикальная ось.