一、效果展示
二、柱状图代码
<fx:Declarations>
<!-- 使用infoSymbol存放组件 -->
<esri:InfoSymbol id="myInfoSymbol">
<esri:infoRenderer>
<fx:Component>
<s:DataRenderer>
<!-- 去除infoSymbol外边框,居中且透明显示 -->
<fx:Style>
.RightStyle
{
background-alpha:0;
border-alpha:0;
info-placement:center;
info-placement-mode:none;
}
</fx:Style>
<fx:Script>
<![CDATA[
import com.esri.ags.components.supportClasses.InfoWindow;
import flash.profiler.showRedrawRegions;
import mx.charts.ChartItem;
import mx.charts.series.ColumnSeries;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.graphics.IFill;
import mx.graphics.SolidColor;
//柱状图组件完成构建
protected function myColumnChart_creationCompleteHandler(event:FlexEvent):void
{
// 通过判断数据动态添加柱子
//series数据源
var serArr:Array = new Array();
var cs:ColumnSeries;
//三条柱子数据设置
var col1:String = data.COL1;
var col2:String = data.COL2;
var col3:String = data.COL3;
//判断需要显示几条柱子
if(col1!=""){
cs = new ColumnSeries();
cs.xField = "title";
cs.yField = "COL1";
//控制柱子的宽度
cs.maxColumnWidth = 6;
//柱子的显示名称
cs.displayName = data.colFieldArr[0];
//柱子填充颜色设置
cs.fillFunction = myFillFunction1;
//设置数值显示在外
cs.setStyle("labelPosition","outside");
serArr.push(cs);
}
if(col2!=""){
cs = new ColumnSeries();
cs.xField = "title";
cs.yField = "COL2";
cs.maxColumnWidth = 6;
cs.displayName = data.colFieldArr[1];
cs.fillFunction = myFillFunction2;
cs.setStyle("labelPosition","outside");
serArr.push(cs);
}
if(col3!=""){
cs = new ColumnSeries();
cs.xField = "title";
cs.yField = "COL3";
cs.maxColumnWidth = 6;
cs.displayName = data.colFieldArr[2];
cs.fillFunction = myFillFunction3;
cs.setStyle("labelPosition","outside");
serArr.push(cs);
}
//关联数据
columnChart.series = serArr;
}
//三条柱子填充颜色
public function myFillFunction1(item:ChartItem, index:Number):IFill {
return(SolidColor(data.colorArr[0]));
}
public function myFillFunction2(item:ChartItem, index:Number):IFill {
return(SolidColor(data.colorArr[1]));
}
public function myFillFunction3(item:ChartItem, index:Number):IFill {
return(SolidColor(data.colorArr[2]));
}
]]>
</fx:Script>
<!-- 柱状图组件,动态设置柱状图位置及高度 -->
<mx:ColumnChart id="columnChart" height="{data.height}" width="80"
showDataTips="true" dataProvider="{data}" fontSize="6"
color="#000000" x="-25" y="{32-(data.height)}"
creationComplete="myColumnChart_creationCompleteHandler(event)"
>
<!-- 横坐标设置 -->
<mx:horizontalAxis >
<mx:CategoryAxis categoryField="title" id="ca"/>
</mx:horizontalAxis>
<!-- 横坐标设置为不显示,一定要指定axis对应横坐标的id -->
<mx:horizontalAxisRenderers>
<mx:AxisRenderer showLine="false" alpha="0" axis="{ca}">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<!-- 去掉背景刻度条 -->
<mx:backgroundElements>
<mx:GridLines visible="false" />
</mx:backgroundElements>
<!-- 纵坐标设置 -->
<mx:verticalAxis>
<mx:LinearAxis id="vca" />
</mx:verticalAxis>
<!-- 纵坐标设置为不显示,同样注意指定axis对应纵坐标的id -->
<mx:verticalAxisRenderers>
<mx:AxisRenderer showLine="false" alpha="0" axis="{vca}">
</mx:AxisRenderer>
</mx:verticalAxisRenderers>
<!--
<mx:series >
<mx:ColumnSeries xField="title" yField="COL1" displayName="{data.colFieldArr[0]}" fill="{data.colorArr[0]}" labelPosition="outside"/>
<mx:ColumnSeries xField="title" yField="COL2" displayName="{data.colFieldArr[1]}" fill="{data.colorArr[1]}" labelPosition="outside"/>
<mx:ColumnSeries xField="title" yField="COL3" displayName="{data.colFieldArr[2]}" fill="{data.colorArr[2]}" labelPosition="outside"/>
</mx:series>
-->
</mx:ColumnChart>
</s:DataRenderer>
</fx:Component>
</esri:infoRenderer>
</esri:InfoSymbol>
</fx:Declarations>
三、调用柱状图显示在地图上
var gra:Graphic = new Graphic(mapPoint);
var z_attribs:Object = {
title:Title,
COL1:col1,COL2:col2,COL3:col3,
height:zhuHeight,
colFieldArr:colFieldArr,
colorArr:colorArr
};
gra.attributes = z_attribs;
var infosys:InfoSymbol=new InfoSymbol();
infosys.infoPlacement = "center";
infosys.containerStyleName="RightStyle";
infosys.infoRenderer = myInfoSymbol.infoRenderer;
gra.symbol = infosys;
graphicsLayer.add(gra);
map.addLayer(graphicsLayer);