PieGraph#

PieGraph - элемент управления для визуализации данных в виде круговой диаграммы.

Интерактивная конфигурация и полное описание свойств.

Перечисленные ниже теги и свойства предоставляют обертку над компонентой PieChart от DevExtreme и предназначены для описания контрола в файле шаблона формы. Вся последующая работа с контролом осуществляется через API DevExtreme.

Контрол поставляется в отдельном пакете ecosoft-lexema8-devextreme. Для его использования необходимо установить последнюю версию пакета и настроить свойство controls раздела front.

DevExtreme full path - путь к описанию свойства по документации DevExtreme.

Свойства#

allowAnimation#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Включает анимацию. DevExtreme full path: animation.enabled

allowExport#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Указывает, разрешен ли экспорт. DevExtreme full path: export.enabled

diameter#

тип	значение по умолчанию	допустимые значения
int	-

Определяет диаметр диаграммы.

Эта опция принимает число, которое определяет соотношение между диаметром диаграммы и шириной или высотой компоненты (в зависимости от того, что из них меньше). DevExtreme full path: diameter

denyRoles#

тип	значение по умолчанию	допустимые значения
[string]	undefined	["text", "text"...]

Список ролей без прав на данный элемент

disabled#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Указывает, реагирует ли контрол на взаимодействие с пользователем.

DevExtreme full path: disabled

editorWidth#

тип	знач. по умолч.	допустимые значения
int	6

Ширина контрола в колонках (для Bootstrap-верстки)

exportFileName#

тип	значение по умолчанию	допустимые значения
string	GraphExport

Задает имя файла по умолчанию при экспорте.

DevExtreme full path: export.fileName

height#

тип	значение по умолчанию	допустимые значения
string	-

Высота контрола

id#

тип	значение по умолчанию	допустимые значения
string	-

Идентификатор контрола

innerRadius#

тип	знач. по умолч.	допустимые значения
float	0.5	0-1

Определяет долю внутреннего радиуса относительно общего радиуса в серии типа «doughnut».

DevExtreme full path: innerRadius

minDiameter#

тип	знач. по умолч.	допустимые значения
float	0.5

Определяет минимальный диаметр круговой диаграммы.

Эта опция определяет минимальное соотношение между диаметром круговой диаграммы и шириной или высотой компоненты (в зависимости от того, что из них меньше). DevExtreme full path: minDiameter

pointSelectionMode#

тип	значение по умолчанию	допустимые значения
string	single	single, multiple

Указывает, можно ли выбрать одну или несколько точек на диаграмме.

DevExtreme full path: pointSelectionMode

printingEnabled#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Включает возможность печати.

Применяется, только если включена опция allowExport. DevExtreme full path: export.printingEnabled

readRoles#

тип	значение по умолчанию	допустимые значения
[string]	undefined	["text", "text"...]

Список ролей на чтение данных

resolveLabelOverlapping#

тип	значение по умолчанию	допустимые значения
string	none	hide, none, shift

Определяет, как должна вести себя диаграмма, когда метки точек серии перекрываются.

DevExtreme full path: resolveLabelOverlapping

segmentsDirection#

тип	значение по умолчанию	допустимые значения
string	clockwise	anticlockwise, clockwise

Определяет направление, в котором сегменты круговой диаграммы будут занимать.

DevExtreme full path: segmentsDirection

seriesFieldName#

тип	значение по умолчанию	допустимые значения
string	-

Определяет поле источника данных, которое представляет имя серии, в случае настройки шаблона серий.

DevExtreme full path: seriesTemplate.nameField

sizeGroup#

тип	значение по умолчанию	допустимые значения
string	-

Позволяет отображать несколько смежных круговых диаграмм одинакового размера.

DevExtreme full path: sizeGroup

startAngle#

тип	знач. по умолч.	допустимые значения
int	0

Указывает угол в градусах дуги, с которого должен начинаться первый сегмент круговой диаграммы.

DevExtreme full path: startAngle

subtitleText#

тип	значение по умолчанию	допустимые значения
string	-

Определяет текст для подзаголовка.

DevExtreme full path: title.subtitle.text

subtitleTextOverflow#

