ArcGIS api for JavaScript 制作统计专题图

 ArcGIS api for JavaScript并没有直接给出我们客户端统计专题图的接口，这就给一些像我一样的新手很大的困难。在《Web GIS从基础到开发实践（基于ArcGIS API for JavaScript）》一书中，作者提出了这样一种方法：ArcGIS是基于Dojo框架编写的，那么利用Dojo 为我们提供的 DojoX.charting（http://dojotoolkit.org/reference-guide/1.9/dojox/charting.html#dojox-charting）来编写实现我们需要的图表。然后将我们图表放置在一个绑定了位置结点的自定义信息框中。然后编写信息框随地图放缩移动的事件，便可以得到我们想要的统计专题图效果。

       首先我先来说一下原版程序中老师们自己写的类包CustomModules，它包含了三个JS文件，分别是：ChartInfoWindow.js (图表响应地图的放大、缩小、平移等操作)、CustomThme.js（基本的图表样式）、GeometryUtils.js（计算多边形中心的算法，确定信息框位置，比服务器算法更加高效）。再结合我自己想要达到的效果，我只加载了ChartInfoWindow.js 文件。

      下面是我的源代码：

      

此外 还可以 绘制饼图和折线图

//折线图 需要引用相应的类包 "dojox/charting/plot2d/Lines"

 function makeChart(nodeChart,showFields, max,index) {     var chart = new Chart2D(nodeChart);                     chart.addPlot("default", {type: "Lines"}); /* chart.addAxis("x");                     chart.addAxis("y", {vertical: true}); */                     chart.addAxis("x", { fixLower: "major", fixUpper: "major", min: 1,to:3, //初始刻度                         labels: [{ value: 1, text: "A" },{ value: 2, text: "B"},{ value: 3, text: "C"}],                         font: "normal normal bold 6pt Tahoma",//X轴值的大小，字体等                         fontColor: "black", //X轴值的颜色                         majorTick: { color: "black", length:  0}, //X轴大刻度的颜色、长度                         minorTick: { stroke: "black", length: 0} //X轴小刻度的颜色、长度                     });//定义X轴     chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", min: 0,to: 10000,//刻度最大允许值                         font: "normal normal bold 4pt Tahoma", //Y轴值的字体、大小等                         fontColor: "black", //Y轴值的颜色                         majorTick: { color: "black", length: 1}, //Y轴大刻度的颜色、长度                         minorTick: { stroke: "black", length: 0} //Y轴小刻度的颜色、长度                     });//定义Y轴                     chart.addSeries("all", [Data[index][3],Data[index][4],Data[index][5]], {stroke: {color: new Color([240,162,22,0.85])}});                     chart.render();                 return chart;            }

/饼图  应当引用相应的类包"dojox/charting/plot2d/Pie",

function makePieChart(nodeChart,showFields,index) {    //初始化 一个图表变量var chart =  new Chart2D(nodeChart,{margins: { l: 0, r: 0, t: 0, b: 0 }});chart.addPlot("default", {type: "Pie",font: "normal normal 11pt Tahoma",fontColor: "black",labelOffset: -30,radius: 80}); chart.addSeries("all",[                     {y:Data[index][3], text: "A", stroke: "black",fill:new Color([0,220,0,0.85])},                     {y:Data[index][4], text: "B", stroke: "black",fill:new Color([48,169,208,0.85])},                     {y:Data[index][5], text: "C", stroke: "black",fill:new Color([62,193,121,0.85])}                 ]);                chart.render();                return chart;            }