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

最新推荐文章于 2015-09-24 08:11:00 发布

小新8

最新推荐文章于 2015-09-24 08:11:00 发布

阅读量6.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： extjs4 文章标签： extjs4 java

本文链接：https://blog.youkuaiyun.com/u011439289/article/details/26365115

本文介绍如何使用ExtJS4从Java后台获取数据并动态显示图表。遇到的问题是，当直接从数据库获取数据时，图表无法正常显示。经过研究发现，原因是后台返回的JSON数据格式不正确。解决办法是将数据以数组形式组织，而不是键值对。调整Java代码后，返回的JSON数据格式变为数组，最终成功显示图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目，需要搞一个图表，从后台的数据库中统计出数据再传到前台来。搞了几个钟头，都不能实现功能。数据是传到了前台，可是图表总是显示不了，如果用静态数据的话，图表显示成功。上网查了很多资料，这方面的资料也不错，看来大家出现这个问题不多，那么就应该很好解决的。看了有同样问题的网页，有的说是是数据还没有加载到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);
                    }