dojo.chart2d pie图表

最新推荐文章于 2022-05-13 15:37:37 发布

iteye_1256

最新推荐文章于 2022-05-13 15:37:37 发布

阅读量167

点赞数

分类专栏： dojo 文章标签： Dojo json CSS PHP webkit

dojo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本机运行环境描述：

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

这里不多说了，查看附件