График Воронка (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: 'Вступили',
}];