Question

我是一个完整的Flex noob（仅在几天前开始）。我被指派为列和饼图创建一个向下钻取效果。关于创建钻取效果，你能指出我正确的方向吗？如果事物没有任何花哨的动画等，那就没关系。我基本上想要切换到一个新的数据源，具体取决于图表中的哪个元素被点击。如何识别单击了哪个元素，然后如何更改数据源并重绘图表？

更新：我按照this tutorial实施了一个基本解决方案。这是我的代码，与提供的示例几乎相同。

<?xml version="1.0"?>

height="600">

<fx:Declarations>

    <mx:SeriesSlide id="slideIn" duration="1000" direction="down"/>
    <mx:SeriesSlide id="slideOut" duration="1000" direction="up"/>

</fx:Declarations>

<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    import mx.charts.HitData;
    import mx.charts.events.ChartItemEvent;

    [Bindable]
    private var profit04:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 2000},
        {Month: "Feb", Profit: 1000},
        {Month: "Mar", Profit: 1500}
    ]);

    [Bindable]
    private var profit05:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 2200},
        {Month: "Feb", Profit: 1200},
        {Month: "Mar", Profit: 1700},
        {Month: "Apr", Profit: 700}
    ]);

    [Bindable]
    private var profit06:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 2400},
        {Month: "Feb", Profit: 1400},
        {Month: "Mar", Profit: 1900}
    ]); 
    [Bindable]
    private var profit07:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 400},
        {Month: "Feb", Profit: 1100},
        {Month: "Mar", Profit: 1900},
        {Month: "Apr", Profit: 1700},
        {Month: "May", Profit: 2100}
    ]);


    // level is a temporary variable used to determine when to drill down.
    private var level:int =  1;

    private function resultHandler():void {
        dp = ArrayCollection(srv.lastResult.data.result);
    }

    private function zoomIntoSeries(e:ChartItemEvent):void {
        if (level == 1) {


            cs1.yField = "Profit";
            cs1.xField = "Month";

            if(e.hitData.chartItem.index==0)
            {
                chart.dataProvider=profit05;
                cs1.dataProvider=profit05;
                cs1.displayName = "2005";
                p1.title = "2005 ";
            }
            else if(e.hitData.chartItem.index==1)
            {
                chart.dataProvider=profit06;
                cs1.dataProvider=profit06;
                cs1.displayName = "2006";
                p1.title = "2006 ";
            }
            else if(e.hitData.chartItem.index==2)
            {
                chart.dataProvider=profit07;
                cs1.dataProvider=profit07;
                cs1.displayName = "2007";
                p1.title = "2007 ";
            }
            ca1.categoryField = "Month";

            level = 2;
            lbl1.text=e.hitData.chartItem.index.toString();

        } else {
            cs1.displayName = "2004";
            cs1.yField = "Profit";
            cs1.xField = "Month";
            chart.dataProvider=profit04;
            cs1.dataProvider=profit04;
            ca1.categoryField = "Month";

            p1.title = "2004 ";

            // Add the Legend back to the Panel.


            // Reset chart to original data provider.


            level = 1;
            lbl1.text=e.hitData.chartItem.index.toString();
        }
    }

]]></fx:Script>

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<s:Panel id="p1" title="2004">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <mx:ColumnChart id="chart" 
                    showDataTips="true" 
                    itemClick="zoomIntoSeries(event)" 
                    dataProvider="{profit04}">
        <mx:series> 
            <mx:ColumnSeries id="cs1" 
                             yField="Profit"
                             xField="Month"
                             displayName="2004"
                             dataProvider="{profit04}"
                             hideDataEffect="slideOut" 
                             showDataEffect="slideIn"/>
        </mx:series>            

        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca1" categoryField="Month"/>
        </mx:horizontalAxis>
    </mx:ColumnChart> 


</s:Panel>
<s:Label fontSize="40" id="lbl1"/>

然而，它感觉相当笨拙，我担心在一个相当复杂的数据库的实际实现中，我将最终遇到麻烦。是不是有更优雅/更简单/更有效的解决方案？

Answer 1

使用chartItemClick事件：http://livedocs.adobe.com/flex/3/html/help.html?content=charts_eventsandeffects_11.html

向下钻取柱和饼图

1 个答案: