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

最新推荐文章于 2022-12-26 13:47:41 发布

cq_china

最新推荐文章于 2022-12-26 13:47:41 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/cq_china/article/details/50439649

版权

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>

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

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

cq_china

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EXT Java 后台获取数据生成饼状图

Ext 做成各种图形是一个很好使的工具，以前没有接触过，现在因为工作，需要用他来做各种图。看过官方的demo和网上各位达人提供的例子，数据来源都是固定数据，现在根据我的经验来分享下我从后台获取数据的经验：
复制链接

扫一扫