3Dchart理解 - 走看看

zoukankan html css js c++ java

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>

查看全文

相关阅读:
SQL 中 Left Join 转为 Inner Join 的实际应用
 结合 Mybatis，探讨 Oracle 中 in 与 not in 的陷阱
 一个“保存”按钮同时存在“增删改”三种操作，该如何去实现？
边边角角
 NIPS2017-The neural hawks process
第一届山东省ACM——Phone Number（java）
第一届山东省ACM——Balloons（java）
java 解 poj 1000
poj Flip Game 1753 (枚举)
ACM交流赛感悟

原文地址：https://www.cnblogs.com/wshsdlau/p/3489104.html