标签：index JavaScript chart ArcGIS api black var new esri
<!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: "width: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", width: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?/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;
}
标签：index,JavaScript,chart,ArcGIS,api,black,var,new,esri 来源： https://www.cnblogs.com/devgis/p/16524722.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。