flex图标基本应用

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