2.5.2. FunnelChart

Компонент FunnelChart позволяет вам создать пирамиды или конусы.

ДЕМОНСТРАЦИЯ
funnel chart
Рисунок 15. FunnelChart

XML-имя компонента: chart:funnelChart.

Связь с данными:

  1. Через контейнер данных.

    Вы можете указать для диаграммы контейнер данных с типом CollectionContainer, а затем указать нужные поля в атрибутах titleField и valueField элемента funnelChart:

    <chart:funnelChart id="ratingChart"
                   align="MIDDLE_CENTER"
                   dataContainer="ratingDc"
                   height="200px"
                   labelPosition="RIGHT"
                   labelText="[[title]]: [[value]]"
                   marginRight="120"
                   maxLabelWidth="110"
                   marginTop="20"
                   titleField="mechanic"
                   valueField="count"
                   width="500px">
</chart:funnelChart>

  2. С помощью элемента chart:data.

    Элементы item позволяют вручную указать фиксированные значения диаграммы.

    <chart:funnelChart id="ratingChart"
                   titleField="mechanic"
                   valueField="count">
    <chart:data>
        <chart:item>
            <chart:property name="mechanic" value="Jack"/>
            <chart:property name="count" value="1" type="int"/>
        </chart:item>
        <chart:item>
            <chart:property name="mechanic" value="Bob"/>
            <chart:property name="count" value="2" type="int"/>
        </chart:item>
        <chart:item>
            <chart:property name="mechanic" value="Sam"/>
            <chart:property name="count" value="3" type="int"/>
        </chart:item>
    </chart:data>
</chart:funnelChart>
Слушатели событий FunnelChart:

  • SliceClickListener – щелчок по элементу круговой диаграммы.

  • SlicePullInListener – элемент круговой диаграммы соединён с диаграммой.

  • SlicePullOutListener – элемент круговой диаграммы отсоединён от диаграммы.

  • SliceRightClickListener – щелчок по элементу круговой диаграммы правой клавишей мыши.

Для более подробной информации об этом типе диаграмм смотрите документацию AmCharts.