EXTJava后台获取数据生成饼状图

         Ext 做成各种图形是一个很好使的工具，以前没有接触过，现在因为工作，需要用他来做各种图。看过官方的demo和网上各位达人提供的例子，数据来源都是固定数据，

现在根据我的经验来分享下我从后台获取数据的经验：

        web前端：jsp

        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
        <%@ page language="java" cOntentType="text/html; charset=UTF-8"
                             pageEncoding="UTF-8"%>

       <%
                 String path = this.getServletContext().getContextPath();
                String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
       %>
     
     
     
      
                  /jsframe/ext-4.2.1.883/resources/css/ext-all.css" />
                  
                  
                  
      /css/common/jquery-ui-1.8.21.custom.css"
                  type="text/css" rel="stylesheet" />

     web前端：js

    
Ext.onReady(function () {
 //让Extjs 的Chart.save 切换到新的服务器
 Ext.draw.engine.ImageExporter.defaultUrl = 'ImageExportService';
 
 var orgName='';
 var commDataStore = new Ext.data.Store({
   autoLoad:true,
   proxy : new Ext.data.HttpProxy({
   url: path + '/popuStatAction!popuInfoFromCommuList.action?ac='+ Math.random(),
   method : 'GET',
   reader: new Ext.data.JsonReader({
             root: 'message'
         })
   }),
  
        fields: [
                 {name:'count',type:'int'},
                 {name:'orgCode',type:'string'},
                 {name:'orgName',type:'string'}
                ]
 });
 
 
 var chart = new Ext.chart.Chart({ 
  xtype: 'chart',
  width: 700,    
  height: 600,    
  store: commDataStore, 
  animate: true, 
  shadow: false,//一定会关闭阴影，否则拼饼突出的时候很不好看。
  legend: {
            position: 'right'
        },
  series: [{        
   type: 'pie',        
   field: 'count',
   showInLegend: true,//显示名称列表
   donut: false,//圆中空圈显示（如果显示给出数字）
   tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                  //calculate percentage.
                  var total = 0;
                  commDataStore.each(function(rec) {
                      total += rec.get('count');
                  });
                  this.setTitle(storeItem.get('orgName') + ': ' + Math.round(storeItem.get('count') / total * 100) + '%');
                }
              },
              listeners: { 
               itemclick: function(o) { 
                var rec = commDataStore.getAt(o.index);
                var orgCode = rec.get('orgCode');
                orgName = rec.get('orgName');
                
                //peopleKindStore.proxy.url  =  path + '/popuStatAction!popuInfoFromTypeList.action?orgCode='+orgCode+'&ac='+ Math.random();
                //peopleKindStore.load();
               } 
            },
   label: {//这里能够使拼饼上面显示，该拼饼属于的部分            
    field: 'orgName',            
    display: 'rotate',
    contrast: true,          
    font: '18px Arial'       
    },        
   highlight: {//这里是突出效果的声明，margin越大，鼠标悬停在拼饼上面，拼饼突出得越多            
    segment: {                
     margin: 20           
     }        
    }       
    
   }]
 });
 
 var panel1 = Ext.create('widget.panel', {
        width: 700,
        height: 600,
        title: '饼状图',
        renderTo: 'container',
        layout: 'fit',
        tbar: [{
            text: '保存为图片',
            handler: function() {
                Ext.MessageBox.confirm('确定下载', '是否保存为图片?', function(choice){
                    if(choice == 'yes'){
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }
//       , {
//            text: '刷新',
//            handler: function() {
//                // Add a short delay to prevent fast sequential clicks
//                window.loadTask.delay(100, function() {
//                    store1.loadData(generateData(6, 20));
//                });
//            }
//        }
        , {
            enableToggle: true,
            pressed: false,
            text: '圆环图',
            toggleHandler: function(btn, pressed) {
                chart.series.first().dOnut= pressed ? 35 : false;
                chart.refresh();
            }
        }],
        items: chart
    });
});

后台数据获取：

public void popuInfoFromCommuList(){
  String commPeopleList = JsonUtil.toJson(getRequest().getSession().getAttribute("commPeopleList")).toString();
  outJSON(commPeopleList,true);
 }

/**
  * 输出json信息
  * @param message
  * @throws Exception
  */
 public void outJSON(String message,boolean flag)
 {
  HttpServletResponse respOnse=this.getResponse();
  response.setContentType("text/json;charset=UTF-8");
  PrintWriter out=null;
  try {
   out=response.getWriter();
   JSONObject json=new JSONObject();
   json.put("success", flag);
   json.put("message", message);
   out.write(json.toString());
   out.flush();
   
  } catch (Exception e) {
   e.printStackTrace();
  }
  finally
  {
   if(out!=null)
   {
    out.close();
   }
  }

 }

后台数据格式：

{
 "success":true,
 "message":[
    {"count":7115,"orgCode":"1001001","orgName":"社区A"},
    {"count":6712,"orgCode":"1001002","orgName":"社区B"}
   ]
}

最主要的是前端的store设置和后台的数据格式一致，那么饼图就出现了。

注意：EXT自带的有save方法，对于一般的数字，英文字符等save是没有问题的，但是对于中文就会出现乱码问题，就是很多的小方格，那么怎么解决呢。

收藏有以为达人的解决方法，已验证，很好使。