上篇文章为柱状图,这篇为饼状,主要是渲染的方式和构建JSON对象不同
WEB端:
/* 饼状图函数 */ /* 返回JSON对象必需类似于[[['name1',100],['name2',100]]],jqplot 自动换算成 name1:50%,name2:50% */ function createPieCharts(){ var ajaxDataRenderer = function (url,plot,options) { var ret = null; $.ajax({ async: false, url: url, dataType: "json", success: function (data) { ret =data; } }); return ret; }; var jsonurl = "/test/servlet/PieServlet"; var options = { seriesDefaults: { //饼状图渲染 renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, title : '饼状图数据显示', legend: { show:true,location: 'e'},//显示位置 dataRenderer: ajaxDataRenderer, dataRendererOptions: { unusedOptionalUrl: jsonurl} } var plot1 = jQuery.jqplot ('chart2',jsonurl,options); }
服务端:
response.setCharacterEncoding("UTF-8"); response.setContentType("text/html"); JSONArray list = new JSONArray(); JSONArray members = new JSONArray(); PrintWriter out= response.getWriter(); try { for(int i=1;i<5;i++){ JSONArray member = new JSONArray(); member.put("张飞" + i); member.put(i *100); members.put(member); } list.put(members); out.write(list.toString()); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } out.flush(); out.close();
图片:
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|