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