文档章节

Flex中的图表

abcijkxyz
 abcijkxyz
发布于 2016/08/06 12:03
字数 1144
阅读 2
收藏 0

1、设计思路

     (1)运用导航条,实现多个图在同一界面;

     (2)实现各种不同的图

2、设计源码

chart.mxml:


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

本文转载自:http://blog.csdn.net/leixiaohua1020/article/details/12356699

共有 人打赏支持
abcijkxyz
粉丝 63
博文 6196
码字总数 1876
作品 0
深圳
项目经理
私信 提问

暂无文章

分布式项目(五)iot-pgsql

书接上回,在Mapping server中,我们已经把数据都整理好了,现在利用postgresql存储历史数据。 iot-pgsql 构建iot-pgsql模块,这里我们写数据库为了性能考虑不在使用mybatis,换成spring jd...

lelinked
今天
2
0
一文分析java基础面试题中易出错考点

前言 这篇文章主要针对的是笔试题中出现的通过查看代码执行结果选择正确答案题材。 正式进入题目内容: 1、(单选题)下面代码的输出结果是什么? public class Base { private Strin...

一看就喷亏的小猿
今天
1
0
cocoapods 用法

cocoapods install pod install 更新本地已经install的仓库 更新所有的仓库 pod update --verbose --no-repo-update 更新制定的仓库 pod update ** --verbose --no-repo-update...

HOrange
今天
3
0
linux下socket编程实现一个服务器连接多个客户端

使用socekt通信一般步骤 1)服务器端:socker()建立套接字,绑定(bind)并监听(listen),用accept()等待客户端连接。 2)客户端:socker()建立套接字,连接(connect)服务器,连接上后...

shzwork
昨天
3
0
android自定义viewgroup画背景

设计部要求背景实现一个背景边框带圆弧的效果: 所以想着用自定义控件画一个背景。 为了方便,继承的是LinearLayout,在onMeasure中先获取控件宽高: @Overrideprotected void onMeasure(in...

醉雨
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部