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);}}