arcgis api for flex之专题图制作（饼状图，柱状图等）

最近公司给我一个任务，就是利用arcgis api for flex实现在地图上点（业务数据）直接显示饼状图以及柱状图的专题图制作，而不是通过点击点显示气泡窗口的形式来实现，这个公司已经实现了。
经过一段时间的摸索，参照一些网上资源，目前大概弄出来了，里面还有待完善的地方的。
效果图如下：

  （1）Chart.mxml，主要的展示地图专题图效果的页面 

  xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 xmlns:esri="http://www.esri.com/2008/ags"
 pageTitle="Charts in infowindow" xmlns:symbols="com.esri.ags.symbols.*">
 
 .chartStyle
 {
 borderThickness: 0;
 infoPlacement: center;
 backgroundAlpha: 0;
 infoOffsetX: 0;
 infoOffsetY: 0;
 paddingLeft: 0;
 paddingRight: 0;
 paddingTop: 0;
 paddingBottom: 0;
 }
 
 
  import com.esri.ags.geometry.MapPoint;
 import com.esri.ags.FeatureSet;
 import com.esri.ags.Graphic;
 import com.esri.ags.events.MapEvent;

import
 com.esri.ags.tasks.QueryTask;
import
 com.esri.ags.tasks.supportClasses.Query;
import
 mx.collections.ArrayCollection;
import
 mx.controls.Alert;
import
 mx.events.FlexEvent;
import
 mx.rpc.AsyncResponder;
protected
 function
 myMap_initializeHandler(event:MapEvent):
 void
{
var
 pie:MapPoint =
 new
 MapPoint(
 113.55185
 ,
 22.82289
 );
var
 column:MapPoint =
 new
 MapPoint(
 113.59637985600011
 ,
 22.758225999000047
 );
var
 bar:MapPoint =
 new
 MapPoint(
 113.52757794
 ,
 22.84012158
 );
var
 gpie:Graphic =
 new
 Graphic(pie);
var
 gcolumn:Graphic =
 new
 Graphic(column);
var
 gbar:Graphic =
 new
 Graphic(bar);
//g.attributes = new Object();
var
 thematic:ArrayCollection =
 new
 ArrayCollection(
[
{ Name:
 "危化品1"
 , Rate:
 25
 },
{ Name:
 "危化品2"
 , Rate:
 15
 },
{ Name:
 "危化品3"
 , Rate:
 23
 }
]);
//g.attributes.thematic = thematic;
gpie.attributes = thematic;
gcolumn.attributes = thematic;
gbar.attributes = thematic;
this
 .myGraphicsLayerpie.add(gpie);
this
 .myGraphicsLayercolumn.add(gcolumn);
this
 .myGraphicsLayerbar.add(gbar);
}
]]>


 "infoSymbolpie"
 infoRenderer=
 "InfoRendererPieChart"
 containerStyleName=
 "chartStyle"



 "infoSymbolcolumn"
 infoRenderer=
 "InfoRendererColumnChart"
 containerStyleName=
 "chartStyle"



 "infoSymbolbar"
 infoRenderer=
 "InfoRendererBarChart"
 containerStyleName=
 "chartStylee"




 "myMap"
 load=
 "myMap_initializeHandler(event)"



 "113.284171273203"
 ymin=
 "22.6348519473499"
 xmax=
 "113.774816132605"
 ymax=
 "22.9103935318251"



 "4326"
 />



 "http://localhost:6080/ArcGIS/rest/services/ns_new/MapServer"
 />
 "myGraphicsLayercolumn"
 symbol=
 "{infoSymbolcolumn}"



 "myGraphicsLayerpie"
 symbol=
 "{infoSymbolpie}"



 "myGraphicsLayerbar"
 symbol=
 "{infoSymbolbar}"





 

（2）InfoRendererBarChart.mxml、InfoRendererColumnChart.mxml、InfoRendererPieChart.mxml，分别是柱状图以及饼状图实现的页面

1.InfoRendererBarChart.mxml

 "1.0"
 encoding=
 "utf-8"
 ?>

 "http://ns.adobe.com/mxml/2009"
xmlns:s=
 "library://ns.adobe.com/flex/spark"
xmlns:mx=
 "library://ns.adobe.com/flex/mx"
clipAndEnableScrolling=
 "true"
creationComplete=
 "creationCompleteHandler()"
implements
"mx.core.IDataRenderer"
 width=
 "100"
 height=
 "100"




private
 var
 _data:
 Object
 ;
[Bindable]
// implement IDataRenderer
public
 function
 get
 data():
 Object
{
return
 _data;
}
public
 function
 set
 data(value:
 Object
 ):
 void
{
_data = value;
}
private
 function
 creationCompleteHandler():
 void
{
}
]]>

 "columnChart"
 width=
 "100%"
 height=
 "100%"
dataProvider=
 "{data}"
