首先，截个图给大家看看效果：

初始化状态

放大后的状态

点击选中后的状态

如上图所示，一般的涉及到的地图的统计涉及到上述所展示的三个状态：1、初始化状态；2、缩放后的状态；3、点击选中显示详情状态。第一种状态下，加载统计图，一般来说，在地图上显示的统计图只是一个趋势或者示意，详细的还得去点击显示；第二种状态，随着地图的缩放，地图统计图随着地图的大小变化；第三种状态，点击选中，在信息框显示详细的统计图的信息。

首先，跟大家谈谈地图统计图几种实现方式。目前情况下，在Arcgis for Javascript下面，实现统计图有三种方式。

1、示意图方式

示意图方式是最简单的一种方式，什么意思呢，就是用一个静态的png图片的方式，示意图的数据不代表真实的数据，示意在该状态时是地图统计图，详细的统计信息在点击示意图的时候才会出现。

2、后台生成图片方式

后台生成图片的方式也是有很多人采取的一种解决方案，在这种方式下，地图上的统计图的数据代表真实的数据信息，地图上的统计图是在后台用java或者c#生成的，并在地图上展示出来，并通过点击获取详细统计信息，这种处理方式就是将压力交给服务器，减小客户端压力，但是显示的效果不好。

3、前台直接展示方式

前台直接展示是将统计数据传给前台，前台生成统计图的方式。这种方式对客户端的压力比较大，而且从技术上来说，也是最难的。

了解了上述三种统计图的生成方式，接下来了解一下统计图在地图中的展示方式。不论是上述那种方式，统计图在地图中的显示都是通过graphic和graphiclayer来展示的，只是前两种展示的是栅格图，后一种方式展示的是矢量图，每一个统计图是一个graphic对象，统计图在graphiclayer中显示。

下文将详细的讲述上述三种状态下的实现思路与方式。

第一，加载统计图。

在此，数据是json格式的，统计图的显示是通过X与Y去定位的，JSON的数据如下：

        var CITY_DATA=http://www.mamicode.com/{>紧接着，就是显示统计图，代码如下：
            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);
                }
            };
通过X与Y，将每一个统计图通过graphic的方式添加到graphiclayer里。

第二，缩放时统计图大小的变化。
地图缩放时，统计图的大小也得随着地图的缩放发生相对应的变化，如下：
                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();
                    }
                });

这里，主要通过监听map的zoom-end事件，去重新绘制统计图。

第三，点击显示详细图。
点击是监听的graphiclayer的click事件，点击图通过infowindow的方式显示详细统计图信息，这里面就好做多了，如下：
            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;'><img src=http://www.mamicode.com/'bar_detail.png'/>