Flex 三维立体柱状图
自己写了个简易的flex立状体图,效果如下:
flex:testSolidChart.mxml
<?xml version="1.0"?> <!-- Simple example to demonstrate the ColumnChart and BarChart controls. --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"> <fx:Script> <![CDATA[ import mx.charts.events.ChartItemEvent; import mx.charts.series.items.ColumnSeriesItem; import mx.collections.ArrayCollection; import mx.controls.Alert; [Bindable] private var medalsAC:ArrayCollection = new ArrayCollection( [ { Country: "USA", Gold: 35, Silver:39, Bronze: 29 }, { Country: "China", Gold: 32, Silver:17, Bronze: 14 }, { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]); protected function custTypeChart_itemClickHandler(event:ChartItemEvent):void { var psi:ColumnSeriesItem= event.hitData.chartItem as ColumnSeriesItem; var po:ColumnSeries = psi.element as ColumnSeries; Alert.show(psi.item.Gold+"--"+po.fillc); } ]]> </fx:Script> <fx:Declarations> <mx:SolidColor id="sc1" color="yellow" alpha=".8"/> <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/> <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/> <mx:SolidColorStroke id="s1" color="yellow" weight="2"/> <mx:SolidColorStroke id="s2" color="0xCCCCCC" weight="2"/> <mx:SolidColorStroke id="s3" color="0xFFCC66" weight="2"/> </fx:Declarations> <mx:Panel title="ColumnChart and BarChart Controls Example" height="100%" width="100%" layout="horizontal"> <mx:ColumnChart id="column" height="100%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}" showLabelVertically="true" itemClick="custTypeChart_itemClickHandler(event)" > <mx:horizontalAxis> <mx:CategoryAxis categoryField="Country" /> </mx:horizontalAxis> <mx:series> <local:ColumnSeries xField="Country" yField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" fillc="0x00CC66" itemRenderer="solid2Skin" /> <local:ColumnSeries xField="Country" yField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" fillc="0xaa0066" itemRenderer="solid2Skin" /> <local:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" fillc="0xDDCCAA" itemRenderer="solid2Skin" /> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{column}"/> </mx:Panel> </s:Application>
Flex:ColumnSeries.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:ColumnSeries xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ public var _fillc:uint = 0xff00ff; public function get fillc():uint { return _fillc; } public function set fillc(value:uint):void { _fillc = value; } ]]> </fx:Script> </mx:ColumnSeries>
Flex:solid2Skin.as
package { import flash.geom.Point; import mx.charts.series.items.ColumnSeriesItem; import mx.core.IDataRenderer; import mx.skins.ProgrammaticSkin; import mx.controls.Alert; public class solid2Skin extends ProgrammaticSkin implements IDataRenderer { private var colors:Array = [0x60cb00,0x6a7a88,0x3698ff,0x66a800,0xff6600,0x655fc8,0xd2691e]; private var _chartItem:ColumnSeriesItem; public function solid2Skin() { super(); } public function get data():Object { return Object(_chartItem); } public function set data(value:Object):void { _chartItem = value as ColumnSeriesItem; // Alert.show((_chartItem==null)+"");//?0:(_chartItem.element as ColumnSeries).fillc+""); invalidateDisplayList(); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth,unscaledHeight); this.graphics.clear(); var points:Array = getPoints(unscaledWidth*0.55,unscaledHeight); drawFill(points[4],points[7],points[6],points[5]); drawFill(points[7],points[6],points[2],points[3]); drawFill(points[5],points[1],points[2],points[6]); this.graphics.endFill(); } //根据长宽获取3D坐标信息 function getPoints(w:Number,h:Number):Array { var points:Array = new Array(8); points[0] = new Point(0,h); 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(0+w/2.0,h+w/2.0); points[6] = new Point(0+w/2.0,0+w/2.0); points[7] = new Point(0-w/2.0,0+w/2.0); return points; } //根据传入的坐标信息,绘制线条及填充绘制区域 function drawFill(...args):void { with(this.graphics) { lineStyle(0.5,0x000000,0.8); beginFill((_chartItem == null)?0x000000:(_chartItem.element as ColumnSeries).fillc,0.95); moveTo(args[0].x,args[0].y); for(var i=1;i<args.length;i++) { lineTo(args[i].x,args[i].y); } } } } }