Graph

Graph - элемент управления для визуализации данных.

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

Перечисленные ниже теги и свойства предоставляют обертку над компонентой Chart от 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

autoHidePointMarkers

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

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

DevExtreme full path: autoHidePointMarkers

barGroupPadding

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

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

Игнорируется, если установлена ​​опция barGroupWidth. DevExtreme full path: barGroupPadding

barGroupWidth

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

Задает фиксированную ширину для групп баров с одинаковым аргументом, измеряемую в пикселях.

Приоритет над опцией barGroupPadding. DevExtreme full path: barGroupWidth

checkTypeForAllData

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

Проверяет тип каждого значения, поступающего из источника данных.

DevExtreme full path: dataPrepareSettings.checkTypeForAllData

convertToAxisDataType

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

Преобразует данные, поступающие из источника данных, в тип данных, поддерживаемый осью.

DevExtreme full path: dataPrepareSettings.convertToAxisDataType

defaultPane

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

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

DevExtreme full path: defaultPane

denyRoles

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

Отнаследовано от Control

disabled

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

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

DevExtreme full path: disabled

editorWidth

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

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

exportFileName

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

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

DevExtreme full path: export.fileName

height

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

Высота контрола, число в пикселях

id

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

Отнаследовано от Control

maxBubbleSize

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

Определяет коэффициент, определяющий диаметр самого большого пузыря (BubbleSeries).

DevExtreme full path: maxBubbleSize

minBubbleSize

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

Определяет диаметр наименьшего пузыря в пикселях (BubbleSeries).

DevExtreme full path: minBubbleSize

negativesAsZeroes

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

Включает обработку отрицательных значений как нулей (stacked-like series).

DevExtreme full path: negativesAsZeroes

pointSelectionMode

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

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

DevExtreme full path: pointSelectionMode

printingEnabled

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

Включает возможность печати. Применяется, только если включена опция allowExport.

DevExtreme full path: export.printingEnabled

readRoles

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

отнаследовано от Control

resolveLabelOverlapping

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

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

DevExtreme full path: resolveLabelOverlapping

rotated

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

Меняет местами оси.

DevExtreme full path: rotated

seriesSelectionMode

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

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

DevExtreme full path: seriesSelectionMode

seriesFieldName

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

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

DevExtreme full path: seriesTemplate.nameField

stickyHovering

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

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

DevExtreme full path: stickyHovering

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

synchronizeMultiAxes

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

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

DevExtreme full path: synchronizeMultiAxes

tags

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

Отнаследовано от Control.

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

tooltipLocation

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

Указывает, должна ли подсказка располагаться в центре точки серии или на ее краю (bar-like и bubble series).

DevExtreme full path: tooltip.location

tooltipShared

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

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

DevExtreme full path: tooltip.shared

visible

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

Отнаследовано от Control

width

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

Отнаследовано от Control

writeRoles

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

Отнаследовано от Control

Методы

beginUpdate()

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

clearSelection()

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

endUpdate()

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

exportTo(fileName, format)

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

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

getAllSeries()

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

getArgumentAxis()

Возвращает ось аргументов

getData()

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

getSeriesByName(seriesName)

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

• seriesName - имя серии

getSeriesByPos(seriesIndex)

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

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

getValueAxis()

Возвращает ось значений: первую из массива или с панели по умолчанию

getValueAxis(name)

Возвращает ось значений по имени

• name - имя оси значений

hideLoadingIndicator()

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

hideTooltip()

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

print()

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

refresh()

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

render()

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

showLoadingIndicator()

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

setData(source)

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

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

Пример

myForm.js

let loader = () => {
    return (new QuerySource(MyQuery).load())
}

this.controls.graph1.setData(loader)

Callbacks

annotationCustomizer(e)

Настраивает аннотацию.

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

• e - объект аннотации

labelCustomizer(e)

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

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

• e - объект свойств

loader()

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

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

pointCustomizer(e)

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

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

• e - объект свойств

seriesCustomizer(e)

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

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

• e - имя серии

tooltipCustomizer(e)

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

DevExtreme full path: tooltip.customizeTooltip

• e - объект свойств

sorter(a, b)

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

DevExtreme full path: dataPrepareSettings.sortingMethod

• a - объект источника данных
• b - объект источника данных

Пример

myForm.js

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

События

argumentAxisClicked(s, e)

Выполняется при клике метки на оси аргументов.

DevExtreme full path: onArgumentAxisClick

• s - ссылка на экземпляр Graph
• e - объект параметров события
• argument - значение метки

