Draw a 3D chart in flex chart

A burst on the forum to see a brother, want to set the 3D effect in the flex chart for the legend, in recent days to find some information, hands-on a demo for everyone to reference!
Demo Demo Address http://xingjunli.webs.com/flash/flexChartDemo.swf, first take a look at the final effect:

Related knowledge points
1, the use of the chart I will not do more introduction, online also a lot of official also have a good tutorial (for reference: Skinning Chartitem objects);
2. To customize the chart series, all we have to do is rewrite the Programmaticskin base class and implement the Updatedisplaylist method in the Idatarenderer interface method to apply our custom appearance class in the series " Drawhelper.histogramskin "is just as good as:

<mx:columnseries showdataeffect= "Slidein" hidedataeffect= "Slideout" xfield= "label" yfield= "Value" itemRenderer= " Drawhelper.histogramskin "/>

3, we use graphic in the 2D scene to draw (3D) the way the cube to draw the series, first understand the application of 3D coordinates (drawing in series is drawn from the bottom up of the drawing process you see the coordinate system is just inverted) as shown:

Implementation process and code:
1, custom cube diagram appearance class:

Package Drawhelper {import flash.geom.Point; import Mx.charts.series.items.ColumnSeriesItem; import Mx.core.IDataRenderer; Import Mx.skins.ProgrammaticSkin; public class Solidskin extends Programmaticskin implements Idatarenderer {private var colors:array = [0x60cb00,0x6a7a88,0 X3698FF,0X66A800,0XFF6600,0X655FC8,0XD2691E]; private Var _chartitem:columnseriesitem; Public Function Solidskin () {super (),} public function Get Data (): Object {return object (_chartitem),} public function Set data (Value:object): void {_chartitem = value as Columnseriesitem; Invalidatedisplaylist ();} Override protected Functi On Updatedisplaylist (Unscaledwidth:number, unscaledheight:number): void {super.updatedisplaylist (unscaledWidth, Unscaledheight); This.graphics.clear (); var Points:array = getpoints (unscaledwidth*0.65,unscaledheight); Drawfill (Points[4],points[7],points[6],points[5]); Drawfill (Points[6],points[2],points[3],points[7]); Drawfill (Points[7],points[4],points[0],points[3]); This.graphics.endFilL (); }//Get 3D coordinate information function getpoints (w:number,h:number): array {var points:array = new Array (8); points[0] = new Point (0,h) according to the length of the width ; POINTS[1] = new Point (W,H); POINTS[2] = new Point (w,0); POINTS[3] = new Point (0,0); POINTS[4] = new Point (0+w/2.0,h+w/2.0); POINTS[5] = new Point (w+w/2.0,h+w/2.0); POINTS[6] = new Point (w+w/2.0,0+w/2.0); POINTS[7] = new Point (0+w/2.0,0+w/2.0); return points; }//Based on the incoming coordinate information, draw the line and fill the drawing area function Drawfill (... args): void {with (this.graphics) {LineStyle (0.5,0x7dbfc6,0.8); Beginfill (colors[(_chartitem = = null)? 0:_chartitem.index],0.95); MoveTo (ARGS[0].X,ARGS[0].Y); for (Var i=1;i<args.length;i++) {lineTo (ARGS[I].X,ARGS[I].Y);}} }}} 
2, custom cylindrical appearance class:

Package Drawhelper {import flash.display.Graphics; import flash.display.GradientType; import Mx.charts.series.items.ColumnSeriesItem; Import Mx.core.IDataRenderer; Import Mx.skins.ProgrammaticSkin; public class Histogramskin extends Programmaticskin implements Idatarenderer {private var colors:array = [0x60cb00,0x6a7a 88,0X3698FF,0X66A800,0XFF6600,0X655FC8,0XD2691E]; private Var _chartitem:columnseriesitem; Public Function Histogramskin () {} Public function get Data (): Object {return object (_chartitem),} public function set dat A (Value:object): void {_chartitem = value as Columnseriesitem; Invalidatedisplaylist ();} Override protected function Upda Tedisplaylist (Unscaledwidth:number, unscaledheight:number): void {super.updatedisplaylist (unscaledWidth, Unscaledheight); var g:graphics = Graphics; G.clear (); G.beginfill (colors[(_chartitem = = null)? 0:_chartitem.index]); G.drawrect (0,unscaledwidth * 0.125,unscaledwidth,unscaledheight); G.linestyle (1,0xffffff,0.25); G.beginfill (colors[(_chartiTEM = = null)? 0:_chartitem.index]); G.drawellipse (0,0,unscaledwidth,unscaledwidth * 0.25); G.endfill (); }}} 
3. Implement cubic Diagram components

<?xml version= "1.0" encoding= "Utf-8"?> <mx:panel title= "{title}" xmlns:mx= "Http://www.adobe.com/2006/mxml" Width= "100%" height= "100%" > <mx:Script> <!--[cdata[import Mx.charts.chartClasses.CartesianCanvasValue; Import Mx.graphics.codec.JPEGEncoder; Import mx.collections.ArrayCollection; Import Drawhelper.histogramskin; [Bindable] public var expenses:arraycollection; [Bindable] private var lengvalue:string; [Bindable] private var title:string; [Bindable] private var xlabel:string; [Bindable] private var isshowalltrip:boolean =false; Public function init (datas:arraycollection,leng:string,title:string,xtitle:string= "", Showalltrip:boolean=false): void {Isshowalltrip = Showalltrip; title = title; Xlabel= Xtitle; if (expenses! = null && expenses.length>0) {Expenses.removeall ();} else {expenses = new arraycollection ();} expenses = datas; Lengvalue = Leng; }]]--> </mx:Script> <mx:seriesslide id= "Slidein" duration= "" "direction=" Up "/> <mx:Seriesslide id= "Slideout" duration= "$" direction= "down"/> <mx:columnchart horizontalcenter= "true" fontSize= " 13.5 "id=" MyChart "dataprovider=" {expenses} "showdatatips=" {!isshowalltrip} "textalign=" center "width=" 95% "height=" 100% "showalldatatips=" {Isshowalltrip} > <mx:seriesFilters> <mx:Array/> </mx:seriesFilters> <mx:horizontalAxis> <mx:categoryaxis dataprovider= "{expenses}" categoryfield= "label"/> &LT;/MX: horizontalaxis> <mx:series> <mx:columnseries showdataeffect= "Slidein" hidedataeffect= "Slideout" xField= "Label" yfield= "value" itemrenderer= "Drawhelper.solidskin"/> </mx:series> </mx:ColumnChart> <mx: Label id= "xmsg" text= "{Xlabel}" fontsize= "+" width= "95%" textalign= "center" letterspacing= "1.5" > </mx:label > <mx:legend id= "lenged" x= "{parent.width-lenged.width-50}" y= "5" visible= "{(Lengvalue! =")} "> <mx:legen Ditem label= "{lengvalue}" stylename= "LegendItem"/> </mx:Legend> </mx:P anel>  
4. Implement bar Chart Assembly

