您的位置：首页 > 编程语言 > Java开发

EXT Java 后台获取数据生成饼状图

2015-12-31 09:37 661 查看

         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+"/";

       %>

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Access-Control-Allow-Origin" content="*" />

                 <link rel="stylesheet" type="text/css" href="<%=path%>/jsframe/ext-4.2.1.883/resources/css/ext-all.css" />

                 <script type="text/javascript" src="<%=path%>/jsframe/ext-4.2.1.883/ext-all.js"></script>

                 <script type="text/javascript" src="<%=path%>/jsframe/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>

                  <script type="text/javascript" src="<%=path%>/grid/populationStat/populationStat.js"></script>

    <link href="<%=path%>/css/common/jquery-ui-1.8.21.custom.css"

                  type="text/css" rel="stylesheet" />

     </script></head>

     <body>

                 <div id="container" /></div>

    </body>

     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
4000
.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是没有问题的，但是对于中文就会出现乱码问题，就是很多的小方格，那么怎么解决呢。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ext java 饼状图后台获取数据

相关文章推荐

新的分享

章节导航