具有多个系列和多个轴的Flex图表给出了奇怪的结果

Question

我在使用Flash Builder图表时遇到了一个严重的问题。

当我第一次加载图表时 -

但如果我立即在同一浏览器中刷新页面，我会得到 -

第二个是预期的。如果我关闭浏览器窗口并在新的浏览器窗口中打开它，则会重复此问题。

为了正确解释，我在这里附上源代码 -

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:defaultstatistics="services.defaultstatistics.*"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="800"      
         xmlns:Examples="Examples.*"
         creationComplete="start();"  >
    <!--<fx:Style source="styles/Golibaje.css"/>-->
    <fx:Script>
        <![CDATA[
            import CustomEvents.ChartLoadedEvent;

            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            import mx.utils.object_proxy;

            import org.axiis.core.AxiisSprite;
            import org.axiis.data.DataSet;

            private var ds:DataSet = new DataSet();         

            public var loaded:Boolean = false;


            //Set this variable to the appropriate time period used by the data. 
            [Bindable]
            public var timeIncrement:String = "month";

            [Bindable]
            private var performanceData:ArrayCollection = new ArrayCollection([
                {month:"January", correct:100, correctOutsideBase:50,
                    incorrect:50, skipped:25},
                {month:"February", correct:110, correctOutsideBase:40,
                    incorrect:50, skipped:30},
                {month:"March", correct:120, correctOutsideBase:40,
                    incorrect:25, skipped:30},
                {month:"April",correct:110, correctOutsideBase:45,
                    incorrect:20, skipped:20},
                {month:"May", correct:135, correctOutsideBase:25,
                    incorrect:25, skipped:15},
                {month:"June", correct:150, correctOutsideBase:15,
                    incorrect:15, skipped:5},
                {month:"July", correct:155, correctOutsideBase:10,
                    incorrect:10},
                {month:"August", correct:160, correctOutsideBase:5,
                    incorrect:15},
                {month:"September",correct:170, correctOutsideBase:5,
                    incorrect:10}
            ]);

            [Bindable]
            private var pointsData:ArrayCollection = new ArrayCollection([
                {month:"January", points:1000},
                {month:"February", points:1200},
                {month:"March", points:1400},
                {month:"April",points:1500},
                {month:"May", points:1600},
                {month:"June", points:1650},
                {month:"July", points: 1800},
                {month:"August", points: 2000},
                {month:"September", points: 2500}
            ]);



            public function start():void
            {   
                var t:Timer = new Timer(2000, 1);               
                t.addEventListener(TimerEvent.TIMER_COMPLETE, fireChartLoaded);
                t.start();
            }



            private function fireChartLoaded(event){                
                loaded = true;
                dispatchEvent(new Event("chartLoaded"));
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
    </fx:Declarations>

    <mx:CartesianChart id="PerformanceTimeChart" dataProvider="{performanceData}"
                    showDataTips="true" width="800" height="700" 
                    verticalCenter="0" horizontalCenter="0">
        <mx:verticalAxisRenderers>
            <mx:AxisRenderer placement="left" axis="{columnAxis}"/>
            <mx:AxisRenderer placement="right" axis="{pointsAxis}"/>
        </mx:verticalAxisRenderers>
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="{timeIncrement}"/>
        </mx:horizontalAxis>
        <mx:series>
            <mx:ColumnSet type="stacked">
                <mx:verticalAxis>
                    <mx:LinearAxis id="columnAxis" title="Result"/>
                </mx:verticalAxis>
                <mx:ColumnSeries
                    yField="correct"
                    displayName="Correct"
                    verticalAxis="{columnAxis}"/>
                <mx:ColumnSeries
                    yField="correctOutsideBase"
                    displayName="Outside Base"
                    verticalAxis="{columnAxis}"/>
                <mx:ColumnSeries
                    yField="incorrect"
                    displayName="Wrong Answer"
                    verticalAxis="{columnAxis}"/>
                <mx:ColumnSeries
                    yField="skipped"
                    displayName="Skipped Question"
                    verticalAxis="{columnAxis}"/>
            </mx:ColumnSet>
            <mx:LineSeries
                dataProvider="{pointsData}"
                yField="points"
                displayName="Points">
                <mx:verticalAxis>
                    <mx:LinearAxis id="pointsAxis" title="Points"/>
                </mx:verticalAxis>
            </mx:LineSeries>
        </mx:series>
    </mx:CartesianChart>
    <mx:Legend dataProvider="{PerformanceTimeChart}" direction="horizontal"/>
</s:Group>

任何人都有任何想法可能会发生这种情况？

Answer 1

在CartesianChart中使用ColumnSet时，Flex Charting SDK中存在一个错误，该错误涉及将设置元素设置为ColumnSet所包含的ColumnSeries的dataTranform对象。

作为此问题的解决方法，我自己将元素设置为扩展ColumnSeries类中的dataTransform对象：

public class GroupedColumnSeries extends ColumnSeries
{

    override protected function commitProperties():void
    {
        super.commitProperties();

        if (this.parent is ColumnSet)
        {
            dataTransform.elements=[ColumnSet(this.parent)];
        }
    }

}