Implementation of the Arcgis for JavaScript statistics chart

First of all, cut a picture to see the effect:

Initialize State

The state after magnification

Click on the status after selection

As shown, the general statistics related to the map are related to the three states shown above: 1, the initialization state, 2, the state after zooming, 3, click to select Show Details status. In the first state, load the chart, generally speaking, the chart displayed on the map is just a trend or a schematic, the details have to click to display; the second state, as the map scales, the map chart changes with the size of the map; the third State, click Select, and the information box displays detailed chart information.

First of all, I would like to talk about some of the map chart implementation. In the present case, there are three ways to implement a chart below ArcGIS for JavaScript.

1, the way

The way is the simplest way, what meaning, is to use a static PNG image, the data does not represent the real data, indicating that the state is a map chart, detailed statistical information will appear when clicked.

2, the background to generate image mode

The way a picture is generated in the background is also a solution that many people take, in this way, the data on the map represents the real data information, the chart on the map is generated in Java or C # in the background, and displayed on the map, and by clicking to get detailed statistics, This approach is to give the pressure to the server, reduce the pressure on the client, but the effect is not good.

3, the front desk direct display way

Front Desk direct display is to pass statistics data to the foreground, the foreground generates the chart the way. This approach is more stressful for clients, and technically, the hardest.

Learn how the above three charts are generated, and then look at how the charts are displayed in the map. Either way, the chart is displayed in the map by graphic and Graphiclayer, except that the first two shows the raster, the latter showing the vector, and each chart is a graphic object, The chart is displayed in the Graphiclayer.

The following will be described in detail in the above three states in the implementation of ideas and methods.

First, load the chart.

Here, the data is in JSON format, and the display of the chart is positioned by x and Y, and the JSON data is as follows:

        var city_data={"Total": +, "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.5936 {"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 ": 10 6.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 ": Ten," Name ":" Xi ' an "," X ": 108.967128," y ": 34.276112}, {" id "                : One, "name": "Nanning", "X": 108.233931, "y": 22.748296}, {"id": "Name": "Haikou", "X": 110.346181, "y": 19.96992}, {"id": "Name": "Guangzhou", "X": 113.226683, "y": 23.18307}, {"id": +, "name": "Changsha", "X": 112.947928, "y": 28.169916} , {"id": 15, "name": "Nanchang", "X": 115.893715, "y": 28.652363}, {"id": +, "name": "Fuzhou", "X": 119.246768, "y": 26.070765}, {"id": +, "name": "Taipei", "X": 121.503567, "y": 25.008274}, {"id": "" Name ":" Hangzhou "," X ": 120.183046," y ": 30.330584} , {"id": +, "name": "Shanghai", "X": 121.449707, "y": 31.253361}, {"id": "Name": "Wuhan", "X": 114.216597, "y ": 30.579253}, {" id ": +," name ":" Hefei "," X ": 117.262302," Y ": 31.838353}, {" id ":" Name ":" Nanjing "," X ": 1 18.805692, "Y": 32.085022}, {"id": +, "name": "Zhengzhou", "X": 113.6511, "y": 34.746308}, {"id": "Name": "Jinan", "X": 117.048331, "y": 36.60841}, {"id": +, "name": "Stone Home", "X": 114.478215, "y": 38.033276}, {"id"                : "Name": "Taiyuan", "X": 112.483066, "y": 37.798404}, {"id":, "name": "Hohhot", "X": 111.842806, "y": 40.895751}, {"id": +, "name": "Tianjin", "X": 117.351094, "y": 38.925719}, {"id": "Name": "Shenyang", "X": 123.296299, "y": 41.801 604}, {"ID ": +," "Name": "Changchun", "X": 125.26142, "y": 43.981984}, {"id":--"name": "Hal", "X": 126.567138, "y": 45.69381}, {"id": +, "name": "Beijing", "X": 116.068276, "y": 39.892225}, {"id": "," "Name": "Hong Kong", "X": 114.093117, "y": 22.42785 2}, {"id":, "name": "Macau", "X": 113.552482, "Y": 22.184495}]};

Next, the chart is displayed with the following code:

            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<data.total;i++) {                    var symbol = new Picturemarkersymbol ("Bar.png", 20,30);                    Symbol.setoffset ( -10,18);                    var pt=new point (Items[i]. X,items[i]. y,map.spatialreference);                    var graphic = new Esri. Graphic (Pt,symbol,items[i]);                    Chartlayer.add (graphic);                }            };

by x and Y, each chart is added to the Graphiclayer in graphic way.

Second, the size of the chart changes when zooming.

When the map is scaled, the size of the chart also has to change as the map zooms, as follows:

                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<graphics.length;i++) {                        graphics[i].symbol = symbol;                        Chartlayer.redraw ();                    }                });

Here, mainly by listening to map zoom-end events, to redraw the chart.

Third, click the Show Detail chart.

Click to listen to the Graphiclayer click event, click on the graph through the Infowindow way to display detailed chart information, here is good to do, as follows:

            function Showdetailchart (evt) {                var graphic = evt.graphic;                Graphic.symbol.url= "Bar_select.png";                Chartlayer.redraw ();                Map.infoWindow.setTitle ("<b>" +graphic.attributes.name+ "</b>");                var content= "<div style= ' text-align:center; ' ></div> ";                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 ();            };

Through the above steps, it basically realizes the function of the map chart part. The complete code is as follows:

<! DOCTYPE html>
Finally, the third way to achieve the current I am trying to achieve, the realization will be the first time to share with you, if there is wrong, but also to correct!

If in doubt, please contact qq:1004740957 or e-mail:[email protected], contact please explain your intentions, thank you!



Implementation of the Arcgis for JavaScript statistics chart