3Dchart理解

想在Flex Chart中为图例设置3D效果,近几天查找了些资料，动手做了个DEMO供大家参考!
DEMO演示地址http://xingjunli.webs.com/flash/flexChartDemo.swf,先来个图片看看最终效果:

相关知识点
1、图表使用的我就不多做介绍了，网上也很多官方也有不错的教程(参考:Skinning ChartItem objects );
2、要自定义图表Series,我们要做的就是重写ProgrammaticSkin基类并实现IDataRenderer接口方法中的updateDisplayList方法,在Series中应用我们自定义的外观类“drawhelper.histogramSkin”就好了如:

[xhtml] view plaincopyprint?
<mx:ColumnSeries showDataEffect="slideIn" hideDataEffect="slideOut" xField="label" yField="value" itemRenderer="drawhelper.histogramSkin" />
<mx:ColumnSeries showDataEffect="slideIn" hideDataEffect="slideOut" xField="label" yField="value" itemRenderer="drawhelper.histogramSkin" />

3、我们这里使用Graphic在2D场景中绘制（3D）立方体的方式绘制Series，先理解应用3D坐标(在Series中绘制是从下向上绘制的所你看到的绘制过程中坐标系刚好是倒转过来的)如图:

    实现过程及代码:
    1、自定义立方图外观类：

[xhtml] view plaincopyprint?
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(unscaledWidth*0.65,unscaledHeight);
            drawFill(points[4],points[7],points[6],points[5]);
            drawFill(points[6],points[2],points[3],points[7]);
            drawFill(points[7],points[4],points[0],points[3]);
            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(w+w/2.0,h+w/2.0);
            points[6] = new Point(w+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,0x7DBFC6,0.8);
                beginFill(colors[(_chartItem == null)?0:_chartItem.index],0.95);
                moveTo(args[0].x,args[0].y);
                for(var i=1;i<args.length;i++)
                {
                    lineTo(args[i].x,args[i].y);
                }
            }
        }

    }
}
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(unscaledWidth*0.65,unscaledHeight);
   drawFill(points[4],points[7],points[6],points[5]);
   drawFill(points[6],points[2],points[3],points[7]);
   drawFill(points[7],points[4],points[0],points[3]);
   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(w+w/2.0,h+w/2.0);
   points[6] = new Point(w+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,0x7DBFC6,0.8);
    beginFill(colors[(_chartItem == null)?0:_chartItem.index],0.95);
    moveTo(args[0].x,args[0].y);
    for(var i=1;i<args.length;i++)
    {
     lineTo(args[i].x,args[i].y);
    }
   }
  }

}
}
    2、自定义圆柱图外观类:

[c-sharp] view plaincopyprint?
package drawhelper
{
    import flash.display.Graphics;
    import flash.display.GradientType;
    import mx.charts.series.items.ColumnSeriesItem;
    import mx.core.IDataRenderer;
    import mx.skins.ProgrammaticSkin;

    public class histogramSkin extends ProgrammaticSkin implements IDataRenderer
    {
        private var colors:Array = [0x60cb00,0x6a7a88,0x3698ff,0x66a800,0xff6600,0x655fc8,0xd2691e];
        private var _chartItem:ColumnSeriesItem;

        public function histogramSkin(){}
        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);
            var g:Graphics = graphics;
            g.clear();
            g.beginFill(colors[(_chartItem == null)?0:_chartItem.index]);
            g.drawRect(0,unscaledWidth * 0.125,unscaledWidth,unscaledHeight);
            g.lineStyle(1,0xffffff,0.25);
            g.beginFill(colors[(_chartItem == null)?0:_chartItem.index]);
            g.drawEllipse(0,0,unscaledWidth,unscaledWidth * 0.25);
            g.endFill();
        }

    }
}
package drawhelper
{
import flash.display.Graphics;
import flash.display.GradientType;
import mx.charts.series.items.ColumnSeriesItem;
import mx.core.IDataRenderer;
import mx.skins.ProgrammaticSkin;

public class histogramSkin extends ProgrammaticSkin implements IDataRenderer
{
  private var colors:Array = [0x60cb00,0x6a7a88,0x3698ff,0x66a800,0xff6600,0x655fc8,0xd2691e];
  private var _chartItem:ColumnSeriesItem;

  public function histogramSkin(){}
  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);
   var g:Graphics = graphics;
   g.clear();
   g.beginFill(colors[(_chartItem == null)?0:_chartItem.index]);
   g.drawRect(0,unscaledWidth * 0.125,unscaledWidth,unscaledHeight);
   g.lineStyle(1,0xffffff,0.25);
   g.beginFill(colors[(_chartItem == null)?0:_chartItem.index]);
   g.drawEllipse(0,0,unscaledWidth,unscaledWidth * 0.25);
   g.endFill();
  }

}
}
    3、实现立方图组件

[xhtml] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel title="{Title}" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Script>
    