<?xml version= "1.0" encoding= "Utf-8"?> <mx:panel title= "{title}" xmlns:mx= "Http://www.adobe.com/2006/mxml" Width= "100%" height= "100%" > <mx:Script> <!--[cdata[import Mx.charts.chartClasses.CartesianCanvasValue; Import Mx.graphics.codec.JPEGEncoder; Import mx.collections.ArrayCollection; Import Drawhelper.histogramskin; [Bindable] public var expenses:arraycollection; [Bindable] private var lengvalue:string; [Bindable] private var title:string; [Bindable] private var xlabel:string; [Bindable] private var isshowalltrip:boolean =false; Public function init (datas:arraycollection,leng:string,title:string,xtitle:string= "", Showalltrip:boolean=false): void {Isshowalltrip = Showalltrip; title = title; Xlabel= Xtitle; if (expenses! = null && expenses.length>0) {Expenses.removeall ();} else {expenses = new arraycollection ();} expenses = datas; Lengvalue = Leng; }]]--> </mx:Script> <mx:seriesslide id= "Slidein" duration= "" "direction=" Up "/> <mx:Seriesslide id= "Slideout" duration= "$" direction= "down"/> <mx:columnchart horizontalcenter= "true" fontSize= " 13.5 "id=" MyChart "dataprovider=" {expenses} "showdatatips=" {!isshowalltrip} "textalign=" center "width=" 95% "height=" 100% "showalldatatips=" {Isshowalltrip} > <mx:seriesFilters> <mx:Array/> </mx:seriesFilters> <mx:horizontalAxis> <mx:categoryaxis dataprovider= "{expenses}" categoryfield= "label"/> &LT;/MX: horizontalaxis> <mx:series> <mx:columnseries showdataeffect= "Slidein" hidedataeffect= "Slideout" xField= "Label" yfield= "value" itemrenderer= "Drawhelper.histogramskin"/> </mx:series> </mx:ColumnChart> < Mx:label id= "xmsg" text= "{Xlabel}" fontsize= "+" width= "95%" textalign= "center" letterspacing= "1.5" > </mx:label > <mx:legend id= "lenged" x= "{parent.width-lenged.width-50}" y= "5" visible= "{(Lengvalue! =")} "> <mx:legen Ditem label= "{lengvalue}" stylename= "LegendItem"/> </mx:Legend> </mx:panel>  
5. Incoming data, binding component complete chart

