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

	}

}

Extjs 4 生成饼状图实例