Круговая диаграмма
Контрол Graphs/DonutChart отображает круговую диаграмму и таблицу с данными в различных вариантах их взаимного расположения. Предоставляет готовую верстку, которая позволяет не настраивать отступы и шрифты.
Отображаемые данные
Для отображения контрола на странице передайте в опцию 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>