在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
相关文档:
<?xml version="1.0"?>
<!-- charts/PredefinedAxisStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<!--[CDATA[
//导入相关包
import mx.collections.ArrayCollection;
import mx.charts.*;
import mx.charts.ser ......
犯了一个极低的错误,这个原因是自己造成的,是自己把
改为本地自己即可,
查了些英文网站的解决方案,说是什么系统升级,诺顿杀毒软件问题,都不是自己要的答案,是自己以前不小心改了,后来无论怎么卸载、升级、重装flash插件都一个样
http://hi.baidu.com/phperbo/blog/item/bf77fefb29a73b1e6d22ebe4.html
老是遇见 ......
Flex中Image加载图片出错时显示默认图片的方法主要有以下几种:
方法一:利用 brokenImageSkin 风格显示一个默认的图,只需设置CSS就行了,如下:
<mx:Style>
Image {
brokenImageSkin: Embed("assets/404.jpg");
}
</m ......
官网信息:(API:http://flexlib.googlecode.com/svn/trunk/docs/index.html)
HowToContribute
How you can contribute code to FlexLib
IntroductionLicenseBefore you submit codeFlexBuilderProject page to learn how to check out the project into Flex Builder. Read HowToBuild to learn how to compile ......
<mx:TextInput id="userName" maxChars="4" restrict="a-zA-Z" />
restrict属性确实可以输入正则表达式,进行输入的验证。
但是在程序执行的时候如果为userName.text = "999"还是可以成功的。
待续。。。。学习中。。。 ......