dojo.Chart2D----Pie chart

大佬教程收集整理的这篇文章主要介绍了dojo.Chart2D----Pie chart，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

本机运行环境描述：@H_696_1@

WinXp Sp3@H_696_1@

apache2.2 @H_696_1@

FF3.6 IE8@H_696_1@

dojo Kernel 1.4.2@H_696_1@

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

导入的包：@H_696_1@

<mce:script src="../../../dojoroot/dojo/dojo.js" mce_src="dojoroot/dojo/dojo.js" djCon<a href="http://code.js-code.com/tag/fig/" target="_blank" class="keywords">fig</a>="isDebug: <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se,par<a href="http://code.js-code.com/tag/SEO/" title="SEO">SEO</a>nLoad: true"></mce:script> <script> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.Chart2D"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.plot2d.Pie"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.action2d.Highlight"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.action2d.MoveSlice"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.action2d.Tooltip"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.theme<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>MiamiNice"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.widget.Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojo.data.ItemFileWriteStore"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dijit.for<a href="http://code.js-code.com/tag/m/" target="_blank" class="keywords">m.</a><a href="http://code.js-code.com/tag/numb/" target="_blank" class="keywords">numb</a>erSpinner"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.theme<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>PlotKit<a href="http://code.js-code.com/tag/b/" target="_blank" class="keywords">.b</a>lue"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> @H_696_1@

Javascript@H_696_1@

dojo.xhr('POST',<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> url:'ips_main.<a href="http://code.js-code.com/tag/PHP/" target="_blank" class="keywords">PHP</a>',sync:true,handleAs :'json',content:<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> test<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>23 },load:function(respons<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a><a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> store = new dojo.data.ItemFileReadStore(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>data<a href="http://code.js-code.com/tag/r/" target="_blank" class="keywords">:r</a>espons<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E}</a><a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> store = response.items; },error:function(error)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> } }<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> var dc = dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g; var chartOne = new dc.Chart2D("pie"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> chartOne.setTheme(dc.theme<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>MiamiNic<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>.addPlot("default",<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> type: "Pie",font: "normal normal 11pt Tahoma",fontColor: "black",labelOffset: -30,radius: 100 }).addSeries("Series A",stor<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>; var anim_a = new dc.action2d.MoveSlice(chartOne,"default"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> var anim_b = new dc.action2d.Highlight(chartOne,"default"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> var anim_c = new dc.action2d.Tooltip(chartOne,"default"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> chartOne.render(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> var le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>Two = new dojox.char<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g.widget.Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> chart: chartOne },"pie_le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> @H_696_1@

HTML代码：@H_696_1@

<body class="tundra"> <div id="charts"> <div class="chart-area"> <div id="pie_le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>"></div> <div id="pie" class="chart"></div> </div> </div> </body> @H_696_1@

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

<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>'identifier':'id','idAttribute':'id','label':'id','items':[<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>'id':'@R_835_1<a href="http://code.js-code.com/tag/058/" target="_blank" class="keywords">058</a>6@l','sennum'<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>,'sen@R_835_1<a href="http://code.js-code.com/tag/058/" target="_blank" class="keywords">058</a>6@l'<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>,'uniquealert':7,'classnum'<a href="http://code.js-code.com/tag/4/" target="_blank" class="keywords">:4</a>,'@R_835_1<a href="http://code.js-code.com/tag/058/" target="_blank" class="keywords">058</a>6@lnumalert'<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>5471,'<a href="http://code.js-code.com/tag/sourc/" target="_blank" class="keywords">sourc</a>eipcnt':8,'destipcnt':3,'uniqueiplink':9,'<a href="http://code.js-code.com/tag/sourc/" target="_blank" class="keywords">sourc</a>eportscnt':261,'destportscnt'<a href="http://code.js-code.com/tag/4/" target="_blank" class="keywords">:4</a>,'tcp<a href="http://code.js-code.com/tag/sourc/" target="_blank" class="keywords">sourc</a>eportcnt':261,'tcpdestportcnt'<a href="http://code.js-code.com/tag/4/" target="_blank" class="keywords">:4</a>,'udp<a href="http://code.js-code.com/tag/sourc/" target="_blank" class="keywords">sourc</a>eportcnt':0,'udpdestportcnt':0}]} @H_696_1@

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

这里不多说了，查看附件@H_696_1@

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

大佬总结

以上是大佬教程为你收集整理的dojo.Chart2D----Pie chart全部内容，希望文章能够帮你解决dojo.Chart2D----Pie chart所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。