showDataTips=
 "true"



 "barSeries"
 xField=
 "Rate"
 />


 "barAxis"
 categoryField=
 "Name"
 />


 "{barAxis}"
 showLabels=
 "false"
 />



 

2.InfoRendererColumnChart.mxml　

  "1.0"
 encoding=
 "utf-8"
 ?>

 "http://ns.adobe.com/mxml/2009"
xmlns:s=
 "library://ns.adobe.com/flex/spark"
xmlns:mx=
 "library://ns.adobe.com/flex/mx"
clipAndEnableScrolling=
 "true"
creationComplete=
 "creationCompleteHandler()"
implements
"mx.core.IDataRenderer"
 width=
 "100"
 height=
 "100"




private
 var
 _data:
 Object
 ;
[Bindable]
// implement IDataRenderer
public
 function
 get
 data():
 Object
{
return
 _data;
}
public
 function
 set
 data(value:
 Object
 ):
 void
{
_data = value;
}
private
 function
 creationCompleteHandler():
 void
{
}
]]>

 "columnChart"
 width=
 "100%"
 height=
 "100%"
dataProvider=
 "{data}"
showDataTips=
 "true"



 "columnSeries"
 yField=
 "Rate"
 />


 "columnAxis"
 categoryField=
 "Name"
 />


 "{columnAxis}"
 showLabels=
 "false"
 />



 

3.InfoRendererPieChart.mxml

  "1.0"
 encoding=
 "utf-8"
 ?>

 "http://ns.adobe.com/mxml/2009"
xmlns:s=
 "library://ns.adobe.com/flex/spark"
xmlns:mx=
 "library://ns.adobe.com/flex/mx"
clipAndEnableScrolling=
 "true"
creationComplete=
 "creationCompleteHandler()"
implements
"mx.core.IDataRenderer"
 width=
 "100"
 height=
 "100"




private
 var
 _data:
 Object
 ;
[Bindable]
// implement IDataRenderer
public
 function
 get
 data():
 Object
{
return
 _data;
}
public
 function
 set
 data(value:
 Object
 ):
 void
{
_data = value;
}
private
 function
 creationCompleteHandler():
 void
{
}
]]>

 "pieChart"
width=
 "100%"
 height=
 "100%"
dataProvider=
 "{data}"
showDataTips=
 "true"



 "Rate"
labelPosition=
 "callout"
nameField=
 "Name"






 

上述的总体实现思路是这样的：核心是InfoSymbol，InfoSymbol自定义infoRenderer绑定专题图的模版，比如InfoRendererBarChart.mxml、InfoRendererColumnChart.mxml、InfoRendererPieChart.mxml；程序初始化的时候生成了一些带有统计信息的Graphic添加到地图上，这些Graphic对象的attributes属性集合来保存各个统计的对象，每个统计的对象包含两个字段：Name表示危化品名称，Rate表示占有比重，下面我们会在InfoSymbol的定义中再次看到这两个字段。当定义好这些Graphic对象以后，我们就可以把它们添加到设置了InfoSymbol符号的GraphicLayer上了。在InfoSymbol的定义中，我们可以看到，在这个InfoSymbol中添加了一个饼图组件PieChart，这个饼图的dataProvider属性绑定的是{data}，它代表的其实就是Graphic对象的attributes属性。你可以简单地这样认为：InfoSymbol中的data代表的就是其对应的Graphic对象的attributes属性。其他的柱状图也是同理的。

  既然在InfoSymbol中可以获得Graphic的属性信息，那么根据Graphic的属性信息来绘制不同的专题图就是水到渠成的事情了。

  样式代码解析：   

 .chartStyle

{
borderThickness:
 0
 ;
 /显示专题图的边框宽度/
infoPlacement: center;
 /显示专题图的位置，这里是中心/
backgroundAlpha:
 0
 ;
 /显示专题图的背景透明度，这里设置为0，是为了隐藏背景/
infoOffsetX:
 0
 ;
 /显示专题图的X偏移，设置0，不然会偏离原始点位置/
infoOffsetY:
 0
 ;
 /显示专题图的Y偏移，设置0，不然会偏离原始点位置/
paddingLeft:
 0
 ;
 /显示专题图的位置偏移，设置0，不然会偏离原始点位置/
paddingRight:
 0
 ;
 /显示专题图的位置偏移，设置0，不然会偏离原始点位置/
paddingTop:
 0
 ;
 /显示专题图的位置偏移，设置0，不然会偏离原始点位置/
paddingBottom:
 0
 ;
 /显示专题图的位置偏移，设置0，不然会偏离原始点位置/
}
 

需要完善优化之处：目前GraphicsLayer定义了三个（pie，bar，column),然后各自绑定不同的infoSymbol（pie，bar，column)。这样显的有点冗余了，其实只要定义一个GraphicsLayer，然后动态的判断绑定的是哪个infoSymbol。

GIS之家新博客系列发布更新在GIS之家网站，欢迎关注收藏：GIS之家网站
GIS之家作品：GIS之家
GIS之家交流咨询：咨询模式