</mx:Script>
    <mx:SeriesSlide id="slideIn" duration="600" direction="up"/>
    <mx:SeriesSlide id="slideOut" duration="200" direction="down"/>
     <mx:ColumnChart horizontalCenter="true" fontSize="13.5" id="myChart" dataProvider="{expenses}"
        showDataTips="{!isShowAllTrip}" textAlign="center" width="95%" height="100%" showAllDataTips="{isShowAllTrip}">
        <mx:seriesFilters>
           <mx:Array/>
        </mx:seriesFilters>
        <mx:horizontalAxis>
           <mx:CategoryAxis dataProvider="{expenses}" categoryField="label" />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries showDataEffect="slideIn" hideDataEffect="slideOut" xField="label" yField="value" itemRenderer="drawhelper.solidSkin" />
        </mx:series>
     </mx:ColumnChart>
       <mx:Label id="xMsg" text="{xLabel}" fontSize="14" width="95%" textAlign="center" letterSpacing="1.5">
     </mx:Label>
     <mx:Legend id="lenged" x="{parent.width - lenged.width - 50}" y="5" visible="{(lengValue != '')}">
        <mx:LegendItem label="{lengValue}" styleName="legendItem" />
     </mx:Legend>
</mx:Panel>
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel title="{Title}" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>

</mx:Script>
<mx:SeriesSlide id="slideIn" duration="600" direction="up"/>
    <mx:SeriesSlide id="slideOut" duration="200" direction="down"/>
<mx:ColumnChart horizontalCenter="true" fontSize="13.5" id="myChart" dataProvider="{expenses}"
     showDataTips="{!isShowAllTrip}" textAlign="center" width="95%" height="100%" showAllDataTips="{isShowAllTrip}">
        <mx:seriesFilters>
           <mx:Array/>
        </mx:seriesFilters>
        <mx:horizontalAxis>
           <mx:CategoryAxis dataProvider="{expenses}" categoryField="label" />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries showDataEffect="slideIn" hideDataEffect="slideOut" xField="label" yField="value" itemRenderer="drawhelper.solidSkin" />
        </mx:series>
     </mx:ColumnChart>
       <mx:Label id="xMsg" text="{xLabel}" fontSize="14" width="95%" textAlign="center" letterSpacing="1.5">
     </mx:Label>
<mx:Legend id="lenged" x="{parent.width - lenged.width - 50}" y="5" visible="{(lengValue != '')}">
<mx:LegendItem label="{lengValue}" styleName="legendItem" />
</mx:Legend>
</mx:Panel>

    4、实现柱状图组件

[xhtml] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel title="{Title}" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Script>
    
</mx:Script>
    <mx:SeriesSlide id="slideIn" duration="600" direction="up"/>
    <mx:SeriesSlide id="slideOut" duration="200" direction="down"/>
     <mx:ColumnChart horizontalCenter="true" fontSize="13.5" id="myChart" dataProvider="{expenses}"
        showDataTips="{!isShowAllTrip}" textAlign="center" width="95%" height="100%" showAllDataTips="{isShowAllTrip}">
        <mx:seriesFilters>
           <mx:Array/>
        </mx:seriesFilters>
        <mx:horizontalAxis>
           <mx:CategoryAxis dataProvider="{expenses}" categoryField="label" />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries showDataEffect="slideIn" hideDataEffect="slideOut" xField="label" yField="value" itemRenderer="drawhelper.histogramSkin" />
        </mx:series>
     </mx:ColumnChart>
       <mx:Label id="xMsg" text="{xLabel}" fontSize="14" width="95%" textAlign="center" letterSpacing="1.5">
     </mx:Label>
     <mx:Legend id="lenged" x="{parent.width - lenged.width - 50}" y="5" visible="{(lengValue != '')}">
        <mx:LegendItem label="{lengValue}" styleName="legendItem" />
     </mx:Legend>
</mx:Panel>
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel title="{Title}" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>

</mx:Script>
<mx:SeriesSlide id="slideIn" duration="600" direction="up"/>
    <mx:SeriesSlide id="slideOut" duration="200" direction="down"/>
<mx:ColumnChart horizontalCenter="true" fontSize="13.5" id="myChart" dataProvider="{expenses}"
     showDataTips="{!isShowAllTrip}" textAlign="center" width="95%" height="100%" showAllDataTips="{isShowAllTrip}">
        <mx:seriesFilters>
           <mx:Array/>
        </mx:seriesFilters>
        <mx:horizontalAxis>
           <mx:CategoryAxis dataProvider="{expenses}" categoryField="label" />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries showDataEffect="slideIn" hideDataEffect="slideOut" xField="label" yField="value" itemRenderer="drawhelper.histogramSkin" />
        </mx:series>
     </mx:ColumnChart>
       <mx:Label id="xMsg" text="{xLabel}" fontSize="14" width="95%" textAlign="center" letterSpacing="1.5">
     </mx:Label>
<mx:Legend id="lenged" x="{parent.width - lenged.width - 50}" y="5" visible="{(lengValue != '')}">
<mx:LegendItem label="{lengValue}" styleName="legendItem" />
</mx:Legend>
</mx:Panel>

    5、传入数据，绑定组件完成图表

