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

随机推荐

ZT 感触的屌丝职场记投递人 itwriter 发布于 2013-05-27 09:21 评论(18) 有3402人阅读原文链接 [收藏] « » 　　作者@幻想哥呀幻想哥　　有一位屌丝男，从小抱着报效祖国的理想上了大学，毕业后干了 IT 行业，高中那时候看文汇报说，搞 IT 的在上
屌丝职场记投递人 itwriter 发布于 2013-05-27 09:21 评论(18) 有3402人阅读原文链接 [收藏] « » 作者@幻想哥呀幻想哥有一位屌丝男,从小抱着报效祖国的 ...
Current urgent plan(3/30)
1. resume improving 1.1 project from Udacity 1.2 project from class 1.3 find career center's help 1. ...
Pygame播放声音与音效
简单学习自小甲鱼视频教学(笔记) 实现功能: 运行后自动播放背景音乐,单击左键播放音效①,单击右键播放音效②, 空格键控制暂停背景音乐与恢复背景音乐,并且实现播放图标的切换. 代码如下: import ...
面向对象的JavaScript --- 封装
面向对象的JavaScript --- 封装封装封装的目的是将信息隐藏.一般而言,我们讨论的封装是封装数据和封装实现.真正的封装为更广义的封装,不仅包括封装数据和封装实现,还包括封装类型和封装变化 ...
程序人生：02我来告诉你，一个草根程序员如何进入BAT
本文摘自左潇龙博客,原文出处:http://www.cnblogs.com/zuoxiaolong/p/life54.html 引言首先声明,不要再问LZ谁是林萧,林萧就是某著名程序员小说的主角名字 ...
【vue】饿了么项目-页面骨架开发
1.页面骨架开发 1.1组件拆分手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没 ...
linux 下 chkconfig安装与使用详解
chkconfig 安装开始的时候因为Raspbian的原因,系统是不自带chkconfig这个命令的, root@raspberrypi:~# chkconfig-bash: chkconfig: ...
【luogu P1606 [USACO07FEB]荷叶塘Lilypad Pond】题解
题目链接:https://www.luogu.org/problemnew/show/P1606 这个题..第一问很好想,但是第二问,如果要跑最短路计数的话,零边权的花怎么办? 不如这样想,如果这个点 ...
Token生成（转载）
package main import ( "encoding/base64" "encoding/json" "log" "ne ...
关于restful开发的疑惑
if 你没有了解过restful return; 一.疑惑 restful风格开发是有争议的,restful的设计是请求“resource”,然后只能对“resource”做CRUD操作.抽象于这 ...

3Dchart理解

3Dchart理解的更多相关文章

随机推荐

热门专题