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

来源：互联网发布：mysql 分表编辑：程序博客网时间：2024/06/18 06:54

一、效果展示
这里写图片描述
二、柱状图代码

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

1 0