(FLEX生成饼图)关于FLEX中的XML转换为ArrayCollection的应用.
(FLEX生成饼图)关于FLEX中的XML转换为ArrayCollection的应用.
说说应用.数据库的使用空间的饼图.当然可以有更多的数据对比.这个根据需求:
题记:学习这个FLEX真是逼不得已,由于最近用这个东西做项目,说实话,好多东西都是我从网上copy过来的,说起来十分汗颜.
自己做的那点东西,完全不足挂齿.好了,还是言归正传吧,把自己的一点点收获还是奉献给大家:这里要谈的是FLEX当中后台获取的XML(主要是自己从数据库当中获取的数据,自己封装的XML)转换成ArrayCollection并且生成饼图;
首先是从后台得到数据,这里只有一点重要的,就是HTTPService的resultFormat,这里大家大可以换很多方式来试试.说起来真是屡试不爽,呵呵,就这么点东西,自己还以为发现了新大陆,原来这个早已经被开垦过的东西已经所剩无几了,哈哈.
还是来谈程序吧,
数据来源,后台,来看看Java代码.
@Override public void queryDatabasestat(HttpServletRequest request, HttpServletResponse response) { StringBuffer xml = new StringBuffer(); try { Map<String, Object> map = (Map<String, Object>) ((databasestatDao .query()).get(0)); /* //xml.append("["); xml.append("{").append("name:/"空闲空间/", value:").append( String.valueOf(map.get("FREESPACE"))).append("},"); xml.append("{").append("name:/"使用空间/", value:").append( String.valueOf(map.get("USEDSPACE"))).append("}"); //xml.append("]"); */ xml.append("<projects>"); xml.append("<project").append(" name=/"可用空间/" value=/"").append( String.valueOf(map.get("FREESPACE"))).append("/"").append("/>"); xml.append("<project").append(" name=/"已用空间/" value=/"").append( String.valueOf(map.get("USEDSPACE"))).append("/"").append("/>"); xml.append("</projects>"); //System.out.println(xml); } catch (Exception e) { e.printStackTrace(); xml.append(ToyXML.writeAlert(false, "获取菜单树失败:/n" + e.getMessage())); } finally { writeXML(response, xml); //System.out.println("xml---------->"); //System.out.println(xml); } }
这里返回的就是一个XML格式的数据流.然后就是FLEX的页面获取.
见程序:
<?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationCompleteEffect="seqIn" width="100%" height="100%" verticalScrollPolicy="off" implements="modules.control.IModuleController" creationComplete="init();"> <mx:HTTPService id="request4xml" resultFormat="e4x" url="{actionURL}" method="post" showBusyCursor="true" result="response4xml(event);"/> <mx:Style source="resources/css/project.css" /> <!-- 全局 --> <mx:Script source="../../../resources/ases/main.as" /> <!-- 工具 --> <mx:Script source="../../../resources/ases/toy.as" /> <!-- 模块控制器 --> <mx:Script source="../../control/ModuleController.as" /> <!-- 业务实现 --> <mx:Script source="business/bs4xml.as" /> <mx:Script> <!--[CDATA[ import mx.utils.ObjectProxy; import mx.utils.ObjectUtil; import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; import mx.controls.Alert; import mx.charts.series.items.PieSeriesItem; import mx.charts.events.ChartItemEvent; [Bindable] private var actionURL:String = address + 'databasestat.do'; private var xmlObj:XML; private var arr:ArrayCollection; private function pieChart_itemClick(evt:ChartItemEvent):void { var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem; Expense.text = "项目: " + psi.item.@name; Amount.text = "使用量: " + psi.item.@value + '（M）'; percent.text = "使用率: " + psi.percentValue.toFixed(1) + "%" //percent.text = "水果比例: " + psi.percentValue.toFixed(1) + "%" } private function init():void{ // 1.初始化归属地区 params = {}; params['handle'] = 'pie'; request4xml.send(params);//得到数据 } private function response4xml(event:ResultEvent):void{ xmlObj = event.result as XML; arr = new ArrayCollection(); //Alert.show(xmlObj.toXMLString()+xmlObj.length(),'');//可行 //Alert.show(xmlObj.toXMLString()+xmlObj.children().length(),'');//可行 for each(var arrxml:XML in xmlObj.children()){ arr.addItem(arrxml); } pieChart.dataProvider = arr; } ]]> </mx:Script> <mx:Style> Application{ fontSize: 12; backgroundGradientColors: #ffffff,#D4D4D4; themeColor:#AEB4E6 } .greenbg { headerColors: #667416, #CBDB30; highlightAlphas: 0, 0; } </mx:Style> <mx:Panel id="sg" title="数据库表空间占用 单位（M）" styleName="greenbg" height="494" width="780" layout="absolute" x="5" y="5"><!-- status="DEMOPieChart取值" --> <mx:PieChart id="pieChart" itemClick="pieChart_itemClick(event);" showDataTips="true" height="408" width="720" fontSize="12" x="2" y="2"> <mx:series> <mx:PieSeries labelPosition="callout" field="@value" nameField="@name" fontSize="12" > <mx:calloutStroke><!-- 数据线的一些信息 --> <mx:Stroke weight="0" color="0x888888" alpha="1.0"/> </mx:calloutStroke> <mx:radialStroke><!-- 每一个图之间的交割地方的颜色值 --> <mx:Stroke weight="0" color="#FFFFFF" alpha="0.20"/> </mx:radialStroke> <mx:stroke> <mx:Stroke color="0" alpha="0.20" weight="2"/> </mx:stroke> </mx:PieSeries> </mx:series> </mx:PieChart> <mx:Legend dataProvider="{pieChart}" /> <mx:VBox width="163" y="38" x="547" backgroundColor="#ACBEC6" backgroundAlpha="0.5" borderColor="#C6D8E5" cornerRadius="4" borderStyle="solid" verticalGap="2" height="72"> <mx:Label x="10" y="10" text="项目:" id="Expense"/> <mx:Label x="10" y="30" text="使用量:" id="Amount"/> <mx:Label x="10" y="50" text="使用率:" id="percent"/> <!-- <mx:Label x="10" y="50" text=":" id="percent"/> --> </mx:VBox> <!-- <mx:TextArea x="23" y="404" width="130" height="25" backgroundAlpha="0.0" color="#ffffff" borderThickness="0" enabled="true" editable="false" wordWrap="true"> <mx:htmlText> <![CDATA[<b><font color="#138FEC">CSS</font><font color="#fefe00">FLEX</font>.com</b>]]--> </mx:htmlText> </mx:TextArea> --> </mx:Panel> </mx:Module>
这里的程序就是网上的,呵呵,其实自己就是转换了一下.用到的,就说出来吧,主要是这个.
<mx:HTTPService id="request4xml" resultFormat="e4x"
url="{actionURL}" method="post" showBusyCursor="true"
result="response4xml(event);"/>
当中的resultFormat="e4x"和result="response4xml(event);"
然后用下面的方法,取出数据,放到数组当中,说实话,学习的东西还有很多,
private function init():void{
// 1.初始化归属地区
params = {};
params['handle'] = 'pie';
request4xml.send(params);//得到数据
}
private function response4xml(event:ResultEvent):void{
xmlObj = event.result as XML;
arr = new ArrayCollection();
//Alert.show(xmlObj.toXMLString()+xmlObj.length(),'');//可行
//Alert.show(xmlObj.toXMLString()+xmlObj.children().length(),'');//可行
for each(var arrxml:XML in xmlObj.children()){
arr.addItem(arrxml);
}
pieChart.dataProvider = arr;
}
当然不一而论,如果你这里不行,希望换个方式来思考一下,比如上面的得到数据,多用调试,呵呵,这个也是网上学的,希望大家去试试,设置断点吧,自己觉得这个也是屡试不爽,当然,最简单的就是Alert了,就跟syso一样.