首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

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

2012-11-22 
Flex 4 : BubbleChart 控件中使用多重序列在 BubbleChart 控件中使用多重序列 同其他图表控件一样,也可以

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的气泡渲染成相同的大小。

若要是每个序列之中的气泡大小都相关,则需要将两个序列加入到用一个序列数组,示例如下:




<?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>

热点排行