тип	значение по умолчанию	допустимые значения
string	ellipsis	ellipsis, hide, none

Определяет поведение при большой длине текста подзаголовка.

DevExtreme full path: title.subtitle.textOverflow

subtitleWordWrap#

тип	значение по умолчанию	допустимые значения
string	normal	normal, breakWord, none

Определяет поведение, если текст подзаголовка не помещается в одну строку.

DevExtreme full path: title.subtitle.wordWrap

tags#

тип	значение по умолчанию	допустимые значения
[string]	undefined	["text", "text"...]

Позволяет объединять контролы в группы, возвращает массив имен

titleHorizontalAlignment#

тип	значение по умолчанию	допустимые значения
string	center	center, left, right

Определяет выравнивание заголовка по горизонтали.

DevExtreme full path: title.horizontalAlignment

titleText#

тип	значение по умолчанию	допустимые значения
string	-

Определяет текст для заголовка.

DevExtreme full path: title.text

titleTextOverflow#

тип	значение по умолчанию	допустимые значения
string	ellipsis	ellipsis, hide, none

Определяет поведение при большой длине текста заголовка.

DevExtreme full path: title.textOverflow

titleVerticalAlignment#

тип	значение по умолчанию	допустимые значения
string	top	bottom, top

Определяет выравнивание заголовка по вертикали.

DevExtreme full path: title.verticalAlignment

titleWordWrap#

тип	значение по умолчанию	допустимые значения
string	normal	normal, breakWord, none

Определяет поведение, если текст заголовка не помещается в одну строку.

DevExtreme full path: title.wordWrap

tooltipEnabled#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Включает подсказки для точек серии.

DevExtreme full path: tooltip.enabled

tooltipShared#

тип	значение по умолчанию	допустимые значения
bool	false	true/false

Включает отображение точек с таким же аргументом.

DevExtreme full path: tooltip.shared

type#

тип	значение по умолчанию	допустимые значения
string	pie	donut, doughnut, pie

Определяет тип ряда круговой диаграммы.

DevExtreme full path: type

visible#

тип	значение по умолчанию	допустимые значения
bool	true	true/false

Видимость контрола.

width#

тип	значение по умолчанию	допустимые значения
string	100%	width

Ширина контрола

writeRoles#

тип	значение по умолчанию	допустимые значения
[string]	undefined	["text", "text"...]

Список ролей на изменение данных

Методы#

beginUpdate#

Запрещает обновление контрола до вызова метода endUpdate().

beginUpdate() 

clearSelection#

Снимает выделение с серий

clearSelection() 

endUpdate#

Обновляет контрол после вызова метода beginUpdate().

endUpdate() 

exportTo#

Экспорт в файл.

exportTo(fileName, format) 

fileName - имя файла
format - формат файла ('PNG', 'PDF', 'JPEG', 'SVG', 'GIF')

getAllSeries#

Возвращает список всех серий.

getAllSeries() 

getInnerRadius#

Возвращает радиус отверстия круговой диаграммы в пикселях.

getInnerRadius() 

Применяется только для типов «doughnut» или «donut».

getData#

Возвращает данные в виде массива

1	`getData()`

getSeriesByName#

Возвращает серию по имени

getSeriesByName(seriesName) 

seriesName - имя серии

getSeriesByPos#

Возвращает серию по индексу

getSeriesByPos(seriesIndex)

seriesIndex - индекс серии

hideLoadingIndicator#

Скрыть индикатор загрузки

hideLoadingIndicator() 

hideTooltip#

Скрыть все подсказки

hideTooltip() 

print#

Отправить на печать

print() 

refresh#

Вызывает перезагрузку данных и перерисовку контрола

refresh() 

render#

Вызывает перерисовку контрола

render() 

showLoadingIndicator#

Отобразить индикатор загрузки

showLoadingIndicator() 

setData#

Устанавливает новый источник данных

setData(source) 

source - массив объектов или callback, возвращаюсь массив или объект Promise

Пример

myForm.js

let loader = () => {
    return (new QuerySource(MyQuery).load())
}
this.controls.graph1.setData(loader)

События#

disposing#

Срабатывает перед удалением контрола.

