Implementation of Arcgis for Javascript Statistical Chart

Implementation of Arcgis for Javascript Statistical Chart

First, cut a screenshot to show you the effect:

Initialization status

Enlarged status <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + pgltzybzcm9 "http://www.2cto.com/uploadfile/Collfiles/20141020/20141020084653175.png" alt = "\">

Click the selected status

As shown in, the map statistics involved generally involve the three States displayed above: 1. Initialization status; 2. Scaling status; 3. Click "select" to display the details status. In the first State, a Statistical Chart is loaded. Generally, the statistical chart displayed on the map is only a trend or diagram, and you have to click to display the details. In the second State, as the map scales, the map Statistical Chart changes with the map size. In the third State, click Select to display the detailed statistical chart information in the information box.

First, let's talk about the implementation methods of map statistical charts. Currently, there are three ways to implement statistical charts under Arcgis for Javascript.

1. Method

The method is the simplest way. What does it mean? A static png image is used. The data does not represent real data, indicating that a map Statistical Chart is used in this status, detailed statistics are displayed only when you click.

2. Background Image Generation

The background image generation method is also a solution adopted by many people. In this method, the data of the Statistical Chart on the map represents the real data information, the statistical chart on the map is generated using java or c # in the background, displayed on the map, and detailed statistics are obtained by clicking. This processing method is to hand over the pressure to the server, reduce the client pressure, but the display effect is not good.

3. Direct display at the front-end

The front-end displays the statistical data directly to the front-end. The front-end generates a Statistical Chart. This method puts a lot of pressure on the client, and technically speaking, it is also the most difficult.

I learned how to generate the preceding three statistical charts, and then I learned how to display the statistical charts in the map. Regardless of the preceding method, statistical charts are displayed through graphic and graphiclayer, but the first two are raster graphs, and the second is vector graphs, each statistical chart is a graphic object, which is displayed in graphiclayer.

The following describes in detail the implementation ideas and methods in the above three states.

First, load the Statistical Chart.

Here, the data is in json format, and the display of the Statistical Chart is located through X and Y. The JSON data is as follows:

Var CITY_DATA = {"total": 34, "items": [{"id": 1, "name": "Urumqi", "x": 87.575829," Y ": 43.782212 },{ "id": 2, "name": "Lhasa", "X": 91.162998, "Y": 29.71042 },{ "id": 3, "name": "Xining", "X": 101.797303, "Y": 36.593642 },{ "id": 4, "name": "Lanzhou", "X ": 103.584297, "Y": 36.119086 },{ "id": 5, "name": "Chengdu", "X": 104.035508, "Y": 30.714179 }, {"id": 6, "name": "Chongqing", "X": 106.519115, "Y": 29.478925 },{ "id": 7, "name ": "Guiyang", "X": 106.668071, "Y": 26.457312}, {"id": 8, "name": "Kunming", "X": 102.726775, "Y": 24.969385 },{ "id": 9, "name": "Yinchuan", "X": 106.167225, "Y": 38.598524 },{ "id ": 10, "name": "Xi'an", "X": 108.967128, "Y": 34.276112 },{ "id": 11, "name": "Nanning ", "X": 108.233931, "Y": 22.748296 },{ "id": 12, "name": "Haikou", "X": 110.346181, "Y ": 19.96992 },{ "id": 13, "name": "Guangzhou", "X": 113.226683, "Y": 23.18307 },{ "id": 14, "name": "Changsha", "X": 112.947928, "Y": 28.169916 },{ "id": 15, "name": "Nanchang", "X ": 115.893715, "Y": 28.652363 },{ "id": 16, "name": "Fuzhou", "X": 119.246768, "Y": 26.070765 }, {"id": 17, "name": "Taipei", "X": 121.503567, "Y": 25.008274 },{ "id": 18, "name ": "Hangzhou", "X": 120.183046, "Y": 30.330584}, {"id": 19, "name": "Shanghai", "X": 121.449707, "Y": 31.253361 },{ "id": 20, "name": "Wuhan", "X": 114.216597, "Y": 30.579253 },{ "id ": 21, "name": "Hefei", "X": 117.262302, "Y": 31.838353}, {"id": 22, "name": "Nanjing ", "X": 118.805692, "Y": 32.085022 },{ "id": 23, "name": "Zhengzhou", "X": 113.6511, "Y ": 34.746308 },{ "id": 24, "name": "Jinan", "X": 117.048331, "Y": 36.60841 },{ "id": 25, "name": "shi jia", "X": 114.478215, "Y": 38.033276 },{ "id": 26, "name": "Taiyuan", "X ": 112.483066, "Y": 37.798404 },{ "id": 27, "name": "Hohhot", "X": 111.842806, "Y": 40.895751 }, {"id": 28, "name": "Tianjin", "X": 117.351094, "Y": 38.925719 },{ "id": 29, "name ": "Shenyang", "X": 123.296299, "Y": 41.801604}, {"id": 30, "name": "Changchun", "X": 125.26142, "Y": 43.981984 },{ "id": 31, "name": "Hal", "X": 126.567138, "Y": 45.69381 },{ "id ": 32, "name": "Beijing", "X": 116.068276, "Y": 39.892225}, {"id": 33, "name": "Hong Kong ", "X": 114.093117, "Y": 22.427852 },{ "id": 34, "name": "Macao", "X": 113.552482, "Y ": 22.184495}]};

