dojo.chart2d pie图表

本机运行环境描述:

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组件,以便于进行图片展示。

这里不多说了,查看附件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值