How to use Flex to achieve Thematic Layers of Columnar.docx

How to use Flex to achieve Thematic Layers of ColumnarBy Chyq2010年12月1日 How to use Flex to achieve Thematic Layers of Columnar（如何利用Flex实现柱状专题图层）最近在项目里面需要实现这样一个功能：将从数据库查询到的统计数据用柱状图的形式在地图中展现。其实也就是在地图中绘制柱状专题图或者是直方图专题图。在这里分享一下我的实现思路和代码，希望能给有需要的朋友一点帮助。其实实现很简单，首先我们知道，每个专题图中的每个柱状图其实都是依托在一个graphic下的，也就是必须要有一个graphic作为该柱状图的承载体，而这个柱状图则是作为该graphic的symbol，只要将这个symbol赋给graphic即可。具体实现思路如下：1. 继承ColumnChart，生成一个我们需要的定制的ColumnChart。在这里我们可以设定ColumnChart的一些属性，比如ColumnChart的width、height、dataProvider,showDatatips等等，就是在这里我们完成了一个我们所需要实现的ColumnChart，跟平常的赋值给ColumnChart没什么太大的不同，但有一点需要注意，专题图中的柱状图是不能有横坐标和纵坐标的，所以也需要对此进行处理，2. 利用ClassFactory来构造我们需要的柱状图实例，并用ClassFactory的properties属性来传入我们要定制的ColumnChart的数据，也就是上面说的width、height、dataProvider,showDatatips等等。3. 然后将ClassFactory赋值给infoSymbol的infoRenderer属性4. 最后将infoSymbol赋值给graphic的symbol属性，就大功告成了。以下是我实现的代码:A在新建的as类ColumnChartFactory中，如下： package com.*.statisticanalystimport mx.charts.AxisRenderer;import mx.charts.CategoryAxis;import mx.charts.ColumnChart;import mx.charts.series.ColumnSeries;import mx.collections.ArrayCollection;public class ColumnChartFactory extends ColumnChart/* * 创建者：Chyq * 创建时间：2010-12-01 * 功能描述：设定的ColumnChart的width * 参数描述：w，设定的ColumnChart的width * */private var _width:int;public function set chartWidth(w:int):void_width=w;/* * 创建者：Chyq * 创建时间：2010-12-01 * 功能描述：设定的ColumnChart的height * 参数描述：h，设定的ColumnChart的height * */private var _height:int;public function set chartHeight(h:int):void_height=h;/* * 创建者：Chyq * 创建时间：2010-12-01 * 功能描述：设定的ColumnChart的dataProvider * 参数描述：dataPro，设定的ColumnChart的dataProvider * */private var _dataProvider:ArrayCollection;public function set chartDataProvider(dataPro:ArrayCollection):void_dataProvider=dataPro;/* * 创建者：Chyq * 创建时间：2010-12-01 * 功能描述：设定的ColumnChart的所有列的字段组成的数组 * 参数描述：columnFields，字段数组 * */private var _columnFields:Array;public function set columnFields(columnFields:Array):void_columnFields=columnFields;/* * 创建者：Chyq * 创建时间：2010-12-01 * 功能描述：设定的ColumnChart的所有列的要显示的字段名称组成的数组 * 参数描述：chartDisplayNames，字段名称组成的数组 * */private var _chartDisplayNames:Array;public function set chartDisplayNames(chartDisplayNames:Array):void_chartDisplayNames=chartDisplayNames;/* * 创建者：Chyq * 创建时间：2010-12-01 * 功能描述：设定的ColumnChart的水平轴（X轴）的数据字段，例如时间 * 参数描述：horizontalCategoryField，水平轴（X轴）的数据字段 * */private var _horizontalCategoryField:String;public function set horizontalCategoryField(horizontalCategoryField:String):void_horizontalCategoryField=horizontalCategoryField;/* * 创建者：Chyq * 创建时间：2010-12-01 * 功能描述：设置ColumnChart是否显示数据提示 * 参数描述：showtips，数据提示 * */private var _showDataTips:Boolean;public function set chartShowDataTips(showtips:Boolean):void_showDataTips = showtips;public function ColumnChartFactory()super();/setPropertites();protected override function createChildren():voidsuper.createChildren();setPropertites();private function setPropertites():voidthis.width=_width;this.height=_height;this.dataProvider=_dataProvider;this.showDataTips=_showDataTips;this.type=clustered; this.setStyle(fontFamily,Georgia); this.setStyle(horizontalCenter,0); this.selectionMode=single; this.setStyle(columnWidthRatio,0.5); this.setStyle(maxColumnWidth,20);var categoryAxis:CategoryAxis=new CategoryAxis();categoryAxis.categoryField=this._horizontalCategoryField;var hr:AxisRenderer = new AxisRenderer();hr.setStyle(minorTickPlacement,none);hr.setStyle(showLabels,false); hr.setStyle(showLine,false); /注意，在这里将showLine设置为false，也就是将水平轴（X轴）不显示 hr.setStyle(tickPlacement,none); hr.axis = categoryAxis;this.horizontalAxisRenderers=hr;this.horizontalAxis=categoryAxis;var vCategoryAxis:CategoryAxis=new CategoryAxis();var vr:AxisRenderer = new AxisRenderer();vr.setStyle(minorTickPlacement,none);vr.setStyle(showLabels,false); vr.setStyle(showLine,false); /注意，在这里将showLine设置为false，也就是将纵轴（Y轴）不显示 vr.setStyle(tickPlacement,none); vr.axis =vCategoryAxis;this.verticalAxisRenderers=vr;/this.verticalAxis=vCategoryAxis;var series:Array=new Array();for(var i:int=0;ithis._columnFields.length;i+)var columnSeries:ColumnSeries=new ColumnSeries(); columnSeries.xField=this._horizontalCategoryField;columnSeries.yField=this._columnFieldsi;columnSeries.displayName=this._chartDisplayNamesi; series.push(columnSeries);this.series=series;B在调用该as类的mxml中：private function gasRenderLayer(ac:ArrayCollection):voidif(ac=null | ac.length=0) return;var features:Array=this.polygonFeatureSet.features;var infoSymbol:InfoSymbol;var itemAc:ArrayCollection;var Fields:Array=new Array(Total1,Total2,Total3);var displayNames:Array=new Array(总排放量1,总排放量2,总排放量3);for(var i:int=0;ifeatures.length;i+)/infoSymbol=new InfoSymbol();itemAc=new ArrayCollection();var gra:Graphic=featuresi as Graphic;var extent:Extent=(gra.geometry as Polygon).extent;var mapPoint:MapPoint=extent.center;var graphic:Graphic=new Graphic();graphic.geometry=mapPoint;var attributes:Object=gra.attributes;for(var j:int=0;jac.length;j+)var polygonName:String=attributes名称;var acname:String=acjname;if(attributes名称=acjname)/itemAc=getItemDataProvider(acj,water); itemAc.addItem(acj); var infoSymbolFactory:ClassFactory=new ClassFactory(ColumnChartFactory); /就是在这里传入我们要设定的每个ColumnChart的设置数据了 infoSymbolFperties=chartWidth:60,chartHeight:50,chartDataProvider:itemAc,columnFields:Fields,horizontalCategoryField:name,chartShowDataTips:true,chartDisplayNames:displa