The Code is as follows:

Var chartLayer = new GraphicsLayer ({"id": "chartLayer"}); map. addLayer (chartLayer, 1); chartLayer. on ("click", showDetailChart); addReadPopup (CITY_DATA); function addReadPopup (data) {var items = data. items; for (var I = 0; I
 
  
Use X and Y to add each statistical chart to the graphiclayer using graphic.
  

  


  
Second, the chart size changes during scaling.
  
When the map is scaled, the size of the Statistical Chart must also change with the scale of the map, as shown below:
  

  
Map. on ("zoom-end", function (zoom) {var level = zoom. level; var symbol = new PictureMarkerSymbol ("bar.png", 20 * (level-3), 30 * (level-3); symbol. setOffset (-10 * (level-3), 18 * (level-3); var graphics = chartLayer. graphics; for (var I = 0; I
   
    
Here, we mainly re-draw the Statistical Chart by listening to the zoom-end event of map.
    

    


    
Third, click to display the details.
    
Click is the click Event of the graphiclayer to listen to. The click chart displays the detailed statistical chart information through infowindow. The details are as follows:
    

    
            function showDetailChart(evt){                var graphic = evt.graphic;                graphic.symbol.url="bar_select.png";                chartLayer.redraw();                map.infoWindow.setTitle(""+graphic.attributes.name+"");                var content="";                map.infoWindow.setContent(content);                map.infoWindow.show(graphic.geometry);                $(".maximize").hide();                $(".close").click(function(){                    restoreChart(evt);                });            };            function restoreChart(evt){                var graphic = evt.graphic;                graphic.symbol.url="bar.png";                chartLayer.redraw();            };
After the preceding steps, the map Statistical Chart function is basically realized. The complete code is as follows:
    

    

    
    
         
         Simple Map    
         <Script src = "http: // localhost/arcgis_js_api/library/3.9/3.9/init. js "> </script> <script src =" jquery-1.8.3.js "> </script> <script> var CITY_DATA = {" total ": 34," items ": [{"id": 1, "name": "Urumqi", "X": 87.575829, "Y": 43.782212 },{ "id": 2, "name ": "Lhasa", "X": 91.162998, "Y": 29.71042}, {"id": 3, "name": "Xining", "X": 101.797303, "Y": 36.593642 },{ "id": 4, "name": "Lanzhou", "X": 103.584297, "Y": 36.119086 },{ "id ": 5, "name": "Chengdu", "X": 104.03550 8, "Y": 30.714179 },{ "id": 6, "name": "Chongqing", "X": 106.519115, "Y": 29.478925 }, {"id": 7, "name": "Guiyang", "X": 106.668071, "Y": 26.457312 },{ "id": 8, "name ": "Kunming", "X": 102.726775, "Y": 24.969385}, {"id": 9, "name": "Yinchuan", "X": 106.167225, "Y": 38.598524 },{ "id": 10, "name": "Xi'an", "X": 108.967128, "Y": 34.276112 },{ "id ": 11, "name": "Nanning", "X": 108.233931, "Y": 22.748296 },{ "id": 12, "name": "Haikou ", "X": 110.346181, "Y": 19.96992 },{ "id": 13, "name": "Guangzhou", "X ": 113.226683," Y ": 23.18307 },{" id ": 14," name ":" Changsha "," X ": 112.947928," Y ": 28.169916 }, {"id": 15, "name": "Nanchang", "X": 115.893715, "Y": 28.652363 },{ "id": 16, "name ": "Fuzhou", "X": 119.246768, "Y": 26.070765 },{ "id": 17, "name": "Taipei", "X": 121.503567, "Y": 25.008274 },{ "id": 18, "name": "Hangzhou", "X": 120.183046, "Y": 30.330584 },{ "id ": 19, "name": "Shanghai", "X": 121.449707, "Y": 31.253361}, {"id": 20, "name": "Wuhan ", "X": 114.216597, "Y": 30.579253}, {"id": 21, "Name": "Hefei", "X": 117.262302, "Y": 31.838353 },{ "id": 22, "name": "Nanjing ", "X": 118.805692, "Y": 32.085022 },{ "id": 23, "name": "Zhengzhou", "X": 113.6511, "Y ": 34.746308 },{ "id": 24, "name": "Jinan", "X": 117.048331, "Y": 36.60841 },{ "id": 25, "name": "shi jia", "X": 114.478215, "Y": 38.033276 },{ "id": 26, "name": "Taiyuan", "X ": 112.483066, "Y": 37.798404 },{ "id": 27, "name": "Hohhot", "X": 111.842806, "Y": 40.895751 }, {"id": 28, "name": "Tianjin", "X": 117.351094, "Y": 38.92 5719 },{ "id": 29, "name": "Shenyang", "X": 123.296299, "Y": 41.801604 },{ "id": 30, "name": "Changchun", "X": 125.26142, "Y": 43.981984 },{ "id": 31, "name": "Hal", "X ": 126.567138, "Y": 45.69381 },{ "id": 32, "name": "Beijing", "X": 116.068276, "Y": 39.892225 }, {"id": 33, "name": "Hong Kong", "X": 114.093117, "Y": 22.427852 },{ "id": 34, "name ": "Macao", "X": 113.552482, "Y": 22.184495}]}; var map, mapCenter; require (["esri/map", "esri/layers/ArcGISTiledMapServiceLay Er "," esri/layers/FeatureLayer "," esri/layers/GraphicsLayer "," esri/geometry/Point "," esri/symbols/PictureMarkerSymbol ", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "dojo/_ base/Color", "dojo/domReady! "], Function (Map, Tiled, FeatureLayer, GraphicsLayer, Point, PictureMarkerSymbol, SimpleLineSymbol, SimpleRenderer, Color) {map = new Map (" map ", {logo: false, slider: true}); var tiled = new Tiled ("http: // localhost: 6080/arcgis/rest/services/chinamap/MapServer"); map. addLayer (tiled, 0); mapCenter = new Point (103.847, 36.0473, map. spatialReference); map. centerAndZoom (mapCenter, 4); var chartLayer = new GraphicsLayer ({"id": "chartLayer"}); map. addLayer (chartLayer, 1); chartLayer. on ("click", showDetailChart); addReadPopup (CITY_DATA); function addReadPopup (data) {var items = data. items; for (var I = 0; I
     
      
"+ Graphic. attributes. name +""); Var content =" "; map. infoWindow. setContent (content); map. infoWindow. show (graphic. geometry); $ (". maximize "). hide (); $ (". close "). click (function () {restoreChart (evt) ;}) ;}; function restoreChart (evt) {var graphic = evt. graphic; graphic. symbol. url = "bar.png"; chartLayer. redraw () ;};}); </script>
     
    
Finally, I am trying to implement the third method. I will share it with you as soon as possible. If there is anything wrong, I hope to correct it!
    

    


    
If you have any questions, please contact QQ: 1004740957 or e-mail: niujp08@qq.com, please explain your intention, thank you!