有关Flex在地图上添加柱状图的个人经验总结

一、效果展示

二、柱状图代码

    <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);