arcgis api for js入门开发系列十一地图统计图

上一篇实现了demo的叠加SHP图层，本篇新增地图统计图，截图如下：

地图统计图实现的思路如下：利用拓展arcgis api的js文件（MapChartGraphic.js以及MapChartGraphic.js），然后构造统计的数据源，直接调用即可；
1.map.html页面引用地图统计图需要的js文件
<pre>
dojoConfig = {
parseOnLoad: true,
packages: [
{
name: 'MapChart',
location: this.location.pathname.replace(//[^/]+$/, "") + "/js/main/extras/mapchart"
}
]
};
<script type="text/javascript" src="js/main/map.chart.js"></script>
</pre>
2.构造测试数据源，实现地图统计图：
<pre>
data: [
{ code: 1, male: 25, female: 12, name: "人口比例图", x: 121.639, y: 39.563 },
{ code: 2, male: 14, female: 45, name: "人口比例图", x: 121.891, y: 39.229 },
{ code: 3, male: 88, female: 55, name: "人口比例图", x: 122.211, y: 39.813 },
{ code: 4, male: 45, female: 23, name: "人口比例图", x: 122.614, y: 39.652 },
{ code: 5, male: 8, female: 66, name: "人口比例图", x: 123.144, y: 39.865 }
],
//模块初始化函数
Init:function(map){
DCI.chart.map = map;
//监听check点击事件
$("[name = chartlayer]:checkbox").bind("click", function () {
if ($(this).attr("checked")) {
if (DCI.chart.map.getLayer("chart")) {
DCI.cluster.map.getLayer("chart").show();
} else {
DCI.chart.chartLayer = new MapChart.MapChartGraphicLayer({
id: "chart",
chartDiv: "map",
displayOnPan: false
});
DCI.chart.map.addLayer(DCI.chart.chartLayer);
for (var i = 0, dl = DCI.chart.data.length; i < dl; i++) {
var series = [DCI.chart.data[i].male, DCI.chart.data[i].female];
var chartGraphic = new MapChart.MapChartGraphic({
map: DCI.chart.map,
id: DCI.chart.data[i].code,
attribute: DCI.chart.data[i],
type: "Pie",
series: series,
sr: new esri.SpatialReference(4326)
});
DCI.chart.chartLayer.add(chartGraphic);
}

                }
            }
            else {
                if (DCI.cluster.map.getLayer("chart"))
                    DCI.cluster.map.getLayer("chart").hide();
            }
        })
    }

</pre>
备注：团队承接webgis/gis毕业设计以及webgis项目等业务，欢迎有相关需求的客户来咨询
GIS之家论坛（推荐）：GIS之家论坛
GIS作品：GIS之家
QQ兴趣部落：GIS之家部落
GIS之家交流群一：432512093(已满)
GIS之家交流群二：296438295