Круговая диаграмма

Контрол Graphs/DonutChart отображает круговую диаграмму и таблицу с данными в различных вариантах их взаимного расположения. Предоставляет готовую верстку, которая позволяет не настраивать отступы и шрифты.

Документация API Спецификация

Отображаемые данные

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

id - идентификатор элемента,
colorIndex - цвет сектора на графике. Цвета круговой диаграммы и легенды выбираются из стандартной палитры цветов для графиков.
name - название части диаграммы,
value - значение части диаграммы.

<Graphs.DonutChart 
    items="{{_items}}">
</Graphs.DonutChart>

this._items = new RecordSet({
            keyProperty: 'id',
            rawData: [
                {
                    id: '0',
                    name: '5% постоянным клиентам постоянным клиентам',
                    value: 141,
                },
...
]

По умолчанию на диаграмме отображаются значения из полей name и value, если необходимо отразить данные из других полей, настройте следующие опции:

displayProperty - имя поля, данные которого будут отображены в названии частей диаграммы,
valueProperty - имя поля, данные которого будут отображены в значении частей диаграммы.

<Graphs.DonutChart 
    items="{{_items}}"
    displayProperty="name1"
    valueProperty="value1">
</Graphs.DonutChart>

this._items = new RecordSet({
            keyProperty: 'id',
            rawData: [
                {
                    id: '0',
                    name1: 'Новогодний сюрприз',
                    value1: 120,
                },
...
]

Область в центре диаграммы

Шаблон контентной области, находящейся в центре диаграммы, настраивается в опции diagramInnerTemplate.

<Graphs.DonutChart 
     items="{{_items}}">
     <ws:diagramInnerTemplate>
          <div class="controls-text-label controls-fontsize-l">Скидка</div>
          <div class="controls-fontsize-xl ws-align-self-center">7,3%</div>
     </ws:diagramInnerTemplate>
</Graphs.DonutChart>

Основной заголовок задается в опции headingCaption.

<Graphs.DonutChart 
     items="{{_items}}"
     headingCaption="Расходы">
</Graphs.DonutChart>

Для отображения в шапке элемента произвольного контента, задайте его шаблон в опции headerContentTemplate.

<Graphs.DonutChart 
    items="{{_items}}">
    <ws:headerContentTemplate>
        <Controls.heading:Title 
            caption="Расходы"
            attr:class="controls-margin_left-s controls-margin_right-s"
            fontSize="2xl"/>
        <Controls.heading:Counter 
            caption="215 806 178"
            fontColorStyle="secondary"
            fontSize="5xl"/>
    </ws:headerContentTemplate>
</Graphs.DonutChart>

Конфигурация таблицы

Контрол позволяет настроить отображение в таблице шапки, колонок и строки итогов.

Отображение таблицы

Отображение таблицы настраивается в опции tableVisibility. Чтобы скрыть таблицу, передайте в опцию tableVisibility значение hidden.

<Graphs.DonutChart 
    items="{{_items}}"
    tableVisibility="hidden">
</Graphs.DonutChart>

Конфигурация столбцов

Конфигурация колонок таблицы настраивается в опции columns. Интерфейс для конфигурации колонки в таблице описан здесь.

<Graphs.DonutChart 
    items="{{_items}}"
    columns="{{_columns}}">
</Graphs.DonutChart>

this._columns = [
            {
                displayProperty: 'name',
                width: '200px',
                hoverBackgroundStyle: 'transparent',
                template: itemTemplate
            },
...
];

Шапка таблицы

Конфигурация шапки таблицы настраивается в опции header. Интерфейс для конфигурации ячеек заголовка в таблице описан здесь.

<Graphs.DonutChart 
    items="{{_items}}"
    header="{{_header}}">
</Graphs.DonutChart>

this._header = [
            {
                caption: 'Продажи'
            },
...
];

Строка итогов

Позиция отображения строки итогов настраивается в опции resultsPosition. По умолчанию строка итогов выводится над списком.

<Graphs.DonutChart 
    items="{{_items}}"
    columns="{{_columns}}"
    resultsPosition="{{null}}">
</Graphs.DonutChart>

Шаблон пустого представления элемента

Если в контрол не переданы данные, на месте таблицы отображается шаблон, переданный в опцию emptyTemplate.

<Graphs.DonutChart>
    <ws:emptyTemplate>
        <div class="controls-text-label">
        Похоже, ваши сотрудники работают за идею. Если ситуация изменится, мы покажем среднюю по зарплате здесь.
        </div>
    </ws:emptyTemplate>
</Graphs.DonutChart>