• Flex中的图表

    1、设计思路

         （1）运用导航条，实现多个图在同一界面；

         （2）实现各种不同的图

    2、设计源码

    chart.mxml：

    [html] view plaincopyprint?
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
    3.                xmlns:s="library://ns.adobe.com/flex/spark"   
    4.                xmlns:mx="library://ns.adobe.com/flex/mx"  
    5.                width="100%" height="100%"   
    6.                xmlns:charts="mx.charts.*"   
    7.                xmlns:series="mx.charts.series.*">  
    8.     <s:layout>  
    9.         <s:BasicLayout/>  
    10.     </s:layout>  
    11.     <fx:Declarations>  
    12.           
    13.     </fx:Declarations>  
    14.       
    15.     <fx:Script>  
    16.         <![CDATA[ 
    17.             import mx.collections.ArrayCollection; 
    18.              
    19.             [Bindable] 
    20.             private var chartArray:ArrayCollection = new ArrayCollection([ 
    21.                 {total:"星期一",apple:"78454",banana:"89454",orange:"45122",peach:"65323"}, 
    22.                 {total:"星期二",apple:"57854",banana:"65454",orange:"56122",peach:"78845"}, 
    23.                 {total:"星期三",apple:"56454",banana:"51544",orange:"45121",peach:"95656"}, 
    24.                 {total:"星期四",apple:"95659",banana:"65645",orange:"32323",peach:"42122"}, 
    25.                 {total:"星期五",apple:"54555",banana:"56566",orange:"56232",peach:"56512"}, 
    26.                 {total:"星期六",apple:"54452",banana:"12454",orange:"78454",peach:"26565"}, 
    27.                 {total:"星期日",apple:"23346",banana:"56129",orange:"56444",peach:"23566"}, 
    28.             ]); 
    29.              
    30.             [Bindable] 
    31.             private var candArray:ArrayCollection = new ArrayCollection([ 
    32.                 { Date: "2013-01-01", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31}, 
    33.                 { Date: "2013-01-02", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34}, 
    34.                 { Date: "2013-01-03", Open: 40.38,  High: 40.66, Low: 40.12, Close:40.63}, 
    35.                 { Date: "2013-01-04", Open: 40.49,  High: 40.99, Low: 40.32, Close:40.98}, 
    36.                 { Date: "2013-01-05", Open: 40.13,  High: 40.46, Low: 39.65, Close:39.95}, 
    37.                 { Date: "2013-01-06", Open: 39.00,  High: 39.50, Low: 38.78, Close:38.62},  
    38.                 { Date: "2013-01-07", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84},  
    39.                 { Date: "2013-01-08", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12},  
    40.                 { Date: "2013-01-09", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                        
    41.                 { Date: "2013-01-10", Open: 36.61,  High: 37.56, Low: 36.48, Close:36.86}  
    42.             ]); 
    43.         ]]>  
    44.     </fx:Script>  
    45.       
    46.     <mx:TabNavigator width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">  
    47.         <s:NavigatorContent label="饼图" width="100%" height="100%">  
    48.             <mx:VBox width="100%" height="100%">  
    49.                 <charts:PieChart id="pie" dataProvider="{chartArray}" height="90%" width="100%" showDataTips="true">  
    50.                     <charts:series>  
    51.                         <series:PieSeries displayName="总收入" field="apple" nameField="total"/>  
    52.                     </charts:series>  
    53.                 </charts:PieChart>  
    54.                 <mx:HBox width="100%">  
    55.                     <s:Label width="30%"/>  
    56.                     <charts:Legend dataProvider="{pie}" direction="horizontal"/>  
    57.                 </mx:HBox>  
    58.                   
    59.             </mx:VBox>  
    60.         </s:NavigatorContent>  
    61.         <s:NavigatorContent label="柱状图" width="100%" height="100%">  
    62.             <mx:VBox width="100%" height="100%">  
    63.                 <charts:ColumnChart  id="column" dataProvider="{chartArray}" showDataTips="true" width="100%" height="90%" fontSize="16">  
    64.                     <charts:horizontalAxis>  
    65.                         <charts:CategoryAxis categoryField="total" displayName="星期"/>  
    66.                     </charts:horizontalAxis>  
    67.                     <charts:series>  
    68.                         <series:ColumnSeries displayName="苹果" yField="apple" xField="total"/>  
    69.                         <series:ColumnSeries displayName="香蕉" yField="banana" xField="total"/>  
    70.                         <series:ColumnSeries displayName="橘子" yField="orange" xField="total"/>  
    71.                         <series:ColumnSeries displayName="桃子" yField="peach" xField="total"/>  
    72.                     </charts:series>  
    73.                 </charts:ColumnChart>  
    74.                 <mx:HBox width="100%">  
    75.                     <s:Label width="45%"/>  
    76.                     <charts:Legend dataProvider="{column}" height="25" fontSize="16"/>  
    77.                 </mx:HBox>  
    78.             </mx:VBox>  
    79.         </s:NavigatorContent>  
    80.         <s:NavigatorContent label="面积图" width="100%" height="100%">  
    81.             <mx:VBox width="100%" height="100%">  
    82.                 <charts:AreaChart id="area" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">  
    83.                     <charts:horizontalAxis>  
    84.                         <charts:CategoryAxis categoryField="total" displayName="星期"/>  
    85.                     </charts:horizontalAxis>  
    86.                     <charts:series>  
    87.                         <series:AreaSeries displayName="苹果" yField="apple" xField="total"/>  
    88.                         <series:AreaSeries displayName="香蕉" yField="banana" xField="total"/>  
    89.                         <series:AreaSeries displayName="橘子" yField="orange" xField="total"/>  
    90.                         <series:AreaSeries displayName="桃子" yField="peach" xField="total"/>  
    91.                     </charts:series>  
    92.                 </charts:AreaChart>  
    93.                 <mx:HBox width="100%">  
    94.                     <s:Label width="45%"/>  
    95.                     <charts:Legend dataProvider="{area}" height="25" fontSize="16"/>  
    96.                 </mx:HBox>  
    97.             </mx:VBox>  
    98.         </s:NavigatorContent>  
    99.         <s:NavigatorContent label="折线图" width="100%" height="100%">  
    100.             <mx:VBox width="100%" height="100%">  
    101.                 <charts:LineChart id="line" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">  
    102.                     <charts:horizontalAxis>  
    103.                         <charts:CategoryAxis categoryField="total" displayName="星期"/>  
    104.                     </charts:horizontalAxis>  
    105.                     <charts:series>  
    106.                         <series:LineSeries displayName="苹果" yField="apple" xField="total"/>  
    107.                         <series:LineSeries displayName="香蕉" yField="banana" xField="total"/>  
    108.                         <series:LineSeries displayName="橘子" yField="orange" xField="total"/>  
    109.                         <series:LineSeries displayName="桃子" yField="peach" xField="total"/>  
    110.                     </charts:series>  
    111.                 </charts:LineChart>  
    112.                 <mx:HBox width="100%">  
    113.                     <s:Label width="45%"/>  
    114.                     <charts:Legend dataProvider="{line}" height="25" fontSize="16"/>  
    115.                 </mx:HBox>  
    116.             </mx:VBox>  
    117.         </s:NavigatorContent>  
    118.         <s:NavigatorContent label="条状图" width="100%" height="100%">  
    119.             <mx:VBox width="100%" height="100%">  
    120.                 <charts:BarChart id="bar" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">  
    121.                     <charts:verticalAxis>  
    122.                         <charts:CategoryAxis categoryField="total" displayName="星期"/>  
    123.                     </charts:verticalAxis>  
    124.                     <charts:series>  
    125.                         <series:BarSeries displayName="苹果" xField="apple" yField="total"/>  
    126.                         <series:BarSeries displayName="香蕉" xField="banana" yField="total"/>  
    127.                         <series:BarSeries displayName="橘子" xField="orange" yField="total"/>  
    128.                         <series:BarSeries displayName="桃子" xField="peach" yField="total"/>  
    129.                     </charts:series>  
    130.                 </charts:BarChart>  
    131.                 <mx:HBox width="100%">  
    132.                     <s:Label width="45%"/>  
    133.                     <charts:Legend dataProvider="{bar}" height="25" fontSize="16"/>  
    134.                 </mx:HBox>  
    135.             </mx:VBox>  
    136.         </s:NavigatorContent>  
    137.         <s:NavigatorContent label="气泡图" width="100%" height="100%">  
    138.             <mx:VBox width="100%" height="100%">  
    139.                 <charts:BubbleChart id="bubble" dataProvider="{chartArray}" fontSize="16" showDataTips="true" width="100%" height="90%">  
    140.                     <charts:series>  
    141.                         <series:BubbleSeries displayName="苹果" yField="apple" radiusField="banana"/>  
    142.                         <series:BubbleSeries displayName="橘子" yField="orange" radiusField="banana"/>  
    143.                         <series:BubbleSeries displayName="桃子" yField="peach" radiusField="banana"/>  
    144.                     </charts:series>  
    145.                 </charts:BubbleChart>  
    146.                 <mx:HBox width="100%">  
    147.                     <s:Label width="45%"/>  
    148.                     <charts:Legend dataProvider="{bubble}" height="25"/>  
    149.                 </mx:HBox>  
    150.             </mx:VBox>  
    151.         </s:NavigatorContent>  
    152.         <s:NavigatorContent label="蜡烛图" width="100%" height="100%">  
    153.             <mx:VBox width="100%" height="100%">  
    154.                 <charts:CandlestickChart id="candlestick" dataProvider="{candArray}" fontSize="16" width="100%" height="90%">  
    155.                     <charts:verticalAxis>  
    156.                         <mx:LinearAxis id="haxis" baseAtZero="true" title="Price"/>  
    157.                     </charts:verticalAxis>  
    158.                     <charts:horizontalAxis>  
    159.                         <mx:CategoryAxis categoryField="Date" title="Date" displayName="日期"/>  
    160.                     </charts:horizontalAxis>  
    161.                     <charts:horizontalAxisRenderers>  
    162.                         <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>  
    163.                     </charts:horizontalAxisRenderers>  
    164.                     <charts:series>  
    165.                         <series:CandlestickSeries  openField="Open"   
    166.                                                    highField="High"   
    167.                                                    lowField="Low"   
    168.                                                    closeField="Close"/>  
    169.                     </charts:series>  
    170.                 </charts:CandlestickChart>  
    171.                 <mx:HBox width="100%">  
    172.                     <s:Label width="45%"/>  
    173.                     <charts:Legend dataProvider="{candlestick}" height="25"/>  
    174.                 </mx:HBox>  
    175.             </mx:VBox>  
    176.         </s:NavigatorContent>  
    177.         <s:NavigatorContent label="基址图" width="100%" height="100%">  
    178.             <mx:VBox width="100%" height="100%">  
    179.                 <mx:PlotChart id="plot" dataProvider="{chartArray}" fontSize="16" showDataTips="true" width="100%" height="90%">  
    180.                     <mx:horizontalAxis>  
    181.                         <mx:CategoryAxis categoryField="total" displayName="星期"/>  
    182.                     </mx:horizontalAxis>  
    183.                     <mx:series>  
    184.                         <mx:PlotSeries displayName="苹果" yField="apple" xField="total"/>  
    185.                         <mx:PlotSeries displayName="香蕉" yField="banana" xField="total"/>  
    186.                         <mx:PlotSeries displayName="橘子" yField="orange" xField="total"/>  
    187.                         <mx:PlotSeries displayName="桃子" yField="peach" xField="total"/>  
    188.                     </mx:series>  
    189.                 </mx:PlotChart>  
    190.                 <mx:HBox width="100%">  
    191.                     <s:Label width="45%"/>  
    192.                     <charts:Legend dataProvider="{plot}" height="25"/>  
    193.                 </mx:HBox>  
    194.             </mx:VBox>  
    195.         </s:NavigatorContent>  
    196.     </mx:TabNavigator>  
    197. </s:Application>  
    <?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"
			   width="100%" height="100%" 
			   xmlns:charts="mx.charts.*" 
			   xmlns:series="mx.charts.series.*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var chartArray:ArrayCollection = new ArrayCollection([
				{total:"星期一",apple:"78454",banana:"89454",orange:"45122",peach:"65323"},
				{total:"星期二",apple:"57854",banana:"65454",orange:"56122",peach:"78845"},
				{total:"星期三",apple:"56454",banana:"51544",orange:"45121",peach:"95656"},
				{total:"星期四",apple:"95659",banana:"65645",orange:"32323",peach:"42122"},
				{total:"星期五",apple:"54555",banana:"56566",orange:"56232",peach:"56512"},
				{total:"星期六",apple:"54452",banana:"12454",orange:"78454",peach:"26565"},
				{total:"星期日",apple:"23346",banana:"56129",orange:"56444",peach:"23566"},
			]);
			
			[Bindable]
			private var candArray:ArrayCollection = new ArrayCollection([
				{ Date: "2013-01-01", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
				{ Date: "2013-01-02", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
				{ Date: "2013-01-03", Open: 40.38,  High: 40.66, Low: 40.12, Close:40.63},
				{ Date: "2013-01-04", Open: 40.49,  High: 40.99, Low: 40.32, Close:40.98},
				{ Date: "2013-01-05", Open: 40.13,  High: 40.46, Low: 39.65, Close:39.95},
				{ Date: "2013-01-06", Open: 39.00,  High: 39.50, Low: 38.78, Close:38.62}, 
				{ Date: "2013-01-07", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
				{ Date: "2013-01-08", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
				{ Date: "2013-01-09", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
				{ Date: "2013-01-10", Open: 36.61,  High: 37.56, Low: 36.48, Close:36.86} 
			]);
 		]]>
	</fx:Script>
	
	<mx:TabNavigator width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
		<s:NavigatorContent label="饼图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:PieChart id="pie" dataProvider="{chartArray}" height="90%" width="100%" showDataTips="true">
					<charts:series>
						<series:PieSeries displayName="总收入" field="apple" nameField="total"/>
					</charts:series>
				</charts:PieChart>
				<mx:HBox width="100%">
					<s:Label width="30%"/>
					<charts:Legend dataProvider="{pie}" direction="horizontal"/>
				</mx:HBox>
				
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="柱状图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:ColumnChart  id="column" dataProvider="{chartArray}" showDataTips="true" width="100%" height="90%" fontSize="16">
					<charts:horizontalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:horizontalAxis>
					<charts:series>
						<series:ColumnSeries displayName="苹果" yField="apple" xField="total"/>
						<series:ColumnSeries displayName="香蕉" yField="banana" xField="total"/>
						<series:ColumnSeries displayName="橘子" yField="orange" xField="total"/>
						<series:ColumnSeries displayName="桃子" yField="peach" xField="total"/>
					</charts:series>
				</charts:ColumnChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{column}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="面积图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:AreaChart id="area" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">
					<charts:horizontalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:horizontalAxis>
					<charts:series>
						<series:AreaSeries displayName="苹果" yField="apple" xField="total"/>
						<series:AreaSeries displayName="香蕉" yField="banana" xField="total"/>
						<series:AreaSeries displayName="橘子" yField="orange" xField="total"/>
						<series:AreaSeries displayName="桃子" yField="peach" xField="total"/>
					</charts:series>
				</charts:AreaChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{area}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="折线图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:LineChart id="line" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">
					<charts:horizontalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:horizontalAxis>
					<charts:series>
						<series:LineSeries displayName="苹果" yField="apple" xField="total"/>
						<series:LineSeries displayName="香蕉" yField="banana" xField="total"/>
						<series:LineSeries displayName="橘子" yField="orange" xField="total"/>
						<series:LineSeries displayName="桃子" yField="peach" xField="total"/>
					</charts:series>
				</charts:LineChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{line}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="条状图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:BarChart id="bar" dataProvider="{chartArray}" fontSize="16" width="100%" height="90%" showDataTips="true">
					<charts:verticalAxis>
						<charts:CategoryAxis categoryField="total" displayName="星期"/>
					</charts:verticalAxis>
					<charts:series>
						<series:BarSeries displayName="苹果" xField="apple" yField="total"/>
						<series:BarSeries displayName="香蕉" xField="banana" yField="total"/>
						<series:BarSeries displayName="橘子" xField="orange" yField="total"/>
						<series:BarSeries displayName="桃子" xField="peach" yField="total"/>
					</charts:series>
				</charts:BarChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{bar}" height="25" fontSize="16"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="气泡图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:BubbleChart id="bubble" dataProvider="{chartArray}" fontSize="16" showDataTips="true" width="100%" height="90%">
					<charts:series>
						<series:BubbleSeries displayName="苹果" yField="apple" radiusField="banana"/>
						<series:BubbleSeries displayName="橘子" yField="orange" radiusField="banana"/>
						<series:BubbleSeries displayName="桃子" yField="peach" radiusField="banana"/>
					</charts:series>
				</charts:BubbleChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{bubble}" height="25"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="蜡烛图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<charts:CandlestickChart id="candlestick" dataProvider="{candArray}" fontSize="16" width="100%" height="90%">
					<charts:verticalAxis>
						<mx:LinearAxis id="haxis" baseAtZero="true" title="Price"/>
					</charts:verticalAxis>
					<charts:horizontalAxis>
						<mx:CategoryAxis categoryField="Date" title="Date" displayName="日期"/>
					</charts:horizontalAxis>
					<charts:horizontalAxisRenderers>
						<mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
					</charts:horizontalAxisRenderers>
					<charts:series>
						<series:CandlestickSeries  openField="Open" 
												   highField="High" 
												   lowField="Low" 
												   closeField="Close"/>
					</charts:series>
				</charts:CandlestickChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{candlestick}" height="25"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
		<s:NavigatorContent label="基址图" width="100%" height="100%">
			<mx:VBox width="100%" height="100%">
				<mx:PlotChart id="plot" dataProvider="{chartArray}" fontSize="16" showDataTips="true" width="100%" height="90%">
					<mx:horizontalAxis>
						<mx:CategoryAxis categoryField="total" displayName="星期"/>
					</mx:horizontalAxis>
					<mx:series>
						<mx:PlotSeries displayName="苹果" yField="apple" xField="total"/>
						<mx:PlotSeries displayName="香蕉" yField="banana" xField="total"/>
						<mx:PlotSeries displayName="橘子" yField="orange" xField="total"/>
						<mx:PlotSeries displayName="桃子" yField="peach" xField="total"/>
					</mx:series>
				</mx:PlotChart>
				<mx:HBox width="100%">
					<s:Label width="45%"/>
					<charts:Legend dataProvider="{plot}" height="25"/>
				</mx:HBox>
			</mx:VBox>
		</s:NavigatorContent>
	</mx:TabNavigator>
</s:Application>

    3、运行结果

    （1）饼图


    （2）柱状图


    （3）面积图


    （4）折线图


    （5）条状图


    （6）气泡图


    （7）蜡烛图


    （8）基址图


    原文地址：http://blog.csdn.net/you23hai45/article/details/12254487
  • 相关阅读:
    jQuery 选择器
    jQuery 语法
    jQuery 简介
    JSON 使用
    JSON 语法
    Android——Activity跳转
    Activity
    Activity2.java
    Android——Activity练习
    Andriod——手机尺寸相关的概念 +尺寸单位+关于颜色
  • 原文地址：https://www.cnblogs.com/leixiaohua1020/p/3902144.html
Copyright © 2020-2023  润新知