在 BubbleChart 控件中使用多重序列
同其他圖表控件一樣,也可以在 BubbleChart 控件中使用多重序列。但是在BubbleChart 控件中使用多重序列要有更多需要考慮的地方。必需確定是否想要兩個序列中的氣泡的大小與其它序列中的氣泡大小相關,或者只是在它們自己的序列中與其它氣泡相關。例如,有兩個序列,A 和 B 。序列A中的氣泡的半徑為10、20、30。序列B中的氣泡半徑為2、4、8。這個BubbleChart 控件中說展示的氣泡半徑,所有屬于序列A的都大于所有屬于B的。也可以這樣的 BubbleChart 控件,其序列A中的氣泡大小與序列B的氣泡大小不相關。 Flex 將把在序列A中半徑為10的氣泡與序列B中半徑為2的氣泡渲染成相同的大小。
若要是每個序列之中的氣泡大小都相關,則需要將兩個序列加入到用一個序列數組,示例如下:
若要使氣泡的大小與其所在序列中的其他氣泡的大小相關,而不是與其它序列中的氣泡大小相關,則需為每個序列使用不用的徑向軸。為實現這一需求,需要在 標簽中加入 子標簽。這將在 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的氣泡渲染成相同的大小。
若要是每個序列之中的氣泡大小都相關,則需要將兩個序列加入到用一個序列數組,示例如下:

<?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 控件。

<?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>
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