disposing(s)

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

DevExtreme full path: onDisposing

• s - ссылка на экземпляр контрола Graph

exported(s)

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

DevExtreme full path: onExported

• s - ссылка на экземпляр контрола Graph

exporting(s, e)

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

DevExtreme full path: onExporting - s - ссылка на экземпляр Graph - e - объект параметров события - fileName - имя файла - format - формат файла

fileSaving(s, e)

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

DevExtreme full path: onFileSaving - s - ссылка на экземпляр Graph - e - объект параметров события - fileName - имя файла - format - формат файла

incidentOccurred(s, e)

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

DevExtreme full path: onIncidentOccurred - s - ссылка на экземпляр Graph - e - объект параметров события - target - информация о событии

initialized(s)

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

DevExtreme full path: onInitialized

• s - ссылка на экземпляр контрола Graph

legendClicked(s, e)

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

DevExtreme full path: onLegendClick

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект серии

pointClicked(s, e)

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

DevExtreme full path: onPointClick

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект серии

pointHoverChanged(s, e)

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

DevExtreme full path: onPointHoverChanged

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект точки

pointSelectionChanged(s, e)

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

DevExtreme full path: onPointSelectionChanged

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект точки

prepared(s)

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

DevExtreme full path: onDone

• s - ссылка на экземпляр контрола Graph

renderer(s)

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

DevExtreme full path: onDrawn

• s - ссылка на экземпляр контрола Graph

seriesClicked(s, e)

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

DevExtreme full path: onSeriesClick

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект серии

seriesHoverChanged(s, e)

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

DevExtreme full path: onSeriesHoverChanged

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект серии

seriesSelectionChanged(s, e)

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

DevExtreme full path: onSeriesSelectionChanged

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект серии

tooltipHidden(s, e)

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

DevExtreme full path: onTooltipHidden

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект родителя точки

tooltipShown(s, e)

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

DevExtreme full path: onTooltipShown

• s - ссылка на экземпляр Graph
• e - объект параметров события
• target - объект родителя точки

Axes

Legend

PanesContainer

SeriesContainer

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

На форме отображается контрол Graph с осями аргументов и значений, без источника данных. В данном случае источник данных задается в коде:

Пример

myForm.xml

<Graph id="graph1">
    <Axes></Axes>
</Graph>

На форме отображается контрол Graph с осями аргументов и значений, с видимой сеткой, без источника данных:

Пример

myForm.xml

<Graph id="graph1">
    <Axes gridVisible="true"> </Axes>
</Graph>

На форме отображается контрол Graph с осями аргументов и значений, с видимой сеткой только по оси аргументов, без источника данных:

Пример

myForm.xml

<Graph id="graph1">
    <Axes>
        <ArgumentAxis gridVisible="true"/>
    </Axes>
</Graph>

На форме отображается контрол Graph с осями аргументов и значений, с легендой, без источника данных:

Пример

myForm.xml

<Graph id="graph1">
    <Axes></Axes>
    <Legend/>
</Graph>

На форме отображается контрол Graph с осями аргументов и значений, с источником данных:

Пример

myForm.xmlmyForm.js

<Graph id="graph1" loader="loader">
    <Axes></Axes>
</Graph>

loader () {
    return [{
        country: 'USA',
        oil: 937.6,
        gas: 582
    }, {
        country: 'China',
        oil: 308.6,
        gas: 35.1
    }, {
        country: 'Germany',
        oil: 123.6,
        gas: 77.3
    }]
}

На форме отображается контрол Graph с осями аргументов и значений, с источником данных и двумя сериями:

Пример

myForm.xml

<Graph id="graph1" loader="getData">
    <Axes></Axes>
    <SeriesContainer argumentField="country">
        <SeriesItem valueField="oil"/>
        <SeriesItem valueField="gas"/>
    </SeriesContainer>
</Graph>

На форме отображается контрол Graph с осями аргументов и значений, с источником данных и двумя сериями, каждая из которых отрисовывается на отдельной панели:

Пример

myForm.xml

<Graph id="graph1" loader="getData">
    <Axes></Axes>
    <SeriesContainer argumentField="country">
        <SeriesItem valueField="oil" pane="pane2"/>
        <SeriesItem valueField="gas" pane="pane1"/>
    </SeriesContainer>
    <PanesContainer>
        <Pane name="pane1"/>
        <Pane name="pane2"/>
    </PanesContainer>
</Graph>

Ошибки DevExtreme

У легенды не работает задание заголовка и подзаголовка

---