Flex之图表组件（3） ------ 气泡图表

代码如下：

<?xml version="1.0" encoding="utf-8"?> <!-- charts/BasicBubble.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:"Jan", Profit:2000, Expenses:120, Amount:45}, {Month:"Feb", Profit:1000, Expenses:200, Amount:60}, {Month:"Mar", Profit:1500, Expenses:500, Amount:30} ]); ]]--> </mx:Script> <mx:Panel title="气泡图表示例"> <mx:BubbleChart id="myChart" maxRadius="50" dataProvider="{expenses}" showDataTips="true" > <mx:series> <mx:BubbleSeries xField="Profit" yField="Expenses" radiusField="Amount" displayName="Profit" /> </mx:series> </mx:BubbleChart> <mx:Legend dataProvider="{myChart}"/> </mx:Panel> </mx:Application>

图表如下图：

下面演示多序列的气泡图标：

代码如下：

<?xml version="1.0" encoding="utf-8"?> <!-- charts/BubbleNonRelativeSize.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx: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 } ]); ]]--> </mx:Script> <!-- 空数组以清除比较中的格栅线 --> <mx:Array id="bge"> </mx:Array> <mx:Panel title="多个序列的气泡图表示例"> <mx:BubbleChart id="myChart" showDataTips="true" backgroundElements="{bge}" > <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>

图表如下图所示：