[xhtml] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="800" height="300" layout="absolute" creationComplete="init()"
    xmlns:chart="component.chart.*">
    <mx:Style>
        /* CSS file */
Application
{
    backgroundColor:#eef1f4;
}

Panel
{
       borderStyle: solid;
       borderColor: #dbe2e8;
       borderThickness: 2;
       roundedBottomCorners: false;
       cornerRadius: 1;
       headerHeight: 27;
       backgroundAlpha: 1;
       dropShadowEnabled: true;
       shadowDistance: 1;
       shadowDirection: center;
       titleStyleName: "mypanelTitle";
}

.mypanelTitle
{
       letterSpacing: 1;
       textAlign: center;
       fontSize: 14;
}
.legendItem
{
     fontSize:14;
     color:#577ba1;
     fontFamily: Arial;
     fill:#577ba1;
     fontWeight: normal;
}
.legendItemArea
{
     fontSize:14;
     fontFamily: Arial;
}
ProgressBar {
   borderColor: #cccccc;
   barColor: #8ec0e2;
   trackColors: #eae8e8, #efeeec;
   color: #000000;
   paddingLeft: 6;
   paddingRight: 5;
   textIndent: 0;
   letterSpacing: 1;
   trackHeight: 20;
   verticalGap: 5;
   fontFamily: Arial;
   fontSize: 10;
   fontWeight: bold;
}

    </mx:Style>
<mx:Script>
    
</mx:Script>
    <mx:HBox>
        <mx:Panel title="圆柱图" width="395" height="300">
            <chart:ClumnChart id="chart1">

            </chart:ClumnChart>
        </mx:Panel>
        <mx:Panel title="立方图" width="395" height="300">
            <chart:solidChart id="chart2">

            </chart:solidChart>
        </mx:Panel>
    </mx:HBox>
</mx:Application>

3Dchart理解的更多相关文章

理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
彻底理解AC多模式匹配算法
(本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...
理解加密算法（三）——创建CA机构，签发证书并开始TLS通信
接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...
node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀修改之后会弹出这个,点击"是" 3.运行test.js 源文件使用node.js运行之后的. 如果该路径下没有该 ...
如何一步一步用DDD设计一个电商网站（一）—— 先理解核心概念
一.前言 DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...
学习AOP之透过Spring的Ioc理解Advisor
花了几天时间来学习Spring,突然明白一个问题,就是看书不能让人理解Spring,一方面要结合使用场景,另一方面要阅读源代码,这种方式理解起来事半功倍.那看书有什么用呢?主要还是扩展视野,毕竟书是别 ...
ThreadLocal简单理解
在java开源项目的代码中看到一个类里ThreadLocal的属性: private static ThreadLocal<Boolean> clientMode = new Thread ...
JS核心系列：理解 new 的运行机制
和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...
深入理解JS 执行细节
javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...

随机推荐

Eclipse+Maven 项目创建
★:jar包下载不了的话可能是镜像里没有这个版本,换个低版本的就行 ★:eclipse工程validating很慢,可以先关掉验证(一般对项目没什么影响) ★:eclipse工程pom.xml文件报错 ...
SQL server reporting service - rsReportServerNotActivated error solution
描述: 今天在原有的数据库版本上增加了Reporting Service 功能,数据库完成安装后,没有发现ReportServer和 ReportServerTemp 两个数据库于是从其他服务器上, ...
BZOJ1012:[JSOI2008]最大数maxnumber(线段树)
Description 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L 个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. ...
P2059 [JLOI2013]卡牌游戏
题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先把 ...
docker-6-DockerFile解析
1.是什么 Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本. 构建三步骤: 1.编写Dockerfile文件 2.docker build 3.docker ...
多条件查询接收很多参数的时候要用Map接收。
好处是,以后修改查询条件的时候不用从接口,到实现类,到controller的参数都要修改, 假如加一个查询条件,只需要前端多传一个参数值,都用map<>键值对接收,只需要在 service ...
mixup: Beyond Empirical Risk Minimization
这篇论文MIT和FAIR的工作,主要是提出了一种mixup的方式.(感觉是一种产生hard sample的方法,是一种新的.更有效的数据增强.) 1 Introduction 大网络需要大数据,目前C ...
CSU 1598 最长公共前缀（简单KMP或者暴力）
Submit Page Summary Time Limit: 1 Sec Memory Limit: 128 Mb Submitted: 226 Solved: ...
Java 今天是否为节假日
/** * 测试今天是不是节假日 * 创建日期:2017年8月30日上午10:00:41 * 修改日期: * 作者:zhangsp * TODO * return */ public void wor ...
Win 10安装11g 客户端条件检查失败，INS-30131 无法从节点 "desktop-njm3a7m" 检索 exectask 的版本
Win 10安装11g 客户端条件检查失败,[INS-30131] 执行安装程序验证所需的初始设置失败.无法从节点 "desktop-njm3a7m" 检索 exectask 的版 ...

3Dchart理解

3Dchart理解的更多相关文章

随机推荐

热门专题