FusionCharts动态获取后台json数据 页面显示

    最近项目中有的需求需要用到报表统计 用到了FusionCharts这款插件，刚刚开始时也是一头雾水,去网上找资料看demo,可网上的大部分都是静态数据,所以自已仔细研究了一个通宵,现虽说不上精通,但总算能用它来做项目完成我的需求了,所以今天将代码贴出来


由于本人做的不是小demo示例,而是项目,所以代码量会比较多,为了代码的可读性我就只把需求用到的部分代码贴出来


后台代码:


  本人项目用的是SpringMvc Mybatis struts2 前台请求访问的是这个方法,这个方法目的就是给前台返回需要显示数据的健值对key/value,当然得是json

/**     * 此方法返回统计图所对应的数据     */    public String getDataStatistics(){                SessionAdminUser sessionUser = (SessionAdminUser) this.getSessionUser(Constant.Session_AdminInfo);        //查询条件        whereInfo.addQuery(DUnitInfoExample.Data_SaiId, sessionUser.getSaiId());        whereInfo.addQuery(DUnitInfoExample.Data_MuiId,sessionUser.getMuiId());        whereInfo.addOrder(DUnitInfoExample.Field_DuiRate1,Order.OrderDESC);                List<DUnitInfo> list = unitInfoService.selectByWhere(whereInfo);                // 存储数据库返回所有单位<只包含页面所需字段/数据>的list集合        List<Map<String, Object>> pageDataList = new ArrayList<Map<String, Object>>();                if(null != list && list.size() > 0){                        for (int i = 0; i < list.size(); i++) {                                DUnitInfo info = list.get(i);                DecimalFormat    mat   = new DecimalFormat("######0.0");                   double dou = Double.parseDouble(info.getDuiRate1()) * 100;                info.setDuiRate1(mat.format(dou));                                //存储每个单位完成度的map集合 key:单位名称 value:单位完成度                Map<String, Object> pageDataMap=new HashMap<String, Object>();                               pageDataMap.put("label",list.get(i).getDuiName());                pageDataMap.put("value",list.get(i).getDuiRate1());                                pageDataList.add(pageDataMap);    //    将所有map全部放入list集合                            }        }        this.dataGridJson.setRows(pageDataList);        return Constant.Struts_JsonForword_DataGrid;    }

后台我就不多概况了,因为这个是项目好多方法是在基类里面封装了的,

只要知到这个方法就是把所需要数据的健值对给前台就行了

然后回到前台

在前台通过浏览器的控制台 按F12可以看到我们后台返回的数据及发出的请求 如下图:

到这也就说明后台的数据返回并成功被前台接收

前台jsp代码 用的是Easyui框架

    <table id="dataGrid" title="消防档案完成度统计图"></table>    <!-- 显示统计图形表格 -->    <div id="dataWinChart"></div>

前台jsp很简单,就是定义一个div窗口,给它一个id 让它来装统计图表的结果

js代码

//装统计图表格的容器function initDataWin(){    $('#dataWinChart').window({        iconCls : 'icon-save',        width : 750,        height: 450,        modal : true,        shadow : true,        closed : true,        closable : true,        fit : false,        minimizable : false,        maximizable : false,        collapsible : false,        resizable : false    });}

js核心代码

/** * 增加条形统计和饼状统计的查看按钮 */function dataGridToolbar(){  //此方法只是增加两个按钮,你也可以用其它方法增加按钮    return [ {        iconCls : 'icon-edit',        text : '条形统计图',        plain : true,        handler : function(){        //2d图形            showFigure(0);        }    },'-',{        iconCls : 'icon-edit',        text : '饼状统计图',        plain : true,        handler :  function(){    //    3d图形            showFigure(1);        }    } ];}/** * 统计图弹窗 */function showFigure(value){        if($('#dataGrid').datagrid('getData').rows.length<=0){        $.messager.alert('系统信息', '查询结果中无数据，请查询到数据后再查看统计图！', 'error');        return;    }        $('#dataWinChart').window('open');    $('#dataWinChart').window('center');        if(value==0){        $('#dataWinChart').window('setTitle', '条形统计图');    var    figure="Column2D";        //条形统计图效果        statisticalFigure(value,figure);    }else{        $('#dataWinChart').window('setTitle', '饼状统计图');    var figure="pie3d";                //饼状统计图效果        statisticalFigure(value,figure);    }}/** * 统计图数据获取 */function statisticalFigure(value,figure){        $.messager.progress({ msg : '处理中，请稍后...' });        var queryParams=getDataGridParams();    $.ajax({        type : 'POST',        data : queryParams,        url : path + '/adminJson/workUnit_getDataStatistics',        dataType : 'json',        success : function(data) {                        /**动态显示单位名称,若单位数量<=7个则显示名称,否则将名称隐藏                说明:单位太多若全部显示名称会严重影响页面美观*/            var showName = '0';                        /**动态设置统计图宽度*/            var width = data.rows.length * 100;                          /**若动态设置的宽度小于默认宽度,或打开的是饼状统计图,则将宽度设置为默认宽度735*/            if(width < 735 || value == 1){                 width = 735;                 showName = '1';            }                        /**高度为父元素window窗口的高度*/            var height = '100%';                        /**设置统计图表的相关属性存入map*/            var chartDataMap ={                     'caption':'消防档案完成度统计图',                     'formatnumberscale':'1',                     'showBorder':'1',                     'showpercentvalues':'1',                     'pieslicedepth':'30',                     'numberSuffix':'%',                     'yAxisMinValue':'10',                     'yAxisMaxValue':'100',//                     'xAxisName':'单位名称',//                     'yAxisName':'完成度百分比',                     "canvasbgColor": "#1790e1",                     "canvasbgAlpha": "10",                     "showCanvasBorder": "1",                     "showLabels": showName,//                     "labelDisplay": "rotate"//                     "labelDisplay": "auto"                     "toolTipSepChar":"：",                     "baseFontSize":"14"                         };                        //将后台返回的数据与前台设置好的统计图属性数据一起封装成map集合给FusionCharts解析            var showDataMap = {'data':data.rows,'chart':chartDataMap};                        var myChart = new FusionCharts(figure,"myChartId",width,height);                        myChart.setJSONData(showDataMap);                        //将对应的英文提换转为中文            myChart.configure("ChartNoDataText","没有查询到相关数据");            myChart.configure("LoadDataErrorText","加载数据出错啦!");            myChart.configure("XMLLoadingText","加载数据中...");            myChart.configure("InvalidXMLText","初始化...");            myChart.configure("ReadingDataText","读取数据...");            myChart.configure("ChartNotSupported","图表不支持");            myChart.configure("LoadingText","加载");                        myChart.render("dataWinChart");            $.messager.progress('close');        },        error : function() {            $.messager.progress('close');            $.messager.alert('系统信息', '网络故障，请检查网络情况。', 'error');        }    });}

最后在页面就会显示如下效果;

本人也是第一次接触这个插件,有好多东西自已也是模着石头过河,欢迎各位大神指点

本人QQ:554911540 微信同部

差点忘了最重要的一部,就是jsp引入fusionCharts.js插件