首页 > 代码库 > Extjs 4 生成饼状图实例

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

	}

}