ArcGIS API for Flex theme Map production (pie chart, histogram, etc.)

The company recently gave me the task of using the ArcGIS API for Flex to show the pie chart directly on the map (business data) and the chart making of the histogram, rather than the click-to-point display of the Bubble window, which the company has implemented.

After a period of groping, referring to some of the online resources, at present probably out, inside still need to improve the place.

As follows:

(1) Chart.mxml, the main display map of the effect of the page

<?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: "Hazardous chemicals 1 ", rate:25},{Name:" Dangerous chemicals 2 ", rate:15},{Name:" Dangerous chemicals 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/rest/services/ns_ New/mapserver "/><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, respectively, are histogram and pie chart implementation of the page

1.inforendererbarchart.mxml

<?xml version= "1.0" encoding= "Utf-8"? ><s:vgroup xmlns:fx= "http://ns.adobe.com/mxml/2009" xmlns:s= "Librar          Y://ns.adobe.com/flex/spark "xmlns:mx=" Library://ns.adobe.com/flex/mx "clipandenablescrolling=" true " Creationcomplete= "Creationcompletehandler ()" implements= "Mx.core.IDataRenderer" width= "height="    ;    <!--this was 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"/&GT;&LT;/MX:SERIES&GT;&LT;MX: Verticalaxis><mx:categoryaxis id= "Baraxis" categoryfield= "Name"/&GT;&LT;/MX:VERTICALAXIS&GT;&LT;MX: Verticalaxisrenderers><mx:axisrenderer axis= "{baraxis}" showlabels= "false"/&GT;&LT;/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= "Librar          Y://ns.adobe.com/flex/spark "xmlns:mx=" Library://ns.adobe.com/flex/mx "clipandenablescrolling=" true " Creationcomplete= "Creationcompletehandler ()" implements= "Mx.core.IDataRenderer" width= "height="    ;    <!--this was 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"/&GT;&LT;/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= "Librar          Y://ns.adobe.com/flex/spark "xmlns:mx=" Library://ns.adobe.com/flex/mx "clipandenablescrolling=" true " Creationcomplete= "Creationcompletehandler ()" implements= "Mx.core.IDataRenderer" width= "height="    ;    <!--this was 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:pieseri            Es field= "rate" labelposition= "callout" namefield= "Name" > </mx:PieSeries> </mx:series> </mx:PieChart></s:VGroup>

The overall implementation of the idea is this: The core is Infosymbol,infosymbol custom Inforenderer binding thematic map template, such as Inforendererbarchart.mxml, Inforenderercolumnchart.mxml, Inforendererpiechart.mxml; When the program is initialized, a number of graphic with statistics are added to the map, and these graphic objects have a collection of attributes properties to hold each statistic object, each of which contains two fields: name indicates the name of the crisis said that rate represents a share, and we will see these two fields again in the definition of Infosymbol. When these graphic objects are defined, we can add them to the Graphiclayer with the Infosymbol symbol set. In the definition of infosymbol, we can see that a pie Chart Component Piechart is added to this infosymbol, and the Dataprovider attribute of the pie chart is bound to {data}, What it represents is actually the attributes property of the graphic object. You can simply assume that data in Infosymbol represents the attributes attribute of its corresponding graphic object. Other histograms are the same.

Since it is possible to obtain graphic attribute information in Infosymbol, it is a matter of the nature to draw different thematic plots according to the graphic attribute information.

Style Code parsing:

chartstyle{borderthickness:0;/* Displays the border width of the thematic map */infoplacement:center;/* shows the location of the thematic map, which is the center */backgroundalpha:0;/* Show the background transparency of the thematic map, set here to 0, is to hide the background */infooffsetx:0;/* show The x offset of the thematic map, set 0, otherwise it will deviate from the original point position */infooffsety:0;/* display the thematic map y offset, set 0, otherwise it will deviate from the original point position */paddingleft:0;/* Show the location offset of the thematic map, set 0, otherwise it will deviate from the original point position */paddingright:0;/* show the thematic map position offset, set 0, otherwise it will deviate from the original point position */paddingtop:0;/* Show the location offset of the thematic map, set 0, or deviate from the original point position */paddingbottom:0;/* show the thematic map position offset, set 0, or deviate from the original point position */}

There is a need to refine the optimization: currently Graphicslayer defines three (Pie,bar,column), and then each binds to a different infosymbol (Pie,bar,column). This is a bit redundant, in fact, as long as the definition of a graphicslayer, and then dynamically determine the binding is which infosymbol.

Note:

GIS Technology Exchange QQ Group: 432512093

　

ArcGIS API for Flex theme Map production (pie chart, histogram, etc.)