views:

274

answers:

0

Hi, I use Flex ColumnChart and set ColumnSeries in ColumnSet with dataFunction. The function I need is to change series by user interaction, so I add a button to pop series from myChart.series (actually I get a array = myChart.series, pop the series, and assign myChart.series = array).

However, when I click this button, the last series is removed, but the ColumnSet series which set dataFunction is also disappeared. Another ColumnSet that I directly set "yField" work well. I have checked that the "series.item" has been replaced to a null array. It's a strange condition.

There is source code below, may anyone can give me a favor? Or it's a bug of ColumnSet in Flex? Thanks a lot.


<?xml version="1.0"?>
<!-- charts/UsingBarSets.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
    import mx.controls.Button;
    import mx.charts.series.ColumnSeries;
    import mx.charts.series.ColumnSet;
    import mx.charts.LinearAxis;
    import mx.charts.CategoryAxis;
    import mx.charts.ColumnChart;
    import mx.charts.chartClasses.AxisBase;
    import mx.charts.chartClasses.Series;
    import mx.charts.chartClasses.IAxis;
    import mx.charts.series.LineSeries;
    import mx.charts.AxisRenderer;
     import mx.charts.Legend;
     import mx.charts.BarChart;
     import mx.charts.series.BarSet;
     import mx.charts.series.BarSeries;
     import mx.collections.ArrayCollection;

     public var c:ColumnChart = new ColumnChart();

     [Bindable]
     private var yearlyData:ArrayCollection = new ArrayCollection([
        {month:"January", revenue:120, costs:45,
            overhead:102, oneTime:23},
        {month:"February", revenue:108, costs:42,
            overhead:87, oneTime:47},
        {month:"March", revenue:150, costs:82,
            overhead:32, oneTime:21},
        {month:"April", revenue:170, costs:44,
            overhead:68},
        {month:"May", revenue:250, costs:57,
            overhead:77, oneTime:17},
        {month:"June", revenue:200, costs:33,
            overhead:51, oneTime:30},
        {month:"July", revenue:145, costs:80,
            overhead:62, oneTime:18},
        {month:"August", revenue:166, costs:87,
            overhead:48},
        {month:"September", revenue:103, costs:56,
            overhead:42},
        {month:"October", revenue:140, costs:91,
            overhead:45, oneTime:60},
        {month:"November", revenue:100, costs:42,
            overhead:33, oneTime:67},
        {month:"December", revenue:182, costs:56,
            overhead:25, oneTime:48},
        {month:"May", revenue:120, costs:57,
            overhead:30}
     ]);

     private function initApp():void {

        c.dataProvider = yearlyData;
        c.showDataTips = true;

        var hAxis:CategoryAxis = new CategoryAxis();
        hAxis.categoryField = "month";   
        /* hAxis.dataFunction = myAxisDataFunction; */ 
        /* hAxis.labelFunction = myCategoryLabelFunction; */ 
        var hRender:AxisRenderer = new AxisRenderer();
        hRender.axis = hAxis as IAxis;
        hRender.visible = true;
        hRender.placement = "bottom";

        var xRenderArray:Array = new Array();
        xRenderArray.push(hRender);

        var vAxis:LinearAxis = new LinearAxis();
        var vRender:AxisRenderer = new AxisRenderer();
        vRender.axis = vAxis;
        vRender.placement = "left";
        /* c.verticalAxis = vAxis; */

        var mySeries:Array = new Array();

        var outerSet:ColumnSet = new ColumnSet();
        outerSet.type = "clustered";
        var series1:ColumnSeries = new ColumnSeries();
        series1.dataFunction = mySeriesDataFunction;
        /* series1.yField = "revenue"; */
        series1.displayName = "Revenue";
        series1.horizontalAxis = hAxis;
        series1.verticalAxis = vAxis;
        outerSet.series = [series1];

        var innerSet:ColumnSet = new ColumnSet();
        innerSet.type = "stacked";
        var series2:ColumnSeries = new ColumnSeries();
        var series3:ColumnSeries = new ColumnSeries();
        series2.yField = "costs";
        series2.displayName = "Recurring Costs";
        series2.horizontalAxis = hAxis;
        series2.verticalAxis = vAxis;        
        series3.yField = "oneTime";
        series3.displayName = "One-Time Costs";
        series3.horizontalAxis = hAxis;
        series3.verticalAxis = vAxis; 
        mySeries.push(series2);
        mySeries.push(series3);       
        innerSet.series = mySeries;

        var ls:LineSeries = new LineSeries();
        ls.yField = "costs";
        ls.displayName = "Cost2";
        ls.horizontalAxis = hAxis;
        ls.verticalAxis = vAxis;        

        c.series = [outerSet, innerSet, ls];
        c.horizontalAxisRenderers = xRenderArray; 
        /* c.horizontalAxisRenderer = hRender; */
        c.verticalAxisRenderers = [vRender];


        var l:Legend = new Legend();
        l.dataProvider = c;

        var b:Button = new Button();
        b.label = "popseries";
        b.addEventListener(MouseEvent.CLICK,
            function ():void{
                var series:Array = c.series;
                series.pop();
                c.series = null;
                c.series = series;      
            }
        );

        panel2.addChild(c);
        panel2.addChild(l);
        panel2.addChild(b);
     }

    private function mySeriesDataFunction(series:Series, item:Object, fieldName:String):Object{
        var obj:Object;

        if(fieldName == "yValue"){
            obj = item["revenue"];
        }else if(fieldName == "xValue"){
            obj = item["month"];
        }else{
            obj = null;
        }

        return obj;
    }

  ]]></mx:Script>

  <mx:Panel title="Mixed Sets Chart Created in ActionScript" id="panel2">
  </mx:Panel>
</mx:Application>