加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读