Flex Bubblechart數據結構

Question

我一直試圖在Flex Bubblechart中表示以下數據。請參閱下面的圖表代碼。

<fx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     [Bindable] 
     var BBCData:ArrayCollection= new ArrayCollection([ 
      {Industry: "In1", Range:"0-10 Days", lcount:10}, 
      {Industry: "In1", Range:"10-20 Days", lcount:20}, 
      {Industry: "In1", Range:"20-30 Days", lcount:30}, 
      {Industry: "In1", Range:"30-40 Days", lcount:40}, 
      {Industry: "In1", Range:"40-50 Days", lcount:50}, 

      {Industry: "In2", Range:"0-10 Days", lcount:10}, 
      {Industry: "In2", Range:"10-20 Days", lcount:20}, 
      {Industry: "In2", Range:"20-30 Days", lcount:30}, 
      {Industry: "In2", Range:"30-40 Days", lcount:40}, 
      {Industry: "In2", Range:"40-50 Days", lcount:50} 
     ]); 
    ]]> 
</fx:Script> 
<mx:BubbleChart id="PriorityLowBubbleChart" width="400" height="250" 
       minRadius="1" 
       maxRadius="50" dataProvider="{BBCData}" 

       showDataTips="true"> 
    <mx:verticalAxis> 
     <mx:CategoryAxis categoryField="Range" dataProvider="{BBCData}"/> 
    </mx:verticalAxis> 
    <mx:horizontalAxis> 
     <mx:CategoryAxis categoryField="Industry" dataProvider="{BBCData}"/> 
    </mx:horizontalAxis> 
<mx:series> 
    <mx:BubbleSeries dataProvider="{BBCData}" radiusField="lcount"> 

    </mx:BubbleSeries> 
</mx:series> 

</mx:BubbleChart> 

而我得到的氣泡圖不是我所期望的。我正在查看Bubblechart以顯示半徑爲「count」的氣泡，X和Y分別由Industry和Range表示。 因此，例如，圖表應在Industry In1和Range 0-10 Days的交點處顯示一個radious 10的圓。

在現實中，我得到了下面的圖

因此，對於每一個數據點纔會創建（重複5次，「in2」的重複5次「IN1」）一個新的X項目，在實際，它應該只是一個。與Y標記是一樣的。

似乎圖表不能組相同字段值上的軸和兩個因此這個問題

是有不同的數據結構需要被使用，還是有圖表設置，解決這個問題？

Answer 1

我能夠在氣泡圖中顯示氣泡，請查找下面的代碼，這可能會給你一些想法。我已經評論了幾行你可以取消註釋並查看結果，但實際結果是你必須更多地瞭解它並瞭解GroupingCollection概念。對於refrel鏈接How do I display grouped XML data in a Flex pie chart?： -

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      import mx.charts.series.BubbleSeries; 
      import mx.collections.ArrayCollection; 

      [Bindable] 
      public var BBCData:ArrayCollection = new ArrayCollection([ 
       {id:1, Industry: "In1", Range:"0-10 Days", lcount:10}, 
       {id:2, Industry: "In1", Range:"10-20 Days", lcount:20}, 
       {id:3, Industry: "In1", Range:"20-30 Days", lcount:30}, 
       {id:4, Industry: "In1", Range:"30-40 Days", lcount:40}, 
       {id:5, Industry: "In1", Range:"40-50 Days", lcount:50}, 

       {id:6, Industry: "In2", Range:"0-10 Days", lcount:10}, 
       {id:7, Industry: "In2", Range:"10-20 Days", lcount:20}, 
       {id:8, Industry: "In2", Range:"20-30 Days", lcount:30}, 
       {id:9, Industry: "In2", Range:"30-40 Days", lcount:40}, 
       {id:10, Industry: "In2", Range:"40-50 Days", lcount:50} 
      ]); 

      protected function verticalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
      { 
       return item.Range; 
      } 
      protected function horizontalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
      { 
       return item.Industry; 
      } 

      private function clickHandler():void 
      { 
       horizontalAxisID.labelFunction = horizontalLabelFunction; 
       horizontalAxisID.displayName = "Industry"; 

       verticalAxisID.labelFunction = verticalLabelFunction 
       verticalAxisID.displayName = "Range"; 

       var columnSeries:Array = new Array(); 
       var series:BubbleSeries = new BubbleSeries(); 
       series.radiusField = "lcount"; 
       //Solution 1 - OutPut as per your dataProvider 
       horizontalAxisID.categoryField = series.xField = "id"; 
       verticalAxisID.categoryField = series.yField = "id"; 

       //Solution 2 - OutPut as per your dataProvider 
       //verticalAxisID.categoryField = series.yField = "Range"; 
       //horizontalAxisID.categoryField = series.xField = "Industry"; 

       columnSeries.push(series); 
       PriorityLowBubbleChart.series = columnSeries; 
       series.percentWidth = 100; 
       series.percentHeight = 100; 
       PriorityLowBubbleChart.dataProvider = BBCData; 
      } 
     ]]> 
    </fx:Script> 

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

    <mx:BubbleChart id="PriorityLowBubbleChart" width="400" height="250" 
        minRadius="1" maxRadius="50" dataProvider="{BBCData}" showDataTips="true" 
        creationComplete="clickHandler()" > 
     <mx:horizontalAxis> 
      <mx:CategoryAxis id="horizontalAxisID" categoryField="id" /> 
     </mx:horizontalAxis> 
     <mx:verticalAxis> 
      <mx:CategoryAxis id="verticalAxisID" categoryField="id" /> 
     </mx:verticalAxis> 
    </mx:BubbleChart> 

