Extjs 4 生成饼状图实例
前台:
//远程读取设备去向图表数据 var Store1 = new Ext.data.Store({ <span style="white-space:pre"> </span>proxy:{ <span style="white-space:pre"> </span>type:'ajax', <span style="white-space:pre"> </span>url:'/newmaterial/servlet/GetCountChartGoDatas', <span style="white-space:pre"> </span>reader:{ <span style="white-space:pre"> </span>type:'array' <span style="white-space:pre"> </span>}<span style="white-space:pre"> </span> <span style="white-space:pre"> </span>}, <span style="white-space:pre"> </span>fields:[ <span style="white-space:pre"> </span>"System", <span style="white-space:pre"> </span>{name:"Share",type:"float"} <span style="white-space:pre"> </span>] }); Store1.load(); var mychart1 = new Ext.chart.Chart({ <span style="white-space:pre"> </span>store:Store1, <span style="white-space:pre"> </span>title:'全部物料去向概览', <span style="white-space:pre"> </span>width:500, <span style="white-space:pre"> </span>height:500, <span style="white-space:pre"> </span>insetPadding:50, <span style="white-space:pre"> </span>legend:{position:"right"}, <span style="white-space:pre"> </span>series:[{ <span style="white-space:pre"> </span>type:'pie', <span style="white-space:pre"> </span>field:'Share', <span style="white-space:pre"> </span>showInLegend:true, <span style="white-space:pre"> </span>highlight:{ <span style="white-space:pre"> </span>segment:{margin:20} <span style="white-space:pre"> </span>}, <span style="white-space:pre"> </span>label:{ <span style="white-space:pre"> </span>field:'System', <span style="white-space:pre"> </span>display:'rotate', <span style="white-space:pre"> </span>contrast:true <span style="white-space:pre"> </span>}, <span style="white-space:pre"> </span>tips:{ <span style="white-space:pre"> </span>trackMouse:true, <span style="white-space:pre"> </span>renderer:function(rec,item){ <span style="white-space:pre"> </span>this.update(rec.get("System")+':'+rec.get("Share")+'%'); <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>}] });
后台:
public class GetCountChartGoDatas extends HttpServlet { /** * @Fields serialVersionUID : */ private static final long serialVersionUID = 1L; /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request * the request send by the client to the server * @param response * the response send by the server to the client * @throws ServletException * if an error occurred * @throws IOException * if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html"); StringBuffer sb = new StringBuffer(); NowmaterialDAO nmd = new NowmaterialDAO(); MaterialDAO md = new MaterialDAO(); List getlist = nmd.getSession().createCriteria(Nowmaterial.class) .setProjection( Projections.projectionList() .add(Projections.rowCount()).add( Projections.groupProperty("material.msCode"))) .list(); int total = 0; for (int i = 0; i < getlist.size(); i++) { Object[] row = (Object[]) getlist.get(i); total = total + Integer.parseInt(row[0].toString()); } response.setCharacterEncoding("utf-8"); sb.append("["); for (int i = 0; i < getlist.size(); i++) { Object[] row = (Object[]) getlist.get(i); List<Material> getonelist = md.findByProperty("msCode", row[1]); sb.append("['" + getonelist.get(0).getMsName() + "'," + Float.parseFloat(row[0].toString()) + "],"); } sb.append("]"); int qu = sb.lastIndexOf(","); sb.deleteCharAt(qu); response.getWriter().print(sb.toString()); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to * post. * * @param request * the request send by the client to the server * @param response * the response send by the server to the client * @throws ServletException * if an error occurred * @throws IOException * if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。