Развернутая колонка и круговые диаграммы - PullRequest
Новая
       9

Развернутая колонка и круговые диаграммы

0 голосов
/ 02 февраля 2011

Я полный Flex Noob (начался всего пару дней назад).Мне было поручено создать эффект детализации для столбчатых и круговых диаграмм.Можете ли вы указать мне правильное направление в отношении создания эффекта детализации?Это нормально, если на объекте нет какой-либо причудливой анимации и т. Д. Я в основном хочу переключиться на новый источник данных в зависимости от того, какой элемент на диаграмме был нажат.Как определить, по какому элементу был выполнен щелчок, а затем как изменить источник данных и перерисовать диаграмму?

Обновление: Я реализовал базовое решение, которое работает, следуя этому учебнику .Вот мой код, который почти совпадает с приведенным примером.

<?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"/>

Однако это выглядит довольно неуклюже, и я обеспокоен тем, что в реальной реализации с довольно сложным БД я попаду в беду,Разве нет более элегантного / простого / эффективного решения?

1 Ответ

0 голосов
/ 02 февраля 2011
...