dojo中的统计图应用

因甲方需要在统计中加入统计图，所以用了一下dojo中的图，虽然可以实现，但效果一般，最后采用了更炫酷的echart。但也在此记录下

dojo中统计图的应用

require(["esri/tasks/QueryTask","esri/tasks/query","dojox/charting/Chart",

"dojox/charting/themes/Claro","dojox/charting/plot2d/Pie",

"dojox/charting/plot2d/Markers","dojox/charting/axis2d/Default"],

function(queryTask,Query,Chart,theme,PiePlot){

//var featurelayer=new FeatureLayer(url);

//var pwkid=featurelayer.spatialReference.wkid;

 

var queryTask=new queryTask(url);

var query =new Query();

query.outFields=[value1,value2];

query.where="1=1";

query.returnGeometry=true;

//query.outSpatialReference={wkid:pwkid};

queryTask.execute(query,lang.hitch(this,function(featuredata){

var jdata={

identifier:"id",

items:[]

};

//var colLabel=[];

//var colData=[];

//var pieData=[];

var legendData=[];

var seriesData=[];

var featureArray=featuredata.features;

for(var i=0,length=featureArray.length;i<length;i++){

var fname=featureArray[i].attributes.LANDKIND;

var farea=featureArray[i].attributes.LANDAREA;

var found=false;

for(var j=0,jsonlength=jdata.items.length;j<jsonlength;j++){

if(jdata.items[j].name==fname){

found=true;

jdata.items[j].area+=farea;

break;

}

}

if(found==false){

var index=jdata.items.length;

// var j={};

// j.id=index+1;

// j.name=fname;

// j.area=farea;

//jdata.items.push(j);

jdata.items.push({

id:index+1,

name:fname,

area:farea

})

// var jj={};

// jj.value=index+1;

// jj.text=fname;

// colLabel.push(jj);

// colData.push(farea);

 

// var jj={};

// jj.y=farea;

// jj.text=fname;

// jj.stroke="black";

// jj.tooltip=fname+": "+farea;

// pieData.push(jj);

legendData.push(fname);

seriesData.push({

name:fname,

value:farea

});

}

}

var pdatagrid=registry.byId("zgs");

if(pdatagrid==undefined){

var objectStore=new dojo.store.Memory({data:jdata});

var grid=new dojox.grid.DataGrid({

id:"zgs",

store:dojo.data.ObjectStore({objectStore:objectStore}),

structure:[

{name:'序号',field:'id',width:'50px'},

{name:'用地性质',field:'name',width:'120px'},

{name:'用地面积（平方米）',field:'area',width:'170px'},

]

},'zgstatic_grid');

grid.canSort=function(col){

if(Math.abs(col)==3){

return true;

}else{

return false;

}

}

grid.startup();

}else{

var objectStore2=new dojo.data.ObjectStore({objectStore:new dojo.store.Memory({data:jdata})});

pdatagrid.store=objectStore2;

//pdatagrid.store.revert();

//pdatagrid.setStore(objectStore2);

//pdatagrid.render();

//pdatagrid.update();

pdatagrid._refresh();

}

 

var option={

title:{

text:'总规用地统计'

},

tooltip:{

trigger:'item',

formatter:"{a}<br/>{b}"

},

legend:{

type:'scroll',

orient:'vertical',

right:10,

top:20,

bottom:20,

data:legendData

},

series:[

{

name:"用地性质",

type:'pie',

radius:'55%',

center:['40%','50%'],

data:seriesData,

itemStyle:{

emphasis:{

shadowBlur:10,

shadowOffsetX:0,

shadowColor:'rgba(0,0,0,0.5)'

}

}

}

]

};

 

//初始化echart实例

var myChart=echart.init(document.getElementById("zgstatic_chart"));

//使用制定的配置项和数据显示图表

myChart.setOption(option);

// //在节点内创建图表

// var colChart=new Chart("zgstatic_chart");

 

// //设置主题

// colChart.setTheme(theme);

// //添加only/default plot

// colChart.addPlot("default",{

// type:PiePlot,

// //markers:true,

// //gap:5,

// //font:"normal normal bold 8pt Tahoma",

// fontColor:"black",

// radius:200,

// //labelOffset:-30,

// labelStyle:"columns",

// labelWiring:"black"

// });

//添加坐标轴

//colChart.addAxis("x",{labels:colLabel});

//colChart.addAxis("y",{vertical:true,fixLower:"major",fixUpper:"major"});

//添加series

//colChart.addSeries("January",colData,{stroke:{color:"steelblue"},fill:"steelblue"});

//var anim1=new dojox.charting.action2d.Highlight(colChart,"default",{highlight:"lightskyblue"});

//var anim2=new dojox.charting.action2d.Tooltip(colChart,"default");

//colChart.addSeries("总规用地统计",pieData);

//添加特殊效果与信息

// var animMoveSlice = new dojox.charting.action2d.MoveSlice(colChart, "default");

// var animHighlightSlice = new dojox.charting.action2d.Highlight(colChart, "default");

// var animSliceTooltip = new dojox.charting.action2d.Tooltip(colChart, "default");

//渲染图表

//colChart.render();

dijit.byId("zgs").domNode.style.display="block";

document.getElementById("zgstatic_chart").style.display="block";

this.taDialog.show();

}));

 

});