flex做图标2读取元素属性
发布时间:2020-12-15 04:15:53 所属栏目:百科 来源:网络整理
导读:data.xml中: 前几个图用的是all,后面几个图用的是ticker salesdataalldata interval="2008 Q1" ferrariUnites="2" ferrariSales="2.32" porscheUnits="2" porscheSales="0.180"/data interval="2008 Q2" ferrariUnites="5" ferrariSales="7.82" porscheUnit
data.xml中:
前几个图用的是all,后面几个图用的是ticker
<salesdata> <all> <data interval="2008 Q1" ferrariUnites="2" ferrariSales="2.32" porscheUnits="2" porscheSales="0.180"/> <data interval="2008 Q2" ferrariUnites="5" ferrariSales="7.82" porscheUnits="3" porscheSales="0.240"/> <data interval="2008 Q3" ferrariUnites="4" ferrariSales="6.92" porscheUnits="7" porscheSales="0.420"/> <data interval="2008 Q4" ferrariUnites="1" ferrariSales="1.80" porscheUnits="12" porscheSales="1.180"/> </all> <ticker> <data interval="09/01/2008" high="54" low="40" open="53" close="43"/> <data interval="09/02/2008" high="69" low="37" open="62" close="40"/> <data interval="09/03/2008" high="62" low="52" open="55" close="60"/> <data interval="09/04/2008" high="65" low="30" open="60" close="52"/> <data interval="09/05/2008" high="60" low="20" open="42" close="48"/> </ticker> </salesdata>
chart.xml中:
<?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"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <fx:XML id="salesDataXML" source="data.xml"/> <s:XMLListCollection id="salesData" source="{salesDataXML.all.data}"/> <s:XMLListCollection id="tickerData" source="{salesDataXML.ticker.data}"/> <!-- 笔触、填充色在面积图中试用 --> <s:SolidColorStroke id="areaStroke" color="green" weight="4" alpha="0.8"/> <s:SolidColor id="areaFill" color="yellow" alpha="0.5"/> <!-- 颜色数组填充色在饼图中试用 --> <fx:Array id="colorArray"> <s:SolidColor color="#6666CC" alpha="0.5"/> <s:SolidColor color="#CC6666" alpha="0.5"/> <s:SolidColor color="#66CC66" alpha="0.5"/> <s:SolidColor color="#B8B83D" alpha="0.5"/> </fx:Array> </fx:Declarations> <s:TileGroup requestedColumnCount="3"> <s:Panel title="折线图" width="500" height="300"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:Legend dataProvider="{salesChart}"/><!--图例和下面的displayName属性相关--> <mx:LineChart id="salesChart" dataProvider="{salesData}" height="100%" width="100%" showDataTips="true"> <mx:verticalAxis> <mx:LinearAxis title="纵轴标题"/> </mx:verticalAxis> <mx:horizontalAxis> <mx:CategoryAxis categoryField="@interval" title="横轴标题"/> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="@ferrariUnites" displayName="Ferrari Count"/> <mx:LineSeries yField="@porscheUnits" displayName="Porsche Count"/> </mx:series> </mx:LineChart> </s:Panel> <s:Panel title="面积图" width="500" height="300"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:Legend dataProvider="{salesChart1}"/> <mx:AreaChart id="salesChart1" dataProvider="{salesData}" height="100%" width="100%" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="@interval"/> </mx:horizontalAxis> <mx:series> <mx:AreaSeries yField="@ferrariUnites" displayName="Ferrari Count" areaFill="{areaFill}" areaStroke="{areaStroke}"/> <mx:AreaSeries yField="@porscheUnits" displayName="Porsche Count" alpha="0.5"/> </mx:series> </mx:AreaChart> </s:Panel> <s:Panel title="条形图" width="500" height="300"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:Legend dataProvider="{salesChart2}"/> <mx:BarChart id="salesChart2" dataProvider="{salesData}" height="100%" width="100%" showDataTips="true"> <mx:verticalAxis> <mx:CategoryAxis categoryField="@interval"/> </mx:verticalAxis> <mx:series> <mx:BarSeries xField="@ferrariUnites" displayName="Ferrari Count"/> <mx:BarSeries xField="@porscheUnits" displayName="Porsche Count"/> </mx:series> </mx:BarChart> </s:Panel> <s:Panel title="气泡图" width="500" height="300"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:Legend dataProvider="{salesChart3}"/> <mx:BubbleChart id="salesChart3" dataProvider="{salesData}" height="100%" width="100%" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="@interval"/> </mx:horizontalAxis> <mx:series> <mx:BubbleSeries yField="@ferrariUnites" radiusField="@ferrariUnites" displayName="Ferrari Count"/> <mx:BubbleSeries yField="@porscheUnits" radiusField="@porscheSales" displayName="Porsche Count"/> </mx:series> </mx:BubbleChart> </s:Panel> <s:Panel title="烛台图" width="500" height="300"> <mx:CandlestickChart id="stockChart" dataProvider="{tickerData}" height="100%" width="100%" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="@interval"/> </mx:horizontalAxis> <mx:series> <mx:CandlestickSeries highField="@high" lowField="@low" openField="@open" closeField="@close"/> </mx:series> </mx:CandlestickChart> </s:Panel> <s:Panel title="HLOC" width="500" height="300"> <mx:HLOCChart id="HLOCChart" dataProvider="{tickerData}" height="100%" width="100%" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="@interval"/> </mx:horizontalAxis> <mx:series> <mx:HLOCSeries highField="@high" lowField="@low" openField="@open" closeField="@close"/> </mx:series> </mx:HLOCChart> </s:Panel> <s:Panel title="饼图" width="500" height="300"> <s:layout> <s:HorizontalLayout/> </s:layout> <mx:Legend dataProvider="{pieChart}"/> <mx:PieChart id="pieChart" dataProvider="{tickerData}" height="100%" width="100%" showDataTips="true"> <mx:series> <mx:PieSeries field="@high" nameField="@interval" labelPosition="callout"/> <mx:PieSeries field="@low" nameField="@interval" labelPosition="inside" fills="{colorArray}"/><!-- fills 用来填充数组 --> </mx:series> </mx:PieChart> </s:Panel> <s:Panel title="散点图" width="500" height="300"> <s:layout> <s:HorizontalLayout/> </s:layout> <mx:Legend dataProvider="{plotChart}"/> <mx:PlotChart id="plotChart" height="100%" width="100%" showDataTips="true"> <mx:series> <mx:PlotSeries dataProvider="{tickerData}" displayName="One" xField="@open" yField="@close"/> <mx:PlotSeries dataProvider="{tickerData}" displayName="Two" xField="@high" yField="@low" /> </mx:series> </mx:PlotChart> </s:Panel> </s:TileGroup> </s:Application> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |