График Воронка (Funnel)
График Воронка используется для наглядного представления этапов последовательных процессов, позволяет отследить изменение какого-либо показателя при смене этапов.
Для отображения контрола Graphs/funnelChart:View на странице передайте в опцию data набор записей, по которым он будет построен:
- в поле value задайте значение показателя;
- в поле proportion задайте долю сектора на графике;
- в поле colorIndex задайте цвет сектора на графике.
const DATA: ICustomFunnelData[] = [{
value: 2000,
proportion: 1,
colorIndex: 3,
}, {
value: 800,
proportion: 1,
colorIndex: 1,
}, {
value: 350,
proportion: 2,
colorIndex: 0,
}];
Документация API Официальная документация HighCharts
Конфигурация воронки
Конфигурация внешнего вида воронки задается в опции config. Полный список параметров настройки и примеры приведены здесь.
Режим отображения воронки
Режим отображения воронки задается в опции mode:
default
- воронка строится пропорционально значениям, заданным в поле value;equal
- все секторы имеют одинаковое значение, в качестве метки на графике используется значение из value;custom
- каждый сектор воронки показывает абсолютное значение, заданное в поле proportion, в качестве метки на графике используется значение из value.
<Graphs.funnelChart:View
data="{{_data}}"
mode="equal"/>
<Graphs.funnelChart:View
data="{{_data}}"
mode="default"/>
<Graphs.funnelChart:View
data="{{_data}}"
mode="custom"/>
Текстовая метка сектора
Чтобы отобразить метку для сектора, передайте текст метки в поле caption
в конфигурации воронки.
const DATA: ICustomFunnelData[] = [{
value: 2000,
proportion: 1,
colorIndex: 3,
caption: 'Посмотрели'
}, {
value: 800,
proportion: 1,
colorIndex: 1,
caption: 'Купили',
}, {
value: 350,
proportion: 2,
colorIndex: 0,
caption: 'Вступили',
}];