一、创建一个bean，取名Info

Public class Info {
 private String name;
 private int count;

 public String getName() {
 return name;
 }

 public void setName(String name) {
 this.name = name;
 }

 public int getCount() {
 return count;
 }

 public void setCount(int count) {
 this.count = count;
 }

 public Info(String name,int count) {
 this.name = name;
 this.count = count;
 }

 public Info() {
 }
}

二、创建一个dao，取名InfoDao

@H_502_137@public class InfoDao extends BaseDao{
 /**  * 获取材料信息统计  * @return  */  public ArrayList<Info> getInfoForMaterial(){
 ArrayList<Info> infos = new ArrayList<Info>();
 Connection con = null;
 PreparedStatement psmt = null;
 ResultSet rs = null;

 try{
 con = super.getConnection();
 psmt =con.prepareStatement("SELECT cm.materialName,@H_502_137@COUNT(1) FROM cupmaterials AS cm INNER JOIN cups AS cu ON cm.materialId = cu.cupmaterialid GROUP BY cu.cupmaterialid");
 rs = psmt.executeQuery();
 while(rs.next()){
 String name = rs.getString(1);
 int count = rs.getInt(2);
 Info info = new Info(name,count);
 infos.add(info);
 }
 }catch (Exception ex){
 System.@H_502_137@out.print("加载材质统计信息失败，原因是："+ex.getMessage());
 }finally {
 super.closeAll(rs,psmt,con);
 }
 return infos;
 }

三、在jsp页面：<canvasid="myChart-material" width="200" height="200"></canvas>

四、Servlet：

@H_502_137@request.setCharacterEncoding("utf-8");

@H_502_137@ ArrayList<Info> infos=newInfoDao().getInfoForCharacter();

@H_502_137@ String result=newJSONArray(infos).toString();

@H_502_137@

@H_502_137@response.setContentType("text/plain;charset=utf-8");

@H_502_137@response.setCharacterEncoding("utf-8");

@H_502_137@ PrintWriter out = response.getWriter();

@H_502_137@ out.print(result);

五、js部分：

@H_502_137@//产生随机色************************************************************************* function @H_502_137@randomColor(){
 @H_502_137@//颜色字符串  var colorStr="";
 @H_502_137@//字符串的每一字符的范围  var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
 @H_502_137@//产生一个六位的字符串  for(var i=0;i<6;i++){
 @H_502_137@//15是范围上限，0是范围下限，两个函数保证产生出来的随机数是整数  colorStr+=randomArr[Math.@H_502_137@ceil(Math.@H_502_137@random()*(15-0)+0)];
 }
 return colorStr;
}

@H_502_137@//页面加载时调用函数************************************************** $(function(){
 @H_502_137@materialInfo()；
});

function @H_502_137@materialInfo(){
 @H_502_137@$.get(
 'getInfoForMaterial.do',function(result){
 var arr=[];
 for(var i = 0;i<result.length;i++){
 var json = {};
 json.value = result[i].count;
 json.color = "#"+@H_502_137@randomColor();
 json.highlight ="#"+@H_502_137@randomColor();
 json.label=result[i].name;
 arr.push(json);
 }
 var pieData = arr;

 var ctx = document.getElementById("myChart-material").getContext("2d");
 window.myPie = new @H_502_137@Chart(ctx).Pie(pieData,{
 @H_502_137@//responsive : true  });
 myPie.defaults = {
 segmentShowStroke : true,segmentStrokeColor : "#fff",segmentStrokeWidth : 2,animation : true,animationSteps : 100,animationEasing : "eaSEOutBounce",animateRotate : true,animateScale : false,onAnimationComplete : null  };
 },'json'  );
}

-------------------张成