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);
				}				
			}
		}
		
	}
}