</s:Application> 

或者另一種方式才達到你所尋找的東西是如下： -

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      import mx.charts.series.BubbleSeries; 
      import mx.collections.ArrayCollection; 
      import mx.utils.ObjectUtil; 

      [Bindable] 
      private var BBCData:ArrayCollection = new ArrayCollection([ 
       {id:1, Industry: "In1", Range:"0-10 Days", lcount:10}, 
       {id:2, Industry: "In1", Range:"10-20 Days", lcount:20}, 
       {id:3, Industry: "In1", Range:"20-30 Days", lcount:30}, 
       {id:4, Industry: "In1", Range:"30-40 Days", lcount:40}, 
       {id:5, Industry: "In1", Range:"40-50 Days", lcount:50}, 
       {id:6, Industry: "In2", Range:"0-10 Days", lcount:10}, 
       {id:7, Industry: "In2", Range:"10-20 Days", lcount:20}, 
       {id:8, Industry: "In2", Range:"20-30 Days", lcount:30}, 
       {id:9, Industry: "In2", Range:"30-40 Days", lcount:40}, 
       {id:10, Industry: "In2", Range:"40-50 Days", lcount:50} 
      ]); 

      protected function verticalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
      { 
       return item.Range; 
      } 
      protected function horizontalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
      { 
       return item.Industry; 
      } 

      [Bindable] 
      public var range:Array = [ 
       {Range:"0-10 Days"}, 
       {Range:"10-20 Days"}, 
       {Range:"20-30 Days"}, 
       {Range:"30-40 Days"}, 
       {Range:"40-10 Days"} 
      ]; 

      [Bindable] 
      public var industry:Array = [ 
       {Industry: "In1"}, 
       {Industry: "In2"} 
      ]; 

     ]]> 
    </fx:Script> 

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

    <s:Panel title="Line Chart"> 
     <s:layout> 
      <s:VerticalLayout/> 
     </s:layout> 
     <mx:BubbleChart id="myChart" 
         dataProvider="{BBCData}" 
         showDataTips="true" 
         maxRadius="50" minRadius="1"> 
      <mx:horizontalAxis> 
       <mx:CategoryAxis 
        dataProvider="{industry}" 
        categoryField="Industry" 
        displayName="Industry" 
        labelFunction="horizontalLabelFunction"/> 
      </mx:horizontalAxis> 
      <mx:verticalAxis> 
       <mx:CategoryAxis 
        dataProvider="{range}" 
        categoryField="Range" 
        displayName="Range" 
        labelFunction="verticalLabelFunction"/> 
      </mx:verticalAxis> 
      <mx:series> 
       <mx:BubbleSeries xField="Industry" yField="Range" 
        displayName="Industry" radiusField="lcount"/> 
      </mx:series> 
     </mx:BubbleChart> 
    </s:Panel> 

</s:Application> 

希望這可以幫助你....