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引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...

随机推荐

每年支付 m 次的年金
每年支付 m 次的年金 n 表示年数.m 表示每年的付款次数.i 表示年实际利率. 一.期末付年金(annuity-immediate payable mthly): 每年支付m次, 每次的付款为1/ ...
【Azure IoT DevKit】实验终于做完了
大家好,我是MSP李桑榆今天终于把几个Azure IoT DevKit的小实验的视频给做完了. 不敢说什么指导,只是给大家一个参考.因为Devkit不需要你写一行代码,只需要你按着步骤来,并没有什么 ...
mysql_fetch_row，mysql_fetch_array，mysql_fetch_object，mysql_fetch_assoc
php从mysql中访问数据库并取得数据,取得结果的过程中用到好几个类似的方法,区别及用法值得区分一下,看下面的代码代码如下: <?php $link=mysql_connect('local ...
UML设计--人月神教
任务分配用例图类图活动图状态图使用工具所有图都是用VISO编辑出来的,因为VISO是比较经典工具,也是学校电脑自带的.....
day13 多线程建立方法
#01创建多线程继承Thread类覆盖run方法:run方法里面运行要执行的代码创建对象调用start方法,start方法会开启线程,然后调用run方法获取线程名字: ...
Java基础知识强化之集合框架笔记77：ConcurrentHashMap之 ConcurrentHashMap的基本操作
1. ConcurrentHashMap的初始化: 下面我们来结合源代码来具体分析一下ConcurrentHashMap的实现,先看下初始化方法: public ConcurrentHashMap(i ...
报错 Filtered offsite request
用scrapy框架迭代爬取时报错 scrapy日志: 在 setting.py 文件中设置日志记录等级 LOG_LEVEL= 'DEBUG' LOG_FILE ='log.txt' 观察 scr ...
BZOJ1972:[SDOI2010]猪国杀(模拟)
Description 太长就不贴过来了 Solution 这个题是真的不难写……唯一的难度就在于理解题意上面……感觉这就是个阅读理解题啊…… 而且你三国杀玩的越多可能就越难写因为你无法理解那些猪的思 ...
Java50道经典习题-程序21 求阶乘
题目:求1+2!+3!+...+20!的和分析:使用递归求解 0的阶乘和1的阶乘都为1 public class Prog21{ public static void main(String[] ar ...
7、Dubbo-配置（2）
重试次数通常配合timeout超时设置进行配置 <dubbo:reference "> </dubbo:reference> <dubbo:service i ...

3Dchart理解

3Dchart理解的更多相关文章

随机推荐

热门专题