具有多个系列和多个轴的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)]; 
     } 
    } 

}