DevExtreme full path: onDisposing

disposing(s)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph

exported#

Срабатывает после экспорта.

DevExtreme full path: onExported

exported(s)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph

exporting#

Срабатывает перед экспортом.

DevExtreme full path: onExporting

exporting(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.fileName	string	имя файла
e.args.format	string	формат файла

fileSaving#

Срабатывает перед сохранением файла.

DevExtreme full path: onFileSaving

fileSaving(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.fileName	string	имя файла
e.args.format	string	формат файла

incidentOccurred#

Срабатывает в случае появления предупреждения или ошибки.

DevExtreme full path: onIncidentOccurred

incidentOccurred(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.target	string	информация о событии

initialized#

Срабатывает после инициализации контрола.

DevExtreme full path: onInitialized

initialized(s)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph

legendClicked#

Срабатывает при клике элемента меню.

DevExtreme full path: onLegendClick

legendClicked(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.target	string	аргумент точки (точек), соответствующей выбранному элементу легенды
e.args.points	[string]	массив объектов точек

pointClicked#

Срабатывает при клике точки серии.

DevExtreme full path: onPointClick

pointClicked(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.target	string	информация о событии

pointSelectionChanged#

Срабатывает при выделении точки серии.

DevExtreme full path: onPointSelectionChanged

pointSelectionChanged(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.target	string	информация о событии

prepared#

Срабатывает при готовности всех серий.

DevExtreme full path: onDone

prepared(s)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph

renderer#

Срабатывает после отрисовки контрола.

DevExtreme full path: onDrawn

renderer(s)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph

tooltipHidden#

Срабатывает при скрытии подсказки.

DevExtreme full path: onTooltipHidden

tooltipHidden(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.target	string	информация о событии

tooltipShown#

Срабатывает при появлении подсказки.

DevExtreme full path: onTooltipShown

tooltipShown(s, e)

таблица

параметр	тип	описание
s	PieGraph	ссылка на экземпляр контрола PieGraph
e	object
e.args	object	аргументы события
e.args.target	string	информация о событии

Callbacks#

labelCustomizer#

Настраивает внешний вид метки точки.

Должен вернуть объект метки точки. DevExtreme full path: customizeLabel

labelCustomizer(e) 

таблица

параметр	тип	описание
e	object	объект свойств

loader#

Используется для настройки загрузчика данных.

Должен возвращать данные в виде массива или объекта Promise.

1	`loader()`

pointCustomizer#

Настраивает внешний вид точки.

Должен вернуть объект точки. DevExtreme full path: customizePoint

pointCustomizer(e) 

таблица

параметр	тип	описание
e	object	объект свойств

seriesCustomizer#

Настраивает серию.

Должен вернуть объект серии. DevExtreme full path: seriesTemplate.customizeSeries

seriesCustomizer(e)

таблица

параметр	тип	описание
e	object	имя серии

tooltipCustomizer#

Настраивает подсказку для точек серии.

DevExtreme full path: tooltip.customizeTooltip

tooltipCustomizer(e) 

таблица

параметр	тип	описание
e	object	объект свойств

Пример

myForm.js

loader () {
    return (new QuerySource(MyQuery).load())
}

PieLegend#

PieLegend

PieSeriesContainer#

PieSeriesContainer

Примеры настройки контрола#

Пример

myForm.xmlmyForm.js

<PieGraph id="pie1" incidentOccurred="incidentOccurred" loader="getData" allowExport="true" subtitleText="test" titleText="Pie" tooltipEnabled="true">
    <PieLegend titleText="123"/>
    <PieSeriesContainer argumentField="country" connectorVisible="true" labelVisible="true">
        <PieSeriesItem valueField="area"/>
    </PieSeriesContainer>
</PieGraph>

loader () {
    return [{
        country: "Russia",
        area: 12
    }, {
        country: "Canada",
        area: 7
    }, {
        country: "USA",
        area: 7
    }, {
        country: "China",
        area: 7
    }, {
        country: "Brazil",
        area: 6
    }, {
        country: "Australia",
        area: 5
    }, {
        country: "India",
        area: 2
    }, {
        country: "Others",
        area: 55
    }]
}