1.6.2. 漏斗图

使用 FunnelChart 组件可以创建漏斗/金字塔图。

在线示例
funnel chart
Figure 15. 漏斗图

该组件的 XML 名称：chart:funnelChart

数据绑定:

  1. 可以为图表指定集合数据容器，然后为 funnelChart 元素定义 titleField 和 valueField 属性：

    <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 元素。

    <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 文档。