ArcGis API for JavaScript——动态图表
ArcGis API for JavaScript——动态图表
ArcGIS API for JS是基于Dojo的，Dojo提供了一系列对于图表的操作。在本例子中首先介绍一个简单的chart例子，再介绍动态加载数据源的chart例子。
Dojo Chart的官方文档：http://dojotoolkit.org/reference-guide/1.10/dojox/charting.html#using-dojo-store-and-dojo-data-data-sources-with-charts
1. 简单的Chart
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
<script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js" djConfig="parseOnLoad:true">script>
<script src='http://localhost/arcgis_js_api/library/3.18/3.18/dojo/dojo.js'>script>
<style>
#chartPanel{
border-radius: 5px;
border: 1px solid #57585A;
background-color: #fff;
display: block;
padding: 5px;
position: relative;
text-align: center;
width: 500px;
height: 300px;
z-index: 99;
left: 50%;
}
#charts{
position: fixed;
font-size: 67px;
line-height: 0;
z-index: 100;
width: 500px;
height: 300px;
}
style>
<script>
require([
"dojox/charting/Chart2D",
"dojox/charting/plot2d/Columns",
"dojox/charting/axis2d/Default",
"dojox/charting/themes/Tufte",
"dojo/domReady!"
], function(
Chart2D,Columns,Default,Tufte,domReady
){
var chart = new Chart2D("charts");
chart.addPlot("default", {
type: Columns,//Bars或者Colums
gap: 8
});
var chartData=[12,54,53,86,65,2,7];
var xStr = ["星期一","星期二","星期三","星期四","星期五","星期六","星期天"];
// Add axes
var myLabelFunc = function(text, value, precision){
return xStr[text-1];
};
chart.addAxis("x", { labelFunc: myLabelFunc });
chart.addAxis("y", {
vertical:true, fixLower: "major", fixUpper: "major",
});
chart.addSeries("num",chartData,{stroke: {color: "#5782AE"}, fill: "#5782AE"});
chart.render();
});
script>
head>
<body class="claro">
<div id="chartPanel">
<div id="charts">div>
div>
body>
html>运行结果： 
注：若需要添加标题、单位等其他信息可参考上面官网文档进行添加。
2. 加载动态数据的Chart
配合时间间隔加载动态数据，每间隔几秒就加载一个新数据。对于时间的控制可以使用setInterval函数。
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
<script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js" djConfig="parseOnLoad:true">script>
<script src='http://localhost/arcgis_js_api/library/3.18/3.18/dojo/dojo.js'>script>
<style>
#chartPanel{
border-radius: 5px;
border: 1px solid #57585A;
background-color: #fff;
display: block;
padding: 5px;
position: relative;
text-align: center;
width: 500px;
height: 300px;
z-index: 99;
left: 50%;
}
#charts{
position: fixed;
font-size: 67px;
line-height: 0;
z-index: 100;
width: 500px;
height: 300px;
}
style>
<script>
require([
"dojox/charting/Chart2D",
"dojox/charting/plot2d/Columns",
"dojox/charting/axis2d/Default",
"dojox/charting/themes/Tufte",
"dojo/domReady!"
], function(
Chart2D,Columns,Default,Tufte,domReady
){
var chart = new Chart2D("charts");
chart.addPlot("default", {
type: Columns,//Bars或者Colums
gap: 8
});
var data1=[21,54,8,90,21,45,78];
var data2=[51,14,76,98,2,75,57];
var data3=[29,94,81,9,81,40,18];
var data4=[11,74,8,10,51,95,38];
var data5=[71,64,81,90,71,15,8];
var chartDatas=[data1,data2,data3,data4,data5];
var timesRun = 0;
var interval = setInterval(function(){
creatChart(chartDatas[timesRun]);
timesRun=timesRun+1;
if(timesRun === 5){
clearInterval(interval);
}
}, 1000);
function creatChart(chartData){
console.log(chartData);
var xStr = ["星期一","星期二","星期三","星期四","星期五","星期六","星期天"];
// Add axes
var myLabelFunc = function(text, value, precision){
return xStr[text-1];
};
chart.addAxis("x", { labelFunc: myLabelFunc });
chart.addAxis("y", {
vertical:true, fixLower: "major", fixUpper: "major",
});
chart.addSeries("num",chartData,{stroke: {color: "#5782AE"}, fill: "#5782AE"});
chart.render();
}
});
script>
head>
<body class="claro">
<div id="chartPanel">
<div id="charts">div>
div>
body>
html>没法展示动态图表，通过控制台可以看到一组一组的数据。 