ArcGIS API for JavaScript ArcGIS API for Flex

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

最近公司给我一个任务，就是利用arcgis api for flex实现在地图上点（业务数据）直接显示饼状图以及柱状图的专题图制作，而不是通过点击点显示气泡窗口的形式来实现，这个公司已经实现了。

经过一段时间的摸索，参照一些网上资源，目前大概弄出来了，里面还有待完善的地方的。

效果图如下：

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

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               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.*">

 

    <fx:Style>

        .chartStyle

        {

            borderThickness: 0;

            infoPlacement: center;

            backgroundAlpha: 0;

            infoOffsetX: 0;

            infoOffsetY: 0;

            paddingLeft: 0;

            paddingRight: 0;

            paddingTop: 0;

            paddingBottom: 0;

        }

    </fx:Style>

     

    <fx:Script>

        <![CDATA[

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

            }

        ]]>

    </fx:Script>

     

    <fx:Declarations>

        <esri:InfoSymbol id="infoSymbolpie" infoRenderer="InfoRendererPieChart" containerStyleName="chartStyle">

        </esri:InfoSymbol>

        <esri:InfoSymbol id="infoSymbolcolumn" infoRenderer="InfoRendererColumnChart" containerStyleName="chartStyle">

        </esri:InfoSymbol>

        <esri:InfoSymbol id="infoSymbolbar" infoRenderer="InfoRendererBarChart" containerStyleName="chartStylee">

        </esri:InfoSymbol>

    </fx:Declarations>

     

    <esri:Map id="myMap" load="myMap_initializeHandler(event)">

        <esri:extent>

            <esri:Extent xmin="113.284171273203" ymin="22.6348519473499" xmax="113.774816132605" ymax="22.9103935318251">

                <esri:spatialReference>

                    <esri:SpatialReference wkid="4326"/>

                </esri:spatialReference>

            </esri:Extent>

        </esri:extent>

        <esri:ArcGISTiledMapServiceLayer url="http://localhost:6080/ArcGIS/r ... gt%3B

        <esri:GraphicsLayer id="myGraphicsLayercolumn" symbol="{infoSymbolcolumn}">

        </esri:GraphicsLayer>

        <esri:GraphicsLayer id="myGraphicsLayerpie" symbol="{infoSymbolpie}">

        </esri:GraphicsLayer>

        <esri:GraphicsLayer id="myGraphicsLayerbar" symbol="{infoSymbolbar}">

        </esri:GraphicsLayer>

    </esri:Map>

     

</s:Application>

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

1.InfoRendererBarChart.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:VGroup xmlns:fx="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">

    <!--

         This is used by the QueryResultsWithChart sample.

    -->

 

    <fx:Script>

        <![CDATA[

            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

            {

 

            }

 

        ]]>

    </fx:Script>

    <mx:BarChart id="columnChart"  width="100%" height="100%"

                    dataProvider="{data}"

                    showDataTips="true">

        <mx:series>

            <mx:BarSeries id="barSeries" xField="Rate"/>

        </mx:series>

        <mx:verticalAxis>

            <mx:CategoryAxis id="barAxis" categoryField="Name"/>

        </mx:verticalAxis>

        <mx:verticalAxisRenderers>

            <mx:AxisRenderer axis="{barAxis}" showLabels="false"/>

        </mx:verticalAxisRenderers>

    </mx:BarChart>

 

</s:VGroup>

2.InfoRendererColumnChart.mxml　

<?xml version="1.0" encoding="utf-8"?>

<s:VGroup xmlns:fx="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">

    <!--

         This is used by the QueryResultsWithChart sample.

    -->

 

    <fx:Script>

        <![CDATA[

            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

            {

 

            }

        ]]>

    </fx:Script> 

    <mx:ColumnChart id="columnChart"  width="100%" height="100%"

                    dataProvider="{data}"

                    showDataTips="true">

        <mx:series>

            <mx:ColumnSeries id="columnSeries" yField="Rate"/>

        </mx:series>

        <mx:horizontalAxis>

            <mx:CategoryAxis id="columnAxis" categoryField="Name"/>

        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>

            <mx:AxisRenderer axis="{columnAxis}" showLabels="false"/>

        </mx:horizontalAxisRenderers>

    </mx:ColumnChart>

 

</s:VGroup>

3.InfoRendererPieChart.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:VGroup xmlns:fx="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">

    <!--

         This is used by the QueryResultsWithChart sample.

    -->

 

    <fx:Script>

        <![CDATA[

            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

            {

 

            }

 

        ]]>

    </fx:Script>

 

    <mx:PieChart id="pieChart"

                 width="100%" height="100%"

                 dataProvider="{data}"

                 showDataTips="true" >

        <mx:series>

            <mx:PieSeries field="Rate"

                          labelPosition="callout"

                          nameField="Name">

            </mx:PieSeries>

        </mx:series>

    </mx:PieChart>

     

</s:VGroup>

上述的总体实现思路是这样的：核心是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之家(https://shop116521643.taobao.com/shop/view_shop.htm);
QQ兴趣部落GIS技术交流：gis之家(http://buluo.qq.com/p/barindex.html?bid=327395);
GIS毕业设计&项目承接群：238339408；
GIS技术交流群：432512093

1 个回复

欧阳 - 90后IT男

受教了

要回复问题请先登录或注册

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

1 个回复

发起人

相关问题

问题状态

—— 扫技术支持中心微信服务号！

—— 让GIS知乎问答随时随地！

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

与内容相关的链接

1 个回复

发起人

相关问题

问题状态

—— 扫技术支持中心微信服务号！

—— 让GIS知乎问答随时随地！