Flex 4 : BubbleChart 控件中使用多重序列

在 BubbleChart 控件中使用多重序列

同其他图表控件一样，也可以在 BubbleChart 控件中使用多重序列。但是在BubbleChart 控件中使用多重序列要有更多需要考虑的地方。必需确定是否想要两个序列中的气泡的大小与其它序列中的气泡大小相关，或者只是在它们自己的序列中与其它气泡相关。例如，有两个序列，A 和 B 。序列A中的气泡的半径为10、20、30。序列B中的气泡半径为2、4、8。这个BubbleChart 控件中说展示的气泡半径，所有属于序列A的都大于所有属于B的。也可以这样的 BubbleChart 控件，其序列A中的气泡大小与序列B的气泡大小不相关。 Flex 将把在序列A中半径为10的气泡与序列B中半径为2的气泡渲染成相同的大小。

若要是每个序列之中的气泡大小都相关，则需要将两个序列加入到用一个序列数组，示例如下：
[img]http://dl.iteye.com/upload/attachment/193377/b94b7966-ed6c-3025-b572-239fe1b22d14.jpg[/img]

<?xml version="1.0"?>
<!-- charts/BubbleRelativeSize.mxml -->
<!-- http://www.slsay.com -->
<mx:Application
       xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:mx="library://ns.adobe.com/flex/halo"
       xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
           import mx.collections.ArrayCollection;
           [Bindable]
           private var s1:ArrayCollection = new ArrayCollection( [
               {"x": 20, "y": 10, "r":10 },
               {"x": 40, "y": 5, "r":20 } ,
               {"x": 60, "y": 0, "r":30 }]);
           [Bindable]
           private var s2:ArrayCollection = new ArrayCollection( [
               {"x": 20, "y": 50, "r":2 },
               {"x": 40, "y": 75, "r":4 },
               {"x": 60, "y": 100, "r":8 } ]);
       ]]>
    </fx:Script>
    <mx:Panel title="Bubble Chart (Bubbles relative to other series)">
        <mx:BubbleChart id="myChart"
               showDataTips="true">
            <mx:series>
                <mx:BubbleSeries
                       dataProvider="{s1}"
                       displayName="series1"
                       xField="x"
                       yField="y"
                       radiusField="r"/>
                    <mx:BubbleSeries
                           dataProvider="{s2}"
                           displayName="series2"
                           xField="x"
                           yField="y"
                           radiusField="r"/>
            </mx:series>
        </mx:BubbleChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>

若要使气泡的大小与其所在序列中的其他气泡的大小相关，而不是与其它序列中的气泡大小相关，则需为每个序列使用不用的径向轴。为实现这一需求，需要在 标签中加入 子标签。这将在 BubbleChart 控件中创建两个序列，它们的气泡大小相互独立。下面的例子展示了拥有两个相互独立的序列的 BubbleChart 控件。

[img]http://dl.iteye.com/upload/attachment/193381/b9fc4fce-d119-34bc-86a3-57c8a46f7237.jpg[/img]

<?xml version="1.0"?>
<!-- charts/BubbleNonRelativeSize.mxml -->
<mx:Application
       xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:mx="library://ns.adobe.com/flex/halo"
       xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
           import mx.collections.ArrayCollection;
           [Bindable]
           private var s1:ArrayCollection = new ArrayCollection( [
               {"x": 20, "y": 10, "r":10 },
               {"x": 40, "y": 5, "r":20 } ,
               {"x": 60, "y": 0, "r":30 }]);
           [Bindable]
           private var s2:ArrayCollection = new ArrayCollection( [
               {"x": 20, "y": 50, "r":1 },
               {"x": 40, "y": 75, "r":2 },
               {"x": 60, "y": 100, "r":3 } ]);
       ]]>
    </fx:Script>
    <mx:Panel title="Bubble Chart (Bubbles not relative across series)">
        <mx:BubbleChart id="myChart"
               showDataTips="true">
            <mx:series>
                <mx:BubbleSeries
                       dataProvider="{s1}"
                       displayName="series1"
                       xField="x"
                       yField="y"
                       radiusField="r">
                    <mx:radiusAxis>
                        <mx:LinearAxis/>
                    </mx:radiusAxis>
                </mx:BubbleSeries>
                <mx:BubbleSeries
                       dataProvider="{s2}"
                       displayName="series2"
                       xField="x"
                       yField="y"
                       radiusField="r">
                    <mx:radiusAxis>
                        <mx:LinearAxis/>
                    </mx:radiusAxis>
                </mx:BubbleSeries>
            </mx:series>
        </mx:BubbleChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>