描述
本例展示了如何使用查詢任務結果用去Google Chart API構建一個圖表。當運行本例，點擊一個郡縣去看出現在一個無焦點的InfoWindow中的人口統計的數據的圖表。
函數init創建了一個Map，一個 QueryTask和一個Query。注意QueryTask的構造函數需要地圖服務里一個圖層的URL (http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3)。 URL末尾的數字3是地圖目錄里郡縣圖層的索引號。 要找到你自己的地圖服務的URL及它們的圖層索引，使用Services Directory
Query對象包含查詢的條件，例如查詢什么幾何體，是否返回幾何體以便它能夠顯示在地圖上，以及哪些字段被查詢。
當某人單擊地圖時，下面的時間監聽器會察覺：
dojo.connect(map, "onClick", doQuery);
上面監聽器中的doQuery函數捕獲地圖單擊的位置並將單擊位置設置為query.Geometry。 這個點相交的郡縣將被查詢。下列代碼行運行查詢任務：
queryTask.execute(query);
當查詢任務完成，另一個事件激發，調用getChart函數:
dojo.connect(queryTask, "onComplete", getChart);
getChart讀取最初以 FeatureSet返回的查詢結果。函數解析人口統計總數，為每個人口統計組計算百分比，構建Google Chart API的URL並發送請求。這個函數也用紅色的虛線輪廓象征查詢的要素並在圖表被創建后顯示信息窗口。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <title>Demographic Charts</title> 7 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"> 8 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script> 9 <script type="text/javascript"> 10 dojo.require("esri.map"); 11 dojo.require("esri.tasks.query"); 12 13 var map, queryTask, query, click; 14 var wd = 240; 15 var ht = 110; 16 var chartParams = { cht:"p3", chl:"White|Black|Hispanic|Asian|Other" }; 17 18 function init() { 19 map = new esri.Map("map", { extent:new esri.geometry.Extent({ "xmin": -125.947265625, "ymin": 31.17919921875, "xmax": -103.974609375, "ymax": 42.16552734375 }) }); 20 map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer")); 21 map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", { opacity:0.4 })); 22 dojo.connect(map, "onClick", doQuery); 23 24 queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"); 25 dojo.connect(queryTask, "onComplete", getChart); 26 27 dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();}); 28 query = new esri.tasks.Query(); 29 query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS; 30 query.outFields = ["NAME", "WHITE", "BLACK", "ASIAN", "HISPANIC", "OTHER"]; 31 query.returnGeometry = true; 32 33 map.infoWindow.resize(275,150); 34 } 35 36 function doQuery(evt) { 37 click = query.geometry = evt.mapPoint; 38 queryTask.execute(query); 39 } 40 41 function getChart(featureSet) { 42 map.graphics.clear(); 43 44 var features = featureSet.features; 45 var feature, attributes, white, black, asian, hispanic, other, total, graphic; 46 for (var i=0; i<features.length; i++) { 47 feature = features[i]; 48 attributes = feature.attributes; 49 50 white = parseInt(attributes.WHITE); 51 black = parseInt(attributes.BLACK); 52 asian = parseInt(attributes.ASIAN); 53 hispanic = parseInt(attributes.HISPANIC); 54 other = parseInt(attributes.OTHER); 55 56 total = white + black + asian + hispanic + other; 57 58 white = (white / total) * 100; 59 black = (black / total) * 100; 60 asian = (asian / total) * 100; 61 hispanic = (hispanic / total) * 100; 62 other = (other / total) * 100; 63 64 var params = dojo.mixin({ 65 chf:"bg,s,FFFFFF50", 66 chs:wd + "x" + ht, 67 chd: "t:" + white + "," + black + "," + hispanic + "," + asian + "," + other 68 }, chartParams); 69 70 var mySymbol = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2.5), new dojo.Color([255,255,0,0.25])); 71 72 feature.setSymbol(mySymbol); 73 74 map.infoWindow.setTitle(attributes["NAME"]); 75 map.infoWindow.setContent("<img src=\"" + "http://chart.apis.google.com/chart?" 76 + decodeURIComponent(dojo.objectToQuery(params)) + "\" />"); 77 78 map.graphics.add(feature); 79 map.infoWindow.show(map.toScreen(click),map.getInfoWindowAnchor(map.toScreen(click))); 80 } 81 } 82 83 dojo.addOnLoad(init); 84 </script> 85 </head> 86 <body class="tundra"> 87 <span style="font-size:200%; font-weight:bold;">USA County Demographics</span> 88 <div id="map" style="width:1000px; height:500px; border:1px solid #000;"></div> 89 </body> 90 </html> 91