flex编程动态生成图像

来源：互联网发布：sql当前时间减一小时编辑：程序博客网时间：2024/06/10 16:06

程序需求：动态生成柱形图，柱形条数不确定，柱形字段不确定

要动态生成图像必需先把记录转为图像处理所需的格式,以下是处理类

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
     * 图形数据转换类
     */
    public class ChartDataTransform
    {
        
        public function ChartDataTransform()
        {
        }
        
        /**
         *高级图表分析生成，把datagride的数据转换为适合图像显示的数据
         * 返回数据格式如下
         * [{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('把这个字段'+yfield[j]['data']+'的值'+sourceData[i][field]+'放到Y轴的一个数组中'); 
                        }
                    }
                }
            }
            for each(var num:* in returnObj){
                returnArrC.addItem(num);
                for(var field2:String in num){
                    trace(num[xaxis]+'要输出图的字段:'+field2);
                }
            }
            
            return returnArrC;
        }
        /**
         *设置柱图形categoryField 
         */
        public static function setCategoryAxis(categoryField:String):CategoryAxis{
            var ca:CategoryAxis=new CategoryAxis;
            ca.categoryField=categoryField;
            return ca; 
        }
        /**
         * 设置柱形X轴对应柱状数据
         * xy数组必需为xy=array({lable:'分数'，data:'keyword2'},{lable:'只数'，data:'keyword3'})
         * displayName要与setCategoryAxis的值对应
         */
        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{
//下面这三句是数据转换
           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>