flex3d柱状图

    这几天要做flex chart，看她们做的3d图很是漂亮，自己也做了个简单3d的拼图~

简单介绍下它的画法：首先确定一个起始点，然后开始 画柱体的上面部分，再画画柱体的前面，侧面，

 当然了，画面的顺序你自己可以定，先画那个面都可以。

先放个效果图出来看看：

 

代码如下：首先是自定义的as组件（这里主要贴画法的部分）:

// 画柱体的上面部分
			matrix.createGradientBox(wi, xx, (270/180)*Math.PI, ox, oy);
			g.beginGradientFill("linear",colors,alphas,ratios,matrix);
			graphics.moveTo(ox,oy); 
		    graphics.lineTo(ox+wi,oy);
		    graphics.lineTo(ox+wi-xx,oy+xx);
		    graphics.lineTo(ox-xx,oy+xx);
		    graphics.endFill();
	      // 画柱体的前面，
		 	colors = [lighter,fillColor];
			alphas = [1,1];
			ratios = [0,127];
			matrix.createGradientBox(wi, he, Math.PI/2, ox-xx, oy+xx);
			g.beginGradientFill("linear",colors,alphas,ratios,matrix);
		    g.drawRect(ox-xx,oy+xx,wi,he);
		    g.endFill();
		   //画右侧面
		   colors = [fillColor,lighter];
			alphas = [0.7,0.7];
			ratios = [0,255];
		    matrix.createGradientBox(xx, he+xx, (270/180)*Math.PI, ox+wi-xx, oy+xx);
			g.beginGradientFill("linear",colors,alphas,ratios,matrix);
		    g.moveTo(ox+wi-xx,oy+xx);
		    g.lineTo(ox+wi,oy);
		    g.lineTo(ox+wi,oy+he-xx);
		    g.lineTo(ox+wi-xx,oy+he+xx);
		    g.endFill();

说明一下， g.beginGradientFill("linear",colors,alphas,ratios,matrix);是线性变化填充，g.beginFill()代替

 

下面是mxml页面代码（主要）：

<mx:Panel id="panel"   verticalCenter="true" horizontalAlign="true" title="自定义3d柱状图"
		 width="80%" height="90%" alpha="1"  paddingBottom="0" 
		 paddingLeft="0"  paddingTop="0" paddingRight="0">
		
	<mx:ColumnChart id="cs" width="70%" height="80%">
	<mx:horizontalAxis>
		<mx:CategoryAxis  id="haxis" categoryField="@name"/>
	</mx:horizontalAxis>
		<mx:series>
			<mx:ColumnSeries maxWidth="20" yField="undo"  maxColumnWidth="25" displayName="@name"
								>
								<mx:itemRenderer>
									<mx:Component>
									<local:RollOverBoxItemRenderer color="#8888E0" downColor="#8888E0" overColor="#8888E0"/>
									</mx:Component>
								</mx:itemRenderer


>
							</mx:ColumnSeries>
		</mx:series>
	</mx:ColumnChart>

  注意：红色的部分

源文件如下：

 

评论

5 楼 tony0101 2010-01-25  

还有个问题请教下楼主~~当柱体值为0的时候显示好像也有问题哈

4 楼 tony0101 2010-01-25  

请问下楼主，该3d柱状图的底面阴影怎么做呢？

3 楼 human_zx 2009-05-31  

不落天空 写道

qs.utils.ColorUtils这个引用报错了，请问去哪里下载？还是怎么回事？谢谢

忘把哪个抱放进去了~其实这个你可以不用的，他只是对颜色进行了变化而已~

2 楼 不落天空 2009-04-30  

qs.utils.ColorUtils这个引用报错了，请问去哪里下载？还是怎么回事？谢谢

1 楼 human_zx 2008-11-29  

晕，怎么图片不显示了~看来只能到周一在弄一遍了~