<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>直方图专题图</title> <link rel="stylesheet" href="http://192.168.15.86:8080/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css" /> <link rel="stylesheet" href="http://192.168.15.86:8080/arcgis_js_api/library/3.14/3.14/esri/css/esri.css"> <link href="ChartInfoWindow.css" rel="stylesheet" /> <style> html,body{ padding: 0; margin: 0; height: 100%; width: 100%; border:0px solid #000; } #map{ position: relative; width:100%; height:100%; border:1px solid #000; } #info { height: 10%; width: 80%; border:1px solid #000; } </style> <script> //将 “Chapter07\Sample7-2\js\CustomModules”目录下的ChartInfoWindow.js CustomTheme.js geometryUtils.js 三个文件打包为“CustomModules”添加到 引用之中 var dojoConfig = { packages: [{ name: "CustomModules", location: location.pathname.replace(/\/[^/]+$/, "") + "/ArcGIS-js/CustomModules" }] }; //console.dir(dojoConfig); </script> <script src="http://192.168.15.86:8080/arcgis_js_api/library/3.14/3.14/init.js"></script> <script> require([ "esri/map", "esri/geometry/Point", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", [html] view plain copy "esri/Color", "CustomModules/ChartInfoWindow", //图表信息窗口类，处理如何响应用户地图操作，包括漫游、放大、缩小等 "dojo/_base/array", "dojo/dom-construct", "dojo/_base/window", "dojox/charting/Chart", "dojox/charting/Chart2D", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/Tooltip", "dojox/charting/plot2d/ClusteredColumns", "dojo/domReady!" ], function ( Map, Point,FeatureLayer, ArcGISDynamicMapServiceLayer, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, Color, ChartInfoWindow, array, domConstruct, win, Chart,Chart2D,Highlight, Tooltip,ClusteredColumns ) { var Data = [ ["北京市", 933606.67, 4878966.67, 2023, 4982, 7760], ["天津市", 1022971.388, 4794258.23, 5200, 7852, 8624], ["上海市", 1549021.62, 3990244.41, 4582, 5271, 5439], ["重庆市", 268040.96, 3708718.69, 8494, 9723, 1832], ["黑龙江省", 1672578.76, 5805333.17, 7922, 9121, 1634], ["吉林省", 1593237.72, 5412773, 8538, 9241, 1811], ["辽宁省", 1445669.53, 5114055.01, 1906, 3016, 5635], ["山西省", 619620.09, 4566763.28, 6854, 8447, 9746], ["河北省", 870342.74, 4672783.14, 7193, 8057, 9551], ["陕西省", 347000.06, 4221482.37, 7154, 8474, 1053], ["甘肃省", -183370.5, 4566763.28, 5509, 6234, 7493], ["四川省", -194586.104, 3802829.23, 6863, 8182, 9903], ["贵州省", 207842.81, 3351068.85, 5456, 6218, 7389], ["云南省", -359506.73, 3090317.29, 5976, 6811, 8278], ["海南省", 524469.70, 2477127.32, 6695, 7553, 9238], ["浙江省", 1468077.08, 3756523.19, 5867, 8274, 2346], ["山东省", 1107036.46, 4475739.03, 1494, 1606, 3524], ["江苏省", 1346905.968, 4179534.072, 1993, 4035, 7167], ["安徽省", 1132825.078, 4000082.34, 6829, 8237, 1055], ["福建省", 1316210.78, 3361097.75, 1336, 3187, 4958], ["江西省", 1039699.52, 3505800.54, 6212, 7989, 9523], ["河南省", 761755.55, 4220718.27, 6607, 7837, 9171], ["湖北省", 715909.12, 3852514.15, 7791, 8977, 10873], ["湖南省", 662899.19, 3488608.13, 7929, 8922, 10547], ["广东省", 903093.91, 3054857.94, 5243, 7211, 9578], ["青海省", -768655.9, 4411625.66, 6501, 7326, 8744], ["西藏自治区", -1569535.69, 3950295.98, 3985, 4469, 4730], ["广西壮族自治区", 407591.50, 2997549.91, 6968, 7920, 9181], ["内蒙古自治区", 745166.41, 5233995, 1925, 3264], ["宁夏回族自治区", 100579.51, 4519699.09, 7918, 8992, 1937], ["新疆维吾尔自治区", -1574073.93, 5118209.87, 5945, 7400, 8895]]; var map = new Map("map", { center: [410609, 3622926], //zoom: 4, slider: false }); var baseLayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/chinamap_Theme/MapServer"); map.addLayer(baseLayer); //读取一个feature图层 var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/chinamap_Theme/MapServer/2", { mode: FeatureLayer.MODE_SNAPSHOT,//快照模式？？？ outFields: ["FID"] }); //为featureLayer设置渲染器 var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); var renderer = new SimpleRenderer(defaultSymbol); featureLayer.setRenderer(renderer); //featureLayer图层加载完毕后触发 createChartInfoWindow函数 featureLayer.on("update-end", function (evt) { var showFields = ["A","B","C"]; createChartInfoWindow(showFields); }); map.addLayer(featureLayer); //创建放置直方图的信息窗口 function createChartInfoWindow(showFields) { //假设虚构数据的最大值为1000 var max = 10000; var optinalChart = null; for(var i=0;i<Data.length;i++){ var infoWindow = new ChartInfoWindow({ domNode: domConstruct.create('div', null, document.getElementById('map')) }); infoWindow.setMap(map); var nodeChart = null; nodeChart = domConstruct.create("div", { id: 'nodeTest' + i, style: "120px;height:50px" }, win.body()); var chart = makeChart(nodeChart,showFields,max,i); //optinalChart = chart; infoWindow.resize(122, 52); //计算几何的中心位置，将图表信息框放置于此 var labelPt = new Point(Data[i][1],Data[i][2],map.SpatialReference); infoWindow.setContent(nodeChart); infoWindow.__mcoords = labelPt; infoWindow.show(map.toScreen(labelPt)); } } //在一个信息框中 绘制直方图 function makeChart(nodeChart,showFields, max,index) { //初始化 一个图表变量 var chart = new Chart2D(nodeChart,{margins: { l: 0, r: 0, t: 0, b: 0 }}); chart.addPlot("default", {type: "Columns"}); //chart.addplotarea({ stroke: null,fill: "transparent"}); chart.addAxis("x", { fixLower: "major", fixUpper: "major", min: 0,to:6, //初始刻度 labels: [{ value: 0, text: " " },{ value: 1, text: "A" },{ value: 2, text: " " },{ value: 3, text: "B"},{ value: 4, text: " "},{ value: 5, text: "C"},{value: 6, text: " "}], 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轴 //定义柱子颜色 var ColorArr=[new Color([0,220,0,0.85]),new Color([48,169,208,0.85]),new Color([62,193,121,0.85])]; //将attributes里各个字段的参数 设置为直方图的 “柱” var length = showFields.length; for (var i = 0; i < length; i++) { serieValues = []; for (var m = 0; m < i; m++) { serieValues.push(0); serieValues.push(0); } serieValues.push(Data[index][i+3]); chart.addSeries(i, serieValues, { stroke: { color: "blue", 0},fill: ColorArr[i]}); } chart.render(); return chart; } }); </script> </head> <body class="claro"> <div id="map" ></div> </body> </html> 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;<span style="font-family: Arial, Helvetica, sans-serif;"> }</span> [html] view plain copy <img src="http://img.blog.csdn.net/20160316203027440?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> 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; }