在Flex Chart 中绘制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(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、自定义圆柱图外观类:

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、实现立方图组件

<?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、实现柱状图组件

<?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、传入数据，绑定组件完成图表

<?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>

本篇结束，希望对你有帮助!

在Flex Chart 中绘制3D图表相关推荐

大数据可视化坐标轴的定制与绘制3D图表及统计地图
一.坐标轴的定制 1.概述: 坐标轴及其组成部分对应着matplotlib中一些类的对象︰坐标轴是axis.Axis类的对象,x轴是axis.Xaxis类的对象,y轴是axis.Yaxis类的对象;轴 ...
第七章、绘制3D图表和统计地图
7.1.使用mtplot3d绘制3D图表 7.1.1.mplot3d概述 mplot3d是matplotlib中专门绘制3D图表的工具包,它主要包含一个继承自Axes的子类Axes3D,使用Axes3 ...
python数据可视化第七节(绘制3D图表和统计地图)
7.1 使用mplot3绘制3D图表 7.1.1 mplot3D概述 mplot3d 是 matplotlib中专门经制 3D图表的工具包,它主要包含一个继承自 Axes 的子类Axes3D,使用 A ...
python大数据可视化坐标轴的定制与绘制3D图表及统计地图
一.坐标轴的定制 1.概述: 坐标轴及其组成部分对应着matplotlib中一些类的对象︰坐标轴是axis.Axis类的对象,x轴是axis.Xaxis类的对象,y轴是axis.Yaxis类的对象;轴 ...
数据可视化——绘制3D图表和绘制地图
一.使用mplot3d绘制3D图表 1.1.mplot3d概述 matplotlib不仅专注于二维图表的绘制,也具有绘制3D图表.统计地图的功能,并将这些功能分别封装到工具包mpl_toolkits. ...
python绘制3D图表
pyecharts绘制3D图表参数配置和说明 Grid3DOpts.Axis3DOpts为3D图标需要配置项 Grid3DOpts:三位坐标系配置项 class pyecharts.options. ...
【Python】利用Python绘制3D图表
代码 ''' Author: CloudSir Date: 2021-07-28 10:57:47 LastEditTime: 2021-08-04 17:33:07 LastEditors: Clo ...
第七章绘制3D图表和统计地图
第七章绘制3D图表和统计地图这节课主要学习了如何使用mplot3d工具包绘制3D图表,然后介绍了使用anima tion模块制作动画,最后学习了使用basemap工具包绘制统计地图等. 接下来是课 ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...

在Flex Chart 中绘制3D图表

在Flex Chart 中绘制3D图表相关推荐

最新文章

热门文章