小新新的专栏

博览众java技术,方能成为技术帝!

Extjs4 动态生成图表chart(从后台传数据动态显示)

做项目,需要搞一个图表,从后台的数据库中统计出数据再传到前台来。搞了几个钟头,都不能实现功能。数据是传到了前台,可是图表总是显示不了,如果用静态数据的话,图表显示成功。上网查了很多资料,这方面的资料也不错,看来大家出现这个问题不多,那么就应该很好解决的。看了有同样问题的网页,有的说是是数据还没有加载到Store里面,图表就生成了,没有数据,所以没有显示,因此我又搞了个数据加载成功的回调函数,还是只出现一个小框框!在网上实在找不到解决的办法,只能自己研究了。观察了静态数据的显示,内容是这样的:

var pieRoomTypeStore = Ext.create('Ext.data.ArrayStore',{
    id:'pieRoomTypeStore',
    fields: [
        {name: 'roomtype', type: 'string'},
        {name: 'numberdata', type: 'int'}
    ],
    data:[
        ['单人间',1],
        ['标准间',1]
    ]
});

data里面是数组组织的数据。难道后台也要传这样格式的数据?加载grid面板的时候没有这个要求啊!

原先,后台是写成这样的:

     /**
     * 各种房间类型的数目
     * @return
     */
    @RequestMapping("/getRoomTypeNumber")
    @ResponseBody
    public Map<String,Object> getRoomTypeNumber(){
        Map<String,Object> outmap = new HashMap<String, Object>();
        Map<String,Object> map = new HashMap<String, Object>();
        short s ;
        int num ;
        for (int i = 1; i < 6; i++) {
            switch (i){
                case 1:
                    s = 1;
                    num = roomService.getRoomTypeNumber(s);
                    if (num > 0){
                        map.put("单人间",num);
                    }
                    break;
                case 2:
                    s = 2;
                    num = roomService.getRoomTypeNumber(s);
                    if (num > 0){
                        map.put("标准间",num);
                    }
                    break;
                case 3:
                    s = 3;
                    num = roomService.getRoomTypeNumber(s);
                    if (num > 0){
                        map.put("豪华间",num);
                    }
                    break;
                case 4:
                    s = 4;
                    num = roomService.getRoomTypeNumber(s);
                    if (num > 0){
                        map.put("超级豪华间",num);
                    }
                    break;
                case 5:
                    s = 5;
                    num = roomService.getRoomTypeNumber(s);
                    if (num > 0){
                        map.put("总统套房",num);
                    }
                    break;
            }
        }
        outmap.put("data",map);
        return outmap;
  }

那么传到前台的json数据就是:

{"data":{"单人间":1,"标准间":1}}

显示成这样:



完全无法显示图表!!

 

怀疑真的是json数据的格式不符合要求而造成的,那么,后台应该怎么写呢?应该写成传过来的是数组包裹的数据!


Java代码:

      /**
       * 各种房间类型的数目
       * @return
       */
      @RequestMapping("/getRoomTypeNumber")
      @ResponseBody
      public Map<String,Object> getRoomTypeNumber(){
          Map<String,Object> outmap = new HashMap<String, Object>();
          Map<String,Object> map = null ;
          List<Map<String,Object>> list = new ArrayList<Map<String, Object>>();
          short s ;
          int num ;
          for (int i = 1; i < 6; i++) {
              map = new HashMap<String, Object>();
              switch (i){
                  case 1:
                      s = 1;
                      num = roomService.getRoomTypeNumber(s);
                      if (num > 0){
                          map.put("roomtype","单人间");
                          map.put("numberdata",num);
                          list.add(map);
                      }
                      break;
                  case 2:
                      s = 2;
                      num = roomService.getRoomTypeNumber(s);
                      if (num > 0){
                          map.put("roomtype","标准间");
                          map.put("numberdata",num);
                          list.add(map);
                      }
                      break;
                  case 3:
                      s = 3;
                      num = roomService.getRoomTypeNumber(s);
                      if (num > 0){
                          map.put("roomtype","豪华间");
                          map.put("numberdata",num);
                          list.add(map);
                      }
                      break;
                  case 4:
                      s = 4;
                      num = roomService.getRoomTypeNumber(s);
                      if (num > 0){
                          map.put("roomtype","超级豪华间");
                          map.put("numberdata",num);
                          list.add(map);
                      }
                      break;
                  case 5:
                      s = 5;
                      num = roomService.getRoomTypeNumber(s);
                      if (num > 0){
                          map.put("roomtype","总统套房");
                          map.put("numberdata",num);
                          list.add(map);
                      }
                      break;
              }
          }
          outmap.put("data",list);
          return outmap;
      }

传到前台的json数据为:

{"data":[{"roomtype":"豪华间","numberdata":1},{"roomtype":"豪华间","numberdata":1},{"roomtype":"豪华间","numberdata":1}]}

显示出了成功的图表:

顺便把前台的Extjs代码也贴出来吧!

Ext.define('RoomType',{
    extend:'Ext.data.Model',
    fields:[
        {name: 'roomtype', mapping:'roomtype',type: 'string'},
        {name: 'numberdata', mapping:'numberdata',type: 'int'}
    ]
})

//客房类型
var pieRoomTypeStore = Ext.create('Ext.data.Store', {
    storeId: 'pieRoomTypeStore',
    model:'RoomType',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/room/getRoomTypeNumber',
        reader: {
            type: 'json',
            root: 'data'
        }
    },
    baseParams:{
        chart:'chart'
    }
});

var chart = Ext.create('Ext.chart.Chart',{
    store:pieRoomTypeStore,
    animate: true,
    id:'chart',
    width:420,
    height:200,
    insetPadding:30,
    legend:{position:'right'},
    series:[
        {
            type:'pie',
            field:'numberdata',
            showInLegend:true,
            highlight:{segment:{margin:20}},
            tips: {
                trackMouse: true,
  width: 100,
                renderer: function(storeItem, item) {
                    var total = 0;
                    pieRoomTypeStore.each(function(rec) {
                        total += rec.get('numberdata');
                    });
                    this.setTitle(storeItem.get('roomtype') + ': ' + Math.round(storeItem.get('numberdata') / total * 100) + '%');
                }
            },
            label: {
                field: 'roomtype',
                display: 'rotate',
                contrast: true
            }
        }
    ]
});


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011439289/article/details/26365115
文章标签: extjs4 java
个人分类: extjs4
上一篇mongodb的安装使用(windows版本)
下一篇Extjs4 表单id值相同会造成界面混乱
想对作者说点什么? 我来说一句

Extjs4.2 Chart柱状图

2017年02月24日 410KB 下载

extjs—chart柱形图 例子

2011年12月16日 3KB 下载

没有更多推荐了,返回首页

关闭
关闭