在Flex Chaet 中绘制3D图表
前一阵在论坛上看到一个兄弟,想在Flex Chart中为图例设置3D效果,近几天查找了些资料,动手做了个DEMO供大家参考!
DEMO演示地址http://xingjunli.webs.com/flash/flexChartDemo.swf,先来个图片看看最终效果:
相关知识点
1、图表使用的我就不多做介绍了,网上也很多官方也有不错的教程(参考:Skinning ChartItem objects );
2、要自定义图表Series,我们要做的就是重写ProgrammaticSkin基类并实现IDataRenderer接口方法中的updateDisplayList方法,在Series中应用我们自定义的外观类“drawhelper.histogramSkin”就好了如:
<mx:ColumnSeries showDataEffect="slideIn" hideDataEffect="slideOut" xField="label" yField="value" itemRenderer="drawhelper.histogramSkin" />
3、我们这里使用Graphic在2D场景中绘制(3D)立方体的方式绘制Series,先理解应用3D坐标(在Series中绘制是从下向上绘制的所你看到的绘制过程中坐标系刚好是倒转过来的)如图:
实现过程及代码:
1、自定义立方图外观类:
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,0x3698ff,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 function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
this.graphics.clear();
var points:Array = getPoints
相关文档:
Flex中通过继承可以为新组件增加新的功能,如通过注入方法,改变背景色,改变位置和高度等。这里主要掌握原组件的一些特性,属性和方法,以便根据需要的功能加以覆写(也可以自己扩展),达到自己想要的效果。下面是一个简单的例子
1、新建MyDataGrid.as,继承DataGrid,覆写drawRowBackground方法,注入rowColorFunction方 ......
CategoryAxis有一个叫做labelFunction的属性,这个属性的定义:指定一个函数,用于定义为CategoryAxis的dataProvider中的各个项目生成的标签。
所以修改的原理:可以利用labelFunction得到每个Label,然后再对其进行修改。
片段代码:
<mx:horizontalAxis>
<mx:CategoryAxis id="ca"
&nbs ......
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()"
backgroundColor="#FFFFFF" width="350" height="125"
layout="absolute">
<!- ......
Adobe flex到底是做什么的,我在这里就不进行阐述了。主要是写下:flex插件集成到MyEclipse/Eclipse中的方法和 flex+java项目的部署过程
插件安装过程:
1.安装Eclipse或者MyEclipse;
2.安装FlexBuilder3 beta2插件版 -- FB3_WWEJ_Plugin.exe;
a.选择FlexBuilder3 的安装路径,可以任意选择,然后点 ......
上次听朋友提起现在再用Flex做项目,闲暇之余在自己的电脑上配置了Flex + myeclipse的开发环境。虽然开发环境搭建花了不少的时间,也遇到了不少问题。再解决这些问题的时候,也找了不少的资料,学到了不少东西。呵呵
继续研究学习................... ......