Диаграмма процесса
В отличие от контрола типа Индикатор выполнения, отображающего прогресс выполнения процесса (например, состояние загрузки файла), контрол типа Диаграмма процесса позволяет получить наглядную информацию по состоянию выполнения некоторого процесса в разрезе нескольких категорий. Например, состояние выполнения плана по категориям "Выполнено", "Не выполнено", "В работе". Для наглядности категории окрашены в разные цвета.
Документация API Спецификация Axure
Количество секторов на диаграмме
В опции scale задается процентное соотношение, которое занимает один сектор на диаграмме. Чем меньшее значение указано в опции, тем больше секторов отображается на диаграмме. По умолчанию 10
.
<!-- WML -->
<Controls.progress:StateIndicator
data="{{_data}}"
scale="{{5}}"/>
Отображение нескольких категорий на одной диаграмме
В опции data задается массив категорий диаграммы. Используется, если для диаграммы нужно установить несколько категорий. Количество элементов массива задает количество категорий диаграммы. Для каждой категории можно установить свойства:
value
— размер в процентах.className
— имя css-класса, который будет применен к секторам данной категории; еслиclassName
не указывать, будут применяться классы по умолчанию.title
— текстовое примечание к категории.
<!-- WML -->
<Controls.progress:StateIndicator
data="{{_data}}"/>
// TypeScript
protected _data: object;
protected _beforeMount(): void {
this._data = [
{value: 10, className: '', title: 'Положительно'},
{value: 30, className: '', title: 'В работе'},
{value: 50, className: '', title: 'Отрицательно'}
];
}
Размер секторов диаграммы
В опции sectorSize задается визуальный размер секторов диаграммы. По умолчанию "m".
<!-- WML -->
<Controls.progress:StateIndicator
data="{{_data}}"
scale="{{10}}"
sectorSize="s"/>
События диаграммы
При наведении курсора мыши на диаграмму происходит событие itemEnter. Для события можно создать пользовательский обработчик, в котором, например вызвать отображение всплывающего окна с легендой.
<!-- WML -->
<div>
<Controls.popup:Infobox name="IBOpener" />
<Controls.progress:StateIndicator
data="{{_data}}"
on:itemEnter="_mouseEnterHandler()" />
</div>
// TypeScript
protected _mouseEnterHandler(e?: any, _item?: HTMLElement): void {
const config = {
target: _item,
targetSide: 'top',
alignment: 'start',
showDelay: 1000,
template: popupTemplate,
templateOptions: {data: this._dataWithUser}
};
this._children.IBOpener.open(config);
}