flex編程動(dòng)態(tài)生成圖像
更新時(shí)間:2008年12月19日 13:23:15 作者:
程序需求:動(dòng)態(tài)生成柱形圖,柱形條數(shù)不確定,柱形字段不確定
要?jiǎng)討B(tài)生成圖像必需先把記錄轉(zhuǎn)為圖像處理所需的格式,以下是處理類(lèi)
package emtit.utils
{
import mx.charts.CategoryAxis;
import mx.charts.series.ColumnSeries;
import mx.charts.series.PieSeries;
import mx.collections.ArrayCollection;
/**
* author:黃建文
* data:2008-12-03
* 圖形數(shù)據(jù)轉(zhuǎn)換類(lèi)
*/
public class ChartDataTransform
{
public function ChartDataTransform()
{
}
/**
*高級(jí)圖表分析生成,把datagride的數(shù)據(jù)轉(zhuǎn)換為適合圖像顯示的數(shù)據(jù)
* 返回?cái)?shù)據(jù)格式如下
* [{keyword1:'張三',keyword1:'10',keyword3:11},{keyword1:'李四',keyword1:'10',keyword3:11}]
*
*/
public static function advanced(sourceData:Array,xaxis:String,yfield:Array):ArrayCollection{
var i:int,j:int;
var obj:Object;
var name:String,field:String;
var returnObj:Object = new Object();
var returnArrC:ArrayCollection=new ArrayCollection;
var nowname:*=null;
var isChange:Boolean=false;
sourceData.sortOn(xaxis);
for(i=0;i<sourceData.length;i++){
for(field in sourceData[i]){
name=sourceData[i][xaxis];
if(name!=nowname){
returnObj[name]=new Object;
returnObj[name][xaxis]=sourceData[i][xaxis];
nowname=name;
}
for(j=0;j<yfield.length;j++){
if(field==yfield[j]['data']){
if(returnObj[name][field]==undefined){
returnObj[name][field]=0;
}
returnObj[name][field]=parseInt(returnObj[name][field])+parseInt(sourceData[i][field]);
// trace('把這個(gè)字段'+yfield[j]['data']+'的值'+sourceData[i][field]+'放到Y(jié)軸的一個(gè)數(shù)組中');
}
}
}
}
for each(var num:* in returnObj){
returnArrC.addItem(num);
for(var field2:String in num){
trace(num[xaxis]+'要輸出圖的字段:'+field2);
}
}
return returnArrC;
}
/**
*設(shè)置柱圖形categoryField
*/
public static function setCategoryAxis(categoryField:String):CategoryAxis{
var ca:CategoryAxis=new CategoryAxis;
ca.categoryField=categoryField;
return ca;
}
/**
* 設(shè)置柱形X軸對(duì)應(yīng)柱狀數(shù)據(jù)
* xy數(shù)組必需為xy=array({lable:'分?jǐn)?shù)',data:'keyword2'},{lable:'只數(shù)',data:'keyword3'})
* displayName要與setCategoryAxis的值對(duì)應(yīng)
*/
public static function setColumnSeries(yFieldArr:Array,xField:String):Array{
var cs:ColumnSeries;
var rsArr:Array=new Array;
for(var i:int=0;i<yFieldArr.length;i++){
cs=new ColumnSeries;
cs.displayName=yFieldArr[i]['lable'];
cs.xField=xField;
cs.yField=yFieldArr[i]['data'];
rsArr.push(cs);
trace('第'+i+'條柱的屬性,displayName:'+cs.displayName+',xField:'+cs.xField+',yField:'+cs.yField);
}
return rsArr;
}
}
}
在視圖中代碼如下
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute" width="468" height="514" showCloseButton="true" close="PopUpManager.removePopUp(this)">
<mx:Script>
<![CDATA[
import mx.automation.delegates.charts.ColumnSeriesAutomationImpl;
import mx.controls.Label;
import mx.charts.series.ColumnSeries;
import mx.charts.chartClasses.Series;
import mx.collections.ArrayCollection;
import yes3d.model.MainModel;
import mx.managers.PopUpManager;
private function init():void{
//下面這三句是數(shù)據(jù)轉(zhuǎn)換
ch_column.dataProvider=MainModel.chartData;
ch_column.horizontalAxis=ChartDataTransform.setCategoryAxis('xaxis');
ch_column.series=ChartDataTransform.setColumnSeries([{lable:orderby,data:'value'}],'xaxis');
for(var i:int=0;i<ch_column.series.length;i++){
trace('id:'+ch_column.series[i]['id']+',displayName:'+ch_column.series[i]['displayName']+',yfield:'+ch_column.series[i]['yField']+',xfield:'+ch_column.series[i]['xField']);
}
}
]]>
</mx:Script>
<mx:ViewStack x="0" y="0" id="vs_chart" width="100%" height="100%">
<mx:Canvas id="cv_column" label="柱型圖" width="100%" height="100%">
<mx:ColumnChart id="ch_column" showDataTips="true" x="24" y="61" width="399" height="336">
</mx:ColumnChart>
<mx:Legend dataProvider="{ch_column}"/>
</mx:Canvas>
<mx:Canvas id="cv_pie" label="餅型圖" width="100%" height="100%">
<mx:PieChart id="ch_pie" showDataTips="true" dataProvider="{MainModel.chartData}" x="38" y="48" height="394" width="389">
<mx:series>
<mx:PieSeries nameField="xaxis" field="value"/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{ch_pie}"/>
</mx:Canvas>
</mx:ViewStack>
</mx:TitleWindow>
復(fù)制代碼 代碼如下:
package emtit.utils
{
import mx.charts.CategoryAxis;
import mx.charts.series.ColumnSeries;
import mx.charts.series.PieSeries;
import mx.collections.ArrayCollection;
/**
* author:黃建文
* data:2008-12-03
* 圖形數(shù)據(jù)轉(zhuǎn)換類(lèi)
*/
public class ChartDataTransform
{
public function ChartDataTransform()
{
}
/**
*高級(jí)圖表分析生成,把datagride的數(shù)據(jù)轉(zhuǎn)換為適合圖像顯示的數(shù)據(jù)
* 返回?cái)?shù)據(jù)格式如下
* [{keyword1:'張三',keyword1:'10',keyword3:11},{keyword1:'李四',keyword1:'10',keyword3:11}]
*
*/
public static function advanced(sourceData:Array,xaxis:String,yfield:Array):ArrayCollection{
var i:int,j:int;
var obj:Object;
var name:String,field:String;
var returnObj:Object = new Object();
var returnArrC:ArrayCollection=new ArrayCollection;
var nowname:*=null;
var isChange:Boolean=false;
sourceData.sortOn(xaxis);
for(i=0;i<sourceData.length;i++){
for(field in sourceData[i]){
name=sourceData[i][xaxis];
if(name!=nowname){
returnObj[name]=new Object;
returnObj[name][xaxis]=sourceData[i][xaxis];
nowname=name;
}
for(j=0;j<yfield.length;j++){
if(field==yfield[j]['data']){
if(returnObj[name][field]==undefined){
returnObj[name][field]=0;
}
returnObj[name][field]=parseInt(returnObj[name][field])+parseInt(sourceData[i][field]);
// trace('把這個(gè)字段'+yfield[j]['data']+'的值'+sourceData[i][field]+'放到Y(jié)軸的一個(gè)數(shù)組中');
}
}
}
}
for each(var num:* in returnObj){
returnArrC.addItem(num);
for(var field2:String in num){
trace(num[xaxis]+'要輸出圖的字段:'+field2);
}
}
return returnArrC;
}
/**
*設(shè)置柱圖形categoryField
*/
public static function setCategoryAxis(categoryField:String):CategoryAxis{
var ca:CategoryAxis=new CategoryAxis;
ca.categoryField=categoryField;
return ca;
}
/**
* 設(shè)置柱形X軸對(duì)應(yīng)柱狀數(shù)據(jù)
* xy數(shù)組必需為xy=array({lable:'分?jǐn)?shù)',data:'keyword2'},{lable:'只數(shù)',data:'keyword3'})
* displayName要與setCategoryAxis的值對(duì)應(yīng)
*/
public static function setColumnSeries(yFieldArr:Array,xField:String):Array{
var cs:ColumnSeries;
var rsArr:Array=new Array;
for(var i:int=0;i<yFieldArr.length;i++){
cs=new ColumnSeries;
cs.displayName=yFieldArr[i]['lable'];
cs.xField=xField;
cs.yField=yFieldArr[i]['data'];
rsArr.push(cs);
trace('第'+i+'條柱的屬性,displayName:'+cs.displayName+',xField:'+cs.xField+',yField:'+cs.yField);
}
return rsArr;
}
}
}
在視圖中代碼如下
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute" width="468" height="514" showCloseButton="true" close="PopUpManager.removePopUp(this)">
<mx:Script>
<![CDATA[
import mx.automation.delegates.charts.ColumnSeriesAutomationImpl;
import mx.controls.Label;
import mx.charts.series.ColumnSeries;
import mx.charts.chartClasses.Series;
import mx.collections.ArrayCollection;
import yes3d.model.MainModel;
import mx.managers.PopUpManager;
private function init():void{
//下面這三句是數(shù)據(jù)轉(zhuǎn)換
ch_column.dataProvider=MainModel.chartData;
ch_column.horizontalAxis=ChartDataTransform.setCategoryAxis('xaxis');
ch_column.series=ChartDataTransform.setColumnSeries([{lable:orderby,data:'value'}],'xaxis');
for(var i:int=0;i<ch_column.series.length;i++){
trace('id:'+ch_column.series[i]['id']+',displayName:'+ch_column.series[i]['displayName']+',yfield:'+ch_column.series[i]['yField']+',xfield:'+ch_column.series[i]['xField']);
}
}
]]>
</mx:Script>
<mx:ViewStack x="0" y="0" id="vs_chart" width="100%" height="100%">
<mx:Canvas id="cv_column" label="柱型圖" width="100%" height="100%">
<mx:ColumnChart id="ch_column" showDataTips="true" x="24" y="61" width="399" height="336">
</mx:ColumnChart>
<mx:Legend dataProvider="{ch_column}"/>
</mx:Canvas>
<mx:Canvas id="cv_pie" label="餅型圖" width="100%" height="100%">
<mx:PieChart id="ch_pie" showDataTips="true" dataProvider="{MainModel.chartData}" x="38" y="48" height="394" width="389">
<mx:series>
<mx:PieSeries nameField="xaxis" field="value"/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{ch_pie}"/>
</mx:Canvas>
</mx:ViewStack>
</mx:TitleWindow>
相關(guān)文章
XML TO ArrayCollection 兩種實(shí)現(xiàn)方式
最近研究FLEX,在網(wǎng)上看過(guò)100遍同一篇文章,結(jié)果測(cè)試不通,不知道到底能不能跑通,最后翻資料自己試驗(yàn)處理。2009-06-06FluorineFx.NET的認(rèn)證(Authentication )與授權(quán)(Authorization)Flex與.NE
FluorineFx.NET的認(rèn)證(Authentication )與授權(quán)(Authorization)和ASP.NET中的大同小異,核實(shí)用戶(hù)的身份既為認(rèn)證,授權(quán)則是確定一個(gè)用戶(hù)是否有某種執(zhí)行權(quán)限2009-06-06Flex與.NET互操作 使用FileReference+HttpHandler實(shí)現(xiàn)文件上傳/下載
Flex與.NET互操作 使用FileReference+HttpHandler實(shí)現(xiàn)文件上傳/下載2009-06-06Flex 畫(huà)面快照截圖及顯示實(shí)現(xiàn)代碼
在軟件開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)有對(duì)畫(huà)面進(jìn)行快照截圖的需求,例如把畫(huà)面當(dāng)前顯示的狀態(tài)捕捉下來(lái)保存成圖片。接下來(lái)討論如何在flex中對(duì)畫(huà)面進(jìn)行截圖,畫(huà)面截圖完成后怎樣再顯示到畫(huà)面上。2009-10-10在flex中執(zhí)行一個(gè)javascript方法的簡(jiǎn)單方式
說(shuō)明:這里巧妙的運(yùn)用了JavaScript中的eval全局函數(shù),非常好,省的在嵌入flash的網(wǎng)頁(yè)文件中寫(xiě)JavaScript函數(shù)。2009-05-05