在flex chart 中绘制3d图表

《在flex chart 中绘制3d图表》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、在FlexChart中绘制3D图表在FlexChart中绘制3D图表前一阵在论坛上看到一个兄弟，想在FlexChart中为图例设置3D效果,近几天查找了些资料，动手做了个DEMO供大家参考!DEMO演示地址http://xingjunli.webs.com/flash/flexChartDemo.swf,先来个图片看看最终效果:相关知识点1、图表使用的我就不多做介绍了，网上也很多官方也有不错的教程(参考:SkinningChartItemobjects);2、要自定义图表Series,我们要做的就是重写ProgrammaticSkin基类并实现IDataRenderer接口方法中

2、的updateDisplayList方法,在Series中应用我们自定义的外观类“drawhelper.histogramSkin”就好了如:viewplaincopytoclipboardprint?

3、ideOut"xField="label"yField="value"itemRenderer="drawhelper.histogramSkin"/>3、我们这里使用Graphic在2D场景中绘制（3D）立方体的方式绘制Series，先理解应用3D坐标(在Series中绘制是从下向上绘制的所你看到的绘制过程中坐标系刚好是倒转过来的)如图:实现过程及代码:1、自定义立方图外观类：viewplaincopytoclipboardprint?packagedrawhelper{importflash.geom.Point;importmx.charts.series.items.Co

4、lumnSeriesItem;importmx.core.IDataRenderer;importmx.skins.ProgrammaticSkin;publicclasssolidSkinextendsProgrammaticSkinimplementsIDataRenderer{privatevarcolors:Array=[0x60cb00,0x6a7a88,0x3698ff,0x66a800,0xff6600,0x655fc8,0xd2691e];privatevar_chartItem:ColumnSeriesItem;publicfunctionsolidSkin()

5、{super();}publicfunctiongetdata():Object{returnObject(_chartItem);}publicfunctionsetdata(value:Object):void{_chartItem=valueasColumnSeriesItem;invalidateDisplayList();}overrideprotectedfunctionupdateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{super.updateDisplayList(unscaledW

6、idth,unscaledHeight);this.graphics.clear();varpoints: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();}//根据长宽获取3D坐标信息

7、functiongetPoints(w:Number,h:Number):Array{varpoints:Array=newArray(8);points[0]=newPoint(0,h);points[1]=newPoint(w,h);points[2]=newPoint(w,0);points[3]=newPoint(0,0);points[4]=newPoint(0+w/2.0,h+w/2.0);points[5]=newPoint(w+w/2.0,h+w/2.0);poi