dojo.Chart2D----Pie chart

最新推荐文章于 2017-06-08 13:31:00 发布

BingDuang

最新推荐文章于 2017-06-08 13:31:00 发布

阅读量2.7k

点赞数

分类专栏： dojo 文章标签： dojo class function charts javascript div

本文链接：https://blog.csdn.net/Icecream0/article/details/6166868

版权

dojo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本机运行环境描述：

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