<?xml version= "1.0" encoding= "Utf-8"?> <mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" width= " "Height=" "layout=" absolute "creationcomplete=" init () "xmlns:chart=" component.chart.* "> <mx:Style>/ * CSS File */application {backgroundcolor: #eef1f4;} Panel {borderstyle:solid; bordercolor: #dbe2e8; borderthickness:2; roundedbottomcorners:false; cornerradius:1; header height:27; backgroundalpha:1; Dropshadowenabled:true; Shadowdistance:1; Shadowdirection:center; Titlestylename: "Mypaneltitle"; }. mypaneltitle {letterspacing:1; textalign:center; fontsize:14;}. legenditem {fontsize:14; color: #577ba1; fontFamil y:arial; Fill: #577ba1; Fontweight:normal; }. legenditemarea {fontsize:14; fontfamily:arial;} ProgressBar {bordercolor: #cccccc; Barcolor: #8ec0e2; trackcolors: #eae8e8, #efeeec; color: #000000; paddingleft:6; padd Ingright:5; textindent:0; Letterspacing:1; trackheight:20; Verticalgap:5; fontfamily:arial; Fontsize:10; FontweiGht:bold; } </mx:Style> <mx:Script> <!--[cdata[import mx.collections.ArrayCollection; function init (): void { Boundchart ({data:[25,36,77,65,25,35],date:[2003,2004,2005,2006,2007,2008],date_format: "M.D", Title: "Custom Legend Style", Xtitle: "Programmaticskin Demo"}, "statistical legend"); }/* CData: Picture data * Cleng: Footer * Showalltrip: Show All data markers */function Boundchart (cdata:object,cleng:string,showalltrip:bool Ean=false): void {var o:* = CData, var datacollection:arraycollection = getarraycollection (o.date,o.data); Chart1.init ( Datacollection,cleng,o.title,o.xtitle,showalltrip); Chart2.init (Datacollection,cleng,o.title,o.xtitle,showalltrip); } Public Function Getarraycollection (arrlabels:array,arrvalues:array): arraycollection {var result:arraycollection = Null var length:int = arrlabels.length; if (arrlabels! = NULL && arrvalues! = null && length== arrvalues.length) {result = new arraycollection (); for (Var i:int=0;i<length;i++) {Result.additem ({label:arrlabels[i], value:number (aRrvalues[i]); }} return result; }]]--> </mx:Script> <mx:HBox> <mx:panel title= "cylinder" width= "395" height= "+" > <chart: Clumnchart id= "Chart1" > </chart:ClumnChart> </mx:Panel> <mx:panel title= "cubic chart" width= "395" height= " "> <chart:solidchart id=" chart2 "> </chart:solidChart> </mx:Panel> </mx:HBox> </mx: Application>

     The end of this article , I hope to help you!