Flex 3 动态创建Chart

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="initApp()">
    <mx:ApplicationControlBar dock="true">
        <mx:TabNavigator width="100%" height="80" id="chartTab">
            <mx:Canvas label="图表属性" width="100%" height="100%" id="menu">
                <mx:ComboBox x="57" y="2" id="cbChartType" width="80" change="setChartType()">
                <mx:dataProvider>
                 <mx:Object label="饼形图" data="pie" />
           <mx:Object label="柱形图" data="column" />
           <mx:Object label="条形图" data="bar" />
           <mx:Object label="折线图" data="line" />
                </mx:dataProvider>
                </mx:ComboBox>
                <mx:Label x="5" y="2" text="图表类别："/>
                <mx:Button x="627" y="2" label="打印图表" id="tbPiePrint"/>
                <mx:CheckBox id="cbTargetsCheckBox" label="显示所有标签" labelPlacement="left" selected="false"  change="setAllTip()" x="145" y="0" />
                <mx:Label x="238" y="2" text="背景填充 ："/>
                <mx:ColorPicker x="291" y="1" id="cpH" selectedColor="#82CFFB" change="setGridLines()"/>
                <mx:ColorPicker x="321" y="1" id="cpV" selectedColor="#FFFFFF" change="setGridLines()"/>
                <mx:ComboBox x="351" y="2" id="cbGridLineType" width="60" change="setGridLines()">
                 <mx:dataProvider>
                  <mx:Object label="横向" data="horizontal" />
            <mx:Object label="纵向" data="vertical" />
            <mx:Object label="全部" data="both" />
            <mx:Object label="无" data="none" />
                 </mx:dataProvider>  
                </mx:ComboBox>
                <mx:Label x="419" y="4" text="图像大小："/>
                <mx:NumericStepper x="485" y="2" width="50" maximum="100" minimum="10" stepSize="1" id="nsChartWidth" value="100" change="setChartWidth()"/>
                <mx:Label x="468" y="4" text="宽"/>
                <mx:Label x="541" y="4" text="高"/>
                <mx:NumericStepper x="560" y="2" width="50"  id="nsChartHeigth" maximum="100" minimum="10" stepSize="1" value="100" change="setChartHeigth()"/>
            </mx:Canvas>
            <mx:Canvas label="饼形图设置" width="100%" height="100%" id="pieSet">
               
                <mx:ComboBox x="63" y="1" id="pieLabelPositionType" width="80" change="setPieLabelPositionType()">
     <mx:dataProvider>
        <mx:Object label="不显示" data="none" />
           <mx:Object label="在圆内" data="inside" />
           <mx:Object label="在圆外" data="outside" />
           <mx:Object label="显示线" data="callout" />
           <mx:Object label="园内显示线" data="insideWithCallout" /> 
        </mx:dataProvider>
       </mx:ComboBox>                         
                <mx:Label x="10" y="2" text="标注格式："/>
                <mx:Label x="151" y="2" text="内圆半径："/>
                <mx:Label x="297" y="2" text="透明度："/>
                <mx:HSlider x="203" y="0" width="86" id="hsPieInnerRadius" maximum="0.9" minimum="0"  value="0" change="setPieChartInnerRadius()"
                        liveDragging="true"
                        snapInterval="0.1"
                        tickInterval="0.1"/>
                <mx:HSlider x="341" y="0" width="86" id="hsPieAlpha" maximum="1" minimum="0"  value="0" change="setPieChartAlpha()"
                        liveDragging="true"
                        snapInterval="0.1"
                        tickInterval="0.1"/>
            </mx:Canvas>
            <mx:Canvas label="柱形图设置" width="100%" height="100%" id="columSet">
    <mx:Label text="柱形宽度:" x="10" y="2"/>
                <mx:HSlider id="hsColumnWhdith" change="setColumnWhdith()"
                        minimum="0.1"
                        maximum="0.9"
                        value="0.1"
                        liveDragging="true"
                        snapInterval="0.1"
                        tickInterval="0.1"  x="68" width="78"/>
                <mx:Label text="显示类型：" x="154" y="2"/>        
       <mx:ComboBox id="cbColumnType" x="205" y="0" change="setColumnType()">
        <mx:dataProvider>
       <mx:Object label="簇状" data="clustered"/>
       <mx:Object label="堆积" data="stacked"/>
        </mx:dataProvider>
       </mx:ComboBox>
            </mx:Canvas>
            <mx:Canvas label="条形图设置" width="100%" height="100%" id="barSet">
             <mx:Label text="条形宽度：" x="10" y="2"/>
                <mx:HSlider id="hsBarWhdith" change="setBarWhdith()"
                        minimum="0.1"
                        maximum="0.9"
                        value="0.1"
                        liveDragging="true"
                        snapInterval="0.1"
                        tickInterval="0.1"  x="65" width="78"/>
                <mx:Label text="显示类型：" x="142" y="2"/>        
       <mx:ComboBox id="cbBarType" x="205" y="0" change="setBarType()">
        <mx:dataProvider>
       <mx:Object label="簇状" data="clustered"/>
       <mx:Object label="堆积" data="stacked"/>
        </mx:dataProvider>
       </mx:ComboBox>                      

            </mx:Canvas>
            <mx:Canvas label="折线形图设置" width="100%" height="100%" id="lineSet">
             <mx:Label text="折现类别:" x="10" y="3"/>
             <mx:ComboBox x="60" y="1" id="cbLineType" width="60" change="setLineType()">
        <mx:dataProvider>
       <mx:Object label="折线" data="segment"/>
       <mx:Object label="曲线" data="curve"/>
       <mx:Object label="水平线" data="horizontal"/>
       <mx:Object label="竖直线" data="vertical"/>
       <mx:Object label="阶梯线" data="step"/>
       <mx:Object label="反阶梯线" data="reverseStep"/>
        </mx:dataProvider>            
             </mx:ComboBox>
            </mx:Canvas>      
        </mx:TabNavigator>
    </mx:ApplicationControlBar>
    <!--DataEff-->
 <mx:SeriesInterpolate id="interpolate" elementOffset="10"/>
 <mx:SeriesInterpolate id="seriesInterpolate" duration="1000" />
    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%" title="PieChart Exemple" id="chartPanel" horizontalAlign="center">

        <mx:ControlBar width="100%">
        <mx:Legend  id="chartLegend"
           dataProvider=""
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>       
<!--AS脚本-->
<mx:Script>
 <![CDATA[
  import mx.graphics.SolidColor;
  import mx.charts.events.ChartEvent;
  import mx.controls.*;
  import mx.charts.HitData;
  import mx.events.MoveEvent;
  import mx.collections.ArrayCollection;
  import mx.effects.easing.*;
  import mx.charts.series.items.PieSeriesItem;
  import mx.charts.events.ChartItemEvent;
  import mx.charts.series.*;       
  import mx.charts.series.items.*;//引入此包 设置charts的sereies属性
  import flash.external.*;
  import mx.charts.*;

   //引入json包
  import com.adobe.serialization.json.JSON; 
           
  private var _selectedRegion:Object;
  private var oldX:Number;
  private var oldY:Number;
  
  [Bindable]
  private var chartDataSouse:ArrayCollection=new ArrayCollection();
  private var pieChart:PieChart=new PieChart();
  private var pieSeries:PieSeries=new PieSeries();
  private var barChart:BarChart=new BarChart();
  private var barSeries:BarSeries=new BarSeries();
  private var columnChart:ColumnChart=new ColumnChart();
  private var columnSeries:ColumnSeries=new ColumnSeries();
  private var lineChart:LineChart=new LineChart();
  private var lineSeries:LineSeries = new LineSeries();
  
  private var xName:String=new String();
  private var yName:String=new String();
  private var valueUnit:String=new String();
  private var labelType:String=new String();
   

        //初始化程序
        private function initApp():void
        {
         /*
          var jsonStr:String='{"titleName":[{"ptitle":"PieChart示例"}],' +
           '"data":[{"dataName":"Tom","dataValue":"8"},' +
          '{"dataName":"Jack","dataValue":"6"},' +
          '{"dataName":"Jone","dataValue":"9"},' +
          '{"dataName":"Alen","dataValue":"12"},' +
          '{"dataName":"Bill","dataValue":"5"},' +
          '{"dataName":"Kiti","dataValue":"10"}]}';
         */
          var jsonStr:String='{"chartInfo":[{"ptitle":"PieChart示例","xName":"姓名","yName":"时间","valueUnit":"天"}],' +
           '"data":[{"dataName":"Tom","dataValue":"8","dataValue2":"10"},' +
          '{"dataName":"Jack","dataValue":"6","dataValue2":"5"},' +
          '{"dataName":"Jone","dataValue":"9","dataValue2":"7"},' +
          '{"dataName":"Alen","dataValue":"12","dataValue2":"9"},' +
          '{"dataName":"Bill","dataValue":"5","dataValue2":"3"},' +
          '{"dataName":"Kiti","dataValue":"10","dataValue2":"8"}]}';         
         //调用js函数getJsonData获取数据
           // var jsonStr:String=ExternalInterface.call("getJsonData");
           var objdata:Object=JSON.decode(jsonStr);
            chartPanel.title=objdata.chartInfo[0].ptitle;
            xName=objdata.chartInfo[0].xName;
            yName=objdata.chartInfo[0].yName;
            valueUnit=objdata.chartInfo[0].valueUnit;
            
         var arr:Array = (objdata.data as Array);
         var obj:Object=null;
            for(var i:int=0;i<arr.length;i++)
            {
             obj=null;
                obj=new Object();
                obj.dataName=arr[i].dataName;
                obj.dataValue= Number(arr[i].dataValue);
                obj.dataValue2= Number(arr[i].dataValue2);
                chartDataSouse.addItem(obj);

            }
                            
             pieChart.dataProvider=chartDataSouse;
   
    var myPieSeries:Array=new Array();
             pieSeries.field="dataValue";
             pieSeries.nameField="dataName";
             pieSeries.labelFunction=getSliceLabel;
             pieSeries.setStyle("showDataEffect",interpolate);
             myPieSeries.push(pieSeries);
    pieChart.series=myPieSeries;
    chartPanel.addChild(pieChart);
    chartLegend.dataProvider=pieChart;
    
     pieChart.showDataTips=true;
     pieChart.addEventListener(ChartItemEvent.ITEM_CLICK,pieChart_itemClick);
     pieChart.addEventListener(MouseEvent.MOUSE_DOWN,stopMove);
     pieChart.addEventListener(MouseEvent.MOUSE_MOVE,startMove); 
            
    }

          //生成饼图
          private function createPie():void
          {
            
            if (labelType=="")
            {
             labelType="none";
            }
             pieChart.dataProvider=chartDataSouse;
             pieChart.percentWidth=100;
             pieChart.percentHeight=100;
             var myPieSeries:Array=new Array();
             pieSeries.field="dataValue";
             pieSeries.nameField="dataName";
             pieSeries.setStyle("showDataEffect",interpolate);
            // pieSeries.setStyle("labelPosition",labelType);
             myPieSeries.push(pieSeries);
            
             var pieSeries2:PieSeries=new PieSeries();
             pieSeries2.field="dataValue2";
             pieSeries2.nameField="dataName";
             pieSeries2.setStyle("showDataEffect",interpolate);            
             myPieSeries.push(pieSeries2);
             pieChart.series=myPieSeries;
    
             chartPanel.addChild(pieChart);
             chartLegend.dataProvider=pieChart;
    
             pieChart.showDataTips=true;
             pieChart.addEventListener(ChartItemEvent.ITEM_CLICK,pieChart_itemClick);
    pieChart.addEventListener(MouseEvent.MOUSE_DOWN,stopMove);
    pieChart.addEventListener(MouseEvent.MOUSE_MOVE,startMove);    
          }
         
          //生成条形图
          private function createBar():void
          {
             barChart.dataProvider=chartDataSouse;
    barChart.percentWidth=100;
    barChart.percentHeight=100;
                
             var vAxis:CategoryAxis = new CategoryAxis();
          vAxis.categoryField = "dataName" ;
          vAxis.dataProvider =  chartDataSouse;
          barChart.verticalAxis = vAxis;
            
            var mySeries:Array=new Array();
             barSeries.xField="dataValue";
             barSeries.yField="dataName";
             barSeries.displayName="Value1";
             barSeries.setStyle("showDataEffect",seriesInterpolate);
    mySeries.push(barSeries);
    var barSeries2:BarSeries=new BarSeries();
             barSeries2.xField="dataValue2";
             barSeries2.yField="dataName";
             barSeries2.displayName="Value2";
             barSeries2.setStyle("showDataEffect",seriesInterpolate);
    mySeries.push(barSeries2);
       
    barChart.series=mySeries;
   
    
    chartPanel.addChild(barChart);
    barChart.showDataTips=true;
  
    barChart.addEventListener(MouseEvent.MOUSE_DOWN,stopMove);
    barChart.addEventListener(MouseEvent.MOUSE_MOVE,moveBarChart);
    chartLegend.dataProvider=barChart;
          }
         
          //生成柱状图
          private function createColumn():void
          {
             columnChart.dataProvider=chartDataSouse;
    columnChart.percentWidth=100;
    columnChart.percentHeight=100;
                
            var colHAxis:CategoryAxis=new CategoryAxis()
          colHAxis.categoryField = "dataName" ;
          colHAxis.dataProvider =  chartDataSouse;
          //colHAxis.title=xName;
          columnChart.horizontalAxis = colHAxis;            
            
            var myColSereis:Array=new Array();
            columnSeries.dataProvider=chartDataSouse;
             columnSeries.xField="dataName";
             columnSeries.yField="dataValue";
             columnSeries.displayName="Value1";
    myColSereis.push(columnSeries);
    
             var columnSeries2:ColumnSeries=new ColumnSeries();
             columnSeries2.yField="dataValue2";
             columnSeries2.xField="dataName";   
             columnSeries2.displayName="Value2";       
             myColSereis.push(columnSeries2);
                 
    columnChart.series=myColSereis;
    
    chartPanel.addChild(columnChart);
    columnChart.showDataTips=true;
  
    columnChart.addEventListener(MouseEvent.MOUSE_DOWN,stopMove);
    columnChart.addEventListener(MouseEvent.MOUSE_MOVE,moveColumnChart);
    chartLegend.dataProvider=columnChart;
          }
         
          //生成线形图
          private function createLine():void
          {
            
             lineChart.dataProvider=chartDataSouse;
    lineChart.percentWidth=100;
    lineChart.percentHeight=100;
                
            var lineHAxis:CategoryAxis=new CategoryAxis()
          lineHAxis.categoryField = "dataName" ;
          lineHAxis.dataProvider =  chartDataSouse;
          lineChart.horizontalAxis = lineHAxis;            
                     
          var myLineSeries:Array=new Array();  
             lineSeries.xField="dataName";
             lineSeries.yField="dataValue";
             lineSeries.displayName="Value1";
           
    myLineSeries.push(lineSeries);
    
    var lineSeries2:LineSeries=new LineSeries();
             lineSeries2.xField="dataName";
             lineSeries2.yField="dataValue2";
             lineSeries2.displayName="Value2";
    myLineSeries.push(lineSeries2);
    
    lineChart.series=myLineSeries;
    
    chartPanel.addChild(lineChart);
    lineChart.showDataTips=true;
    
    lineChart.addEventListener(MouseEvent.MOUSE_DOWN,stopMove);
    lineChart.addEventListener(MouseEvent.MOUSE_MOVE,moveLineChart);
    chartLegend.dataProvider=lineChart;         
          }
 
 //--------------------------------------------------------------------------------------        
         
        private function setAllTip():void
        {
         
            var type:String=cbChartType.selectedItem.data;
            if(type=="pie")
            {
    pieChart.showAllDataTips=cbTargetsCheckBox.selected;
            }
   
           if(type=="column")
            {
    columnChart.showAllDataTips=cbTargetsCheckBox.selected;
            } 
           if(type=="bar")
            {
    barChart.showAllDataTips=cbTargetsCheckBox.selected;
            } 
                         
           if(type=="line")
            {
    lineChart.showAllDataTips=cbTargetsCheckBox.selected;
            }                      
        }  
             
  //图像背景填充
  private function setGridLines():void
  {
 
   var solidcolorAlpha:Number=0.2;
   var hsc:SolidColor=new SolidColor(cpH.selectedColor,solidcolorAlpha);
   var hasl:SolidColor=new SolidColor(cpV.selectedColor,solidcolorAlpha); 
   var vsl:SolidColor=new SolidColor(cpH.selectedColor,solidcolorAlpha); 
   var vasl:SolidColor=new SolidColor(cpV.selectedColor,solidcolorAlpha);
 
   var gridLines:GridLines=new GridLines();
   gridLines.setStyle("horizontalFill",hsc);
   gridLines.setStyle("horizontalAlternateFill",hasl);
   gridLines.setStyle("verticalFill",vsl);
   gridLines.setStyle("verticalAlternateFill",vasl);
   gridLines.setStyle("direction",cbGridLineType.selectedItem.data);
 
   barChart.backgroundElements=[gridLines];
   columnChart.backgroundElements=[gridLines];
   lineChart.backgroundElements=[gridLines];
   pieChart.backgroundElements=[gridLines];
    
  } 
  
  //图像大小设置
  private function setChartWidth():void
  {
   pieChart.percentWidth=nsChartWidth.value;
   barChart.percentWidth=nsChartWidth.value;
   columnChart.percentWidth=nsChartWidth.value;
   lineChart.percentWidth=nsChartWidth.value;
  }
  private function setChartHeigth():void
  {
   pieChart.percentHeight=nsChartHeigth.value;
   barChart.percentHeight=nsChartHeigth.value;
   columnChart.percentHeight=nsChartHeigth.value;
   lineChart.percentHeight=nsChartHeigth.value;
  }
         
//------------------------------------PieChart属性设置----------------------------------------                   
        //设置饼图格式
        private function setPieLabelPositionType():void
        {
          for each (var series:PieSeries in pieChart.series)
          {
           series.setStyle("labelPosition",pieLabelPositionType.selectedItem.data);
          }
 
        } 
        private function setPieChartAlpha():void
        {
         pieChart.alpha=hsPieAlpha.value;
         
        }

        private function setPieChartInnerRadius():void
        {
         pieChart.setStyle("innerRadius",hsPieInnerRadius.value);
        }
//------------------------------------ColumnChart属性设置-------------------------------------------------------       

  private function setColumnWhdith():void
  {
   columnChart.setStyle("columnWidthRatio",hsColumnWhdith.value);
  }

  private function setColumnBaseAtZero():void
  {
   
  }
  
  private function setColumnType():void
  {
   columnChart.type=cbColumnType.selectedItem.data;
  }
//------------------------------------BarChart属性设置-------------------------------------------------------
  private function setBarWhdith():void
  {
   barChart.setStyle("barWidthRatio",hsBarWhdith.value);
  }
  private function setBarType():void
  {
   barChart.type=cbBarType.selectedItem.data;
  }
//-------------------------------------LinePahrt属性设置---------------------------------------------------------
  //设置折线类型
  private function setLineType():void
  {
   for each(var ser:LineSeries in lineChart.series)
   {
    ser.setStyle("form",cbLineType.selectedItem.data);
   }
  }

//---------------------------------------------------------------------------------------------
        private function setChartType():void
        {
            var type:String=cbChartType.selectedItem.data;
            if(type=="pie")
            {
    chartPanel.removeChildAt(0);
    createPie();
    chartTab.selectedIndex=1;
    
            }
   
           if(type=="column")
            {
             chartPanel.removeChildAt(0);
             createColumn();
             chartTab.selectedIndex=2;
            } 
           if(type=="bar")
            {
             
             chartPanel.removeChildAt(0);
             createBar();
             chartTab.selectedIndex=3;
            } 
                         
           if(type=="line")
            {
             chartPanel.removeChildAt(0);
             createLine();
             chartTab.selectedIndex=4;
            }                      
        } 
         
      //饼块分离事件
        public function set selectedRegion(item:Object):void
        {
           _selectedRegion = item;

            var index:int = -1;
            for (var i:int=0; i < chartDataSouse.length && index == -1; i++)
            {
                if (chartDataSouse[i].Name == item.Name)
                    index = i;
            }
            var explodeData:Array = [];
      
            explodeData[index] = 0.15;
 
            //erWedgeExplodeRadius — 属性, 类 mx.charts.series.PieSeries
    //从 0 到 1 的数字 Array，指定从图表中心到饼图系列的每个楔形应展开的距离，以总半径的百分比形式表示。
            pieChart.series[0].perWedgeExplodeRadius = explodeData;
        }
       
        private function pieChart_itemClick(evt:ChartItemEvent):void
        {
            var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
            //var degrees:Number = radiansToDegrees(item.startAngle);
            var arr:Array = [];
            arr[item.index] = 0.15;
            pieSeries.perWedgeExplodeRadius = arr;
           // pieSeries.startAngle -= degrees;
        }                   
  
        private function getSliceLabel(item:Object, arg2:String, arg3:Number, arg4:Number):String
        {
            return item == null?"":item.dataName + item.dataValue + valueUnit;
           
        }

        //控件移动事
        private function startMove(event:MouseEvent):void
        {
         if(event.buttonDown)
         {
             var x:Number=event.stageX-oldX;
             var y:Number=event.stageY-oldY;
             oldX=event.stageX;
             oldY=event.stageY;
             
             pieChart.move(pieChart.x+x,pieChart.y+y); 
         }
        }
 
        //移动条形图   
        private function moveBarChart(event:MouseEvent):void
        {
         if(event.buttonDown)
         {
             var x:Number=event.stageX-oldX;
             var y:Number=event.stageY-oldY;
             oldX=event.stageX;
             oldY=event.stageY;
             barChart.move(barChart.x+x,barChart.y+y); 
         }
        }

        //移动柱形图   
        private function moveColumnChart(event:MouseEvent):void
        {
         if(event.buttonDown)
         {
             var x:Number=event.stageX-oldX;
             var y:Number=event.stageY-oldY;
             oldX=event.stageX;
             oldY=event.stageY;
             columnChart.move(columnChart.x+x,columnChart.y+y); 
         }
        }
        //移动柱形图   
        private function moveLineChart(event:MouseEvent):void
        {
         if(event.buttonDown)
         {
             var x:Number=event.stageX-oldX;
             var y:Number=event.stageY-oldY;
             oldX=event.stageX;
             oldY=event.stageY;
             lineChart.move(lineChart.x+x,lineChart.y+y); 
         }
        }                       
        //控件停止移动事
        private function stopMove(event:MouseEvent):void
        {
         oldX=event.stageX;
         oldY=event.stageY;
        } 

          
 ]]>
</mx:Script>
<!--脚本结束-->

</mx:Application>