dojo.Chart2D----Pie chart

发布时间：2020-12-16 22:05:18 所属栏目：百科来源：网络整理

导读：本机运行环境描述： WinXP sp3 apache2.2 FF3.6 IE8 dojo Kernel 1.4.2 dojo1.4.3以后，所有组建均带有test包，所以可以直接运行例子进行查看。但是1.4.2版本没有官方的test，经过项目的研究以及各方资料，现在总结。代码如下导入的包： mce:script src="..

本机运行环境描述：

WinXP sp3

apache2.2

FF3.6 IE8

dojo Kernel 1.4.2

dojo1.4.3以后，所有组建均带有test包，所以可以直接运行例子进行查看。但是1.4.2版本没有官方的test，经过项目的研究以及各方资料，现在总结。代码如下

导入的包：

<mce:script src="../../../dojoroot/dojo/dojo.js" mce_src="dojoroot/dojo/dojo.js" djConfig="isDebug: false,parSEOnLoad: true"></mce: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");

Javascript

dojo.xhr('POST',{ url:'ips_main.php',sync:true,handleAs :'json',content:{ test:123 },load:function(response){ store = new dojo.data.ItemFileReadStore({data:response}); store = response.items; },error:function(error){ } }); 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); 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");

HTML代码：

javascript代码中，第一段的dojo的xhr请求向后台要求数据，数据格式如下：

{'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}]}

得到以后，手动的设置chart的store组件，以便于进行图片展示。

这里不多说了，查看附件

http://download.csdn.net/source/3005366

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!