本机运行环境描述:
WinXP sp3
apache2.2
FF3.6 IE8
dojo Kernel 1.4.2
dojo1.4.3以后,所有组建均带有test包,所以可以直接运行例子进行查看。但是1.4.2版本没有官方的test,经过项目的研究以及各方资料,现在总结。代码如下
导入的包:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Basic Analysis and Security Engine (BASE) 1.4.4 (dawn) -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<style>
@import "../../../dojoroot/dojo/resources/dojo.css";
@import "../../../dojoroot/dijit/themes/dijit.css";
@import "../../../dojoroot/dijit/themes/tundra/tundra.css";
#spinners {
clear:both;
}
#spinners label {
width:60px;
line-height:30px;
margin-top:10px;
}
.tundra #spinners .dijitSpinner {
width:70px !important;
margin:5px !important;
}
.tundra #spinners .dijitSpinner {
width:80px !important;
}
.dijitSpinner {
padding:0px !important;
}
#spinners .dijitSpinnerButtonContainer {
line-height:23px;
}
.dj_ie #spinners .dijitSpinnerButtonContainer {
height:25px;
}
.dijitInputLayoutContainer .dijitInputField input {
padding:5px 0px 0px 5px;
}
.dj_webkit .dijitInputLayoutContainer .dijitInputField input {
padding:10px 0px 0px 5px;
}
.dojoxLegendNode {
border: 1px solid #ccc;
margin: 5px 10px 5px 10px;
padding: 3px;
}
.dojoxLegendText {
vertical-align: text-top;
padding-right: 10px
}
#charts {
clear: both;
margin-bottom: 50px;
}
.chart-area {
float: left;
border: 1px solid #ccc;
width: 450px;
height: 350px;
margin: 3px;
}
.chart {
width: 450px;
height: 300px;
}
</style>
<script src="../../../dojoroot/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script>
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.plot2d.Pie");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.themes.MiamiNice");
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dojox.charting.themes.PlotKit.blue");
var store;
dojo.addOnLoad(function() {
dojo.xhr('GET',{
url:'ips_time.php',
sync:true,
handleAs :'text',
content:{
test:123
},
load:function(response ,ioArgs){
document.getElementById("ipstital").innerHTML = response;
},
error:function(error){
}
});
dojo.xhr('POST',{
url:'ips_main.php',//你的后端数据源
sync:true, //是否开启同步
handleAs :'json', //得到的数据格式,如果返回为text或者html,则这里使用text,如果返回的是json,这里需要写成json
load:function(response){
store = new dojo.data.ItemFileReadStore({data:response}); //使用dojo的ItemFileReadStore方法进行格式化对象
store = response.items; //得到其中的数据项
},
error:function(error){
}
});
/*
数据格式:
{'identifier':'id','idAttribute':'id','label':'id','items':[{'id':'total','sennum':1,'sentotal':1,'uniquealert':7,'classnum':4,'totalnumalert':15471,'sourceipcnt':8,'destipcnt':3,'uniqueiplink':9,'sourceportscnt':261,'destportscnt':4,'tcpsourceportcnt':261,'tcpdestportcnt':4,'udpsourceportcnt':0,'udpdestportcnt':0}]}
*/
var dc = dojox.charting;
var chartOne = new dc.Chart2D("pie");
chartOne.setTheme(dc.themes.MiamiNice).addPlot("default", {
type: "Pie",
font: "normal normal 11pt Tahoma",
fontColor: "black",
labelOffset: -30,
radius: 100
}).addSeries("Series A", store); //将ajax中得到的数据项赋值给pie图
var anim_a = new dc.action2d.MoveSlice(chartOne, "default");
var anim_b = new dc.action2d.Highlight(chartOne, "default");
var anim_c = new dc.action2d.Tooltip(chartOne, "default");
chartOne.render();
var legendTwo = new dojox.charting.widget.Legend({
chart: chartOne
},
"pie_legend");
});
</script>
</head>
<body class="tundra">
<table>
<tr>
<td><div id="charts">
<div class="chart-area">
<div id="pie_legend"></div>
<div id="pie" class="chart"></div>
</div>
</div></td>
</tr>
</table>
</body>
</html>
得到以后,手动的设置chart的store组件,以便于进行图片展示。
这里不多说了,查看附件