`
songbailove
  • 浏览: 9983 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jgcharts插件与ssh框架完美结合,实现动态生成报表及图表

阅读更多

转自:http://blog.163.com/ytrtfhj@126/blog/static/89053109201042633457665/

 

现在我们项目要用到extgrid插件、jgcharts与ssh框架结合,经过几天研究终于成功,现将过程及实现写入下面。

准备工作: 下载extgrid插件、jgcharts插件,这里我用到的extgrid插件为ext-3.2.1,经过精简得如下目录结构:

extgrid插件、jgcharts插件与ssh框架完美结合,实现动态生成报表及图表 - ytrtfhj@126 - 艾冰家园

 

其中图片自己从css中找出来用,以上只有extgrid-revise.js为自己写,其他在ext-3.2.1插件找。

至于jgcharts插件,网上下载个jia包放入工程下即可

将准备好的插件放入工程webRoot下,下面我们正式工作:

第一步:准备好ssh框架,这里框架主要是用到为前台提供json,我先写action  ,代码如下:

@ParentPackage("json-default")
@Results (
", name = "json"),
     @Result(name="success",type="chain",location="ext_grid")})
public class ExtGridAction extends ActionSupport{

      private List<Flexigrid> flexigridList;    //后台需要的list集合
      @Autowired
      private FlexigridService flexigridService;    //自动注入Service
      @Override
      public String execute() {
            return "list";
      }

      /**

        * 前台ajax要调用的方法

       */

       public String findData(){
             flexigridList = flexigridService.findAll();
             return "json";
        }

      //为节省篇幅,set与get方法在此就不写了 
}

至此后台就不需要什么工作了,马上进行前台js编写

 

第二步:在写js之前写一个jsp,如下:

1、jsp中分别引用  ext-all.css、PanelResizer.css、grid-examples.css、 ext-base.js、ext-all.js、ProgressBarPager.js、PanelResizer.js、 PagingMemoryProxy.js 、jgcharts.js, 这些css与js除jgcharts.js做图js外在上面图中都有,除此还要引用jquery-1.3.2.js, 自己写的js如下:extgrid_revise.js、lmChart.js、poptu.js 。     

除引用以上js外,还要在页面中写如下结构:
 <head>
    <script type="text/javascript">

         //先创建个chart类,参数含义在lmchart.js中
          var lmChart = new LmChart("产品-媒体类型月报",300,800);

          //为chart类添加列
          lmChart.addColumn("id","ID");
          lmChart.addColumn("name","名称");
          lmChart.addColumn("sort","类别");
          lmChart.addColumn("hotSpot","热点");
        //lmChart.addColumn("publishDate","发布日期");
          lmChart.addColumn("content","内容");     //此处重要,生成报表调用的方法,参数含义在extgrid_revise.js中
      revise("ext_grid/ext_grid!findData","flexigridList",lmChart,"grid-example");
    </script>
  </head>
  <body>

<!--    下面是extgrid附着span     -->
   <span id="grid-example"></span>
   <br>
   <input type="button" value="柱状图形" onclick="column();">
   <input type="button" value="饼状图形" onclick="pie();">
   <input type="button" value="趋势图形" onclick="tide();">
     <br>

<!--   下面是jgcharts附着span    -->
   <span id="bar1"></span>
  </body>
</html>


第二步:首先定义chart类,即写lmChart.js,其完整代码如下:

 /**
  * 定义 LmChart 对象
  * @param name 对象名,即图表名
  * @param height 图表高
  * @param width 图表宽
  */
 function LmChart(name,height,width)
 {
     this._name = name;  //图表名
     this._height = height; //图表高
     this._width = width; //图表宽
     this._Columns = new Object(); //列对象数组数组
     this._indexes=new Array();//列对象顺序数组

 }
 
 /**
  * 为对象添加一列
  * @param id  列的id名
  * @param name  列名
  * @param value  列值
  */
 LmChart.prototype.addColumn = function(id,name)
 {
       this._Columns[id] = new LmColumn(id,name);
       this._indexes[this._indexes.length]=id;
       indColShow[indColShow.length] = id;
 }
 /**
  * 隐藏一列
  * @param name  列的名字
  */
 LmChart.prototype.hideColumn = function(name)
 {
       var bool = false;
       $.each(this._indexes,function(k,v){
              if(v==name){
                    bool = true;
               }
        });
        if(bool){
               var _num  = this._indexes.length;
               //从indexes里面删除一个,后面的前移.
               for(var i=0;i<parseInt(_num);i++){
                       if(this._indexes[i] == name){
                             for(var j=i;j<parseInt(_num);j++){
                                    this._indexes[j] = this._indexes[j+1];
                             }
                         }
                 }
                 if(_num>0){
                         this._indexes.pop(); //将数组中最后的元素删除
                  }
           }
 }
 
 var indColShow = new Array();//保存交换位置后的列顺序
 
 /**
  * 根据列名将隐藏的一列显示
  * @param name  列的名字
  */
 LmChart.prototype.showColumn = function(name)
 {
        var bool = true;
        $.each(this._indexes,function(k,v){
             if(v==name){
                   bool = false;
              }
          });
          if(bool){
                var aa = new Array();
                var _ind = this._indexes;
                //根据this._Columns列顺序,向indexes里面添加一个新列,后面的后移.
                $.each(indColShow,function(key,val){
                         $.each(_ind,function(kk,vv){
                                 if(val==vv||val==name){
                                           var bo = true;
                                           $.each(aa,function(va){
                                                    if(this==val) bo=false;
                                            });
                                            if(bo) aa[aa.length] = val;
                                   }
                           });
                  });
                  this._indexes = aa;
          }
 }
 
 /**
  * 交换列
  * @param newColumn  新列
  */
 LmChart.prototype.changeIndex = function(newColumn,newOrder)
 {
          this._indexes = newColumn;
          indColShow = newOrder;
 }

 //输出结果(测试用)
 LmChart.prototype.output = function()
 {
  //根据_indexes,将一个个node输出去.
  $.each(this._indexes,function(key,val){
   alert(key);
   alert(val);
  });
 }
 
 /**
  * 列对象
  * @param id  列id
  * @param name  列名
  */
 function LmColumn(id,name){
       this._id = id;
       this._name = name;
       this._values = new Object();
 }
 /**
  * 添加列数组
  * @param {} val
  */
 LmColumn.prototype.setValues=function(val){
        this._values = val;
 }


 第三部、写extgrid_revise.js 重要的js,主要在这里实现与extgrid结合,完全代码如下:

var _obj;//全局变量  存放LmChart 对象

/**
 *  主要js函数

 * @param _url  ajax访问的url地址
 * @param _list 返回的list集合名
 * @param _lmChart LmChart 对象
 * @param _render 将此列表赋予的div 的id名
 */
function revise(_url,_list,_lmChart,_render){
 
   _obj = _lmChart;


   //因为我没有截获ext取json的方法,我自己用ajax重新调用了一下获取json,来为图表传值
   acquisitionJSON(_url,_list,_lmChart);
 
   Ext.onReady(function(){    //重要的ext方法
        // 创建数据源
        var store = new Ext.data.Store({      
                   proxy: new Ext.data.HttpProxy({      
                         ,       //前台传过来的url
                         method: 'GET'     
                   }), 
                   reader: new Ext.data.JsonReader({
                         root: _list,    //前台传过来的list集合名
                         id: 'id'     
                   },jsonMappingData(_lmChart))      //动态取的数据映射
           });


           var column = new Ext.grid.ColumnModel(columnModelByJSON(_lmChart));     //动态取的列值
           column.defaultSortable = true;       

           // 创建表格
           var grid = new Ext.grid.GridPanel({      
                     height:_lmChart._height,     //表格高度
                     width:_lmChart._width,        //表格宽度
                     title:_lmChart._name,         //表格名称
                     store: store,         //表格数据源
                     cm: column,      //表格列
                     stateEvents:['hiddenchange'],
                     view:new MyGridView(_lmChart),
                     listeners:{ 'beforerender':function(grid){      //监听事件
                            grid.on('hiddenchange',function(cm,columnIndex,hidden){  
                                    showOrHiddenColumn(_lmChart,cm,columnIndex,hidden);  //调用显示隐藏函数
                            },this);  
                            //托管事件  
                            grid.relayEvents(grid.getColumnModel(),['hiddenchange']);  
                      }  }  
              });       


              store.load();//初始化数据
              grid.render(_render);      //  将表格放到前台span上
    });
}

MyGridView=Ext.extend(Ext.grid.GridView,{    //定义自己的grid视图
        renderHeaders : function(){
                 var c = this.cm, h = this.templates, e = h.hcell, b = [], j = {}, a = c
    .                       getColumnCount(), g = a - 1;
                 var index = new Array();     //自定义数组,存放当前有多少列
                 for (var d = 0; d < a; d++) {


                       index[index.length] = c.getColumnId(d);//将当前列存入数组


                       j.id = c.getColumnId(d);
                       j.value = c.getColumnHeader(d) || "";
                       j.style = this.getColumnStyle(d, true);
                       j.tooltip = this.getColumnTooltip(d);
                       j.css = d === 0 ? "x-grid3-cell-first " : (d == g
                                    ? "x-grid3-cell-last "
                        : "");
                        if (c.config[d].align == "right") {
                                 j.istyle = "padding-right:16px"
                        } else {
                                delete j.istyle
                        }
                                b[b.length] = e.apply(j)
                  }
  
                 reviseColumnOrder(index);//修改列顺序
  
                 return h.header.apply({
                             cells : b.join(""),
                             tstyle : "width:" + this.getTotalWidth() + ";"
                 })
          }
});

/**
 * json映射表中字符数据
 * @param {} _lmCha
 * @return {}
 */
function jsonMappingData(_lmCha){
         var _jr="[";
         $.each(_lmCha._indexes,function(k,v){
                  _jr += "{name: '"+v+"', mapping: '"+v+"'},";
          });
         if(_jr.length>1){
                  _jr = _jr.substring(0,_jr.length-1);
         }
         _jr+="]";
         return eval("("+_jr+")");     //将字符串转换为json,重要
}

/**
 * 根据json创建表格结构
 * @param {} _lmCha
 * @return {}
 */
function columnModelByJSON(_lmCha){
          var _jr="[";
          var _aa = new Array();
          var i = 0;
          $.each(_lmCha._indexes,function(k,v){
                 var _arr = new Array();
                 _arr[0] = v;
                $.each(_lmCha._Columns[v],function(key,val){
                         if(key=='_name') _arr[1]=val;
                });
               _aa[i] = _arr;
                i++;
           });
          var _wid =  parseInt(_lmCha._width-25)/i;
          if(_aa.length>1){
                var j = 0;
                $.each(_aa,function(kk,vv){
                       var va = vv;
                       if(j==0)
                             _jr += "{id:'"+va[0]+"',header: '"+va[1]+"', width: "+_wid+", sortable: true, dataIndex: '"+va[0]+"'},";
                      else
                             _jr += "{header: '"+va[1]+"', width: "+_wid+", sortable: true, dataIndex: '"+va[0]+"'},";
                });
            }
            if(_jr.length>1){
                 _jr = _jr.substring(0,_jr.length-1);
            }
            _jr+="]";
             return eval("("+_jr+")");    //将字符串转换为json,重要
}

/**
 * 显示或隐藏列
 * @param  _lmChart LmChart 对象
 * @param  cm
 * @param  columnIndex
 * @param  hidden  false显示 true隐藏
 */
function showOrHiddenColumn(_lmChart,cm,columnIndex,hidden){

          if(hidden){
                lmChart.hideColumn(cm.getDataIndex(columnIndex));  //隐藏列
          }
          if(!hidden){
                lmChart.showColumn(cm.getDataIndex(columnIndex)); //将隐藏的列显示
          }
          jgChartDisposeLmChart(_lmChart);   //调用生成图表函数
}

/**
 * 修改列的顺序
 * @param {} newOrder  新顺序
 */
function reviseColumnOrder(newOrder){
        var _order = new Array();
        $.each(newOrder,function(k,v){
               $.each(_obj._indexes,function(kk,vv){
                      if(v==vv) _order[_order.length]=v; 
               });
         });
         _obj.changeIndex(_order,newOrder);   //调用调整列顺序函数
         jgChartDisposeLmChart(_obj);//调用生成图表函数
}

/**
 * 自己获取JSON,用来生成图表
 * @param _url  ajax访问的url地址
 * @param _list 返回的list集合名
 * @param _lmChart LmChart 对象
 */
function acquisitionJSON(_url,_list,_lmChart){
         jQuery.ajax({
              type:"POST",
              url:_url ,
              dataType:"json", 
              global:false,
              success: function(_json){ 
                      var _jsonList;
                      $.each(_json,function(k,v){
                             var kk = k+"";
                             if(kk==_list){
                                   _jsonList = v;
                             }
                      });
                      sealColumnByJSON(_jsonList,_lmChart);
                      jgChartDisposeLmChart(_lmChart);   //调用生成图表函数
               } 
        });  
}
/**
 * 用取得的json封装列数组
 * @param _jsonList
 * @param _lmChart
 */
function sealColumnByJSON(_jsonList,_lmChart){
        var lmcol = _lmChart._Columns;
        $.each(lmcol,function(k,v){
                var _colArray = new Array();
                $.each(_jsonList,function(kj,vj){
                       $.each(vj,function(kvk,vjv){
                             if(k==kvk){
                                    _colArray[_colArray.length] = parseInt(vjv);
                             }
                        });
                 });
                 $.each(v,function(kk,vv){
                        if(k==vv){
                              _lmChart._Columns[k].setValues(_colArray);
                        }
                  });
           });
}


最后写poptu.js图表js,完整代码如下:


 var columns=new Array();
 var lmCha;
 var savePic =null;
 function jgChartDisposeLmChart(_lmChart){     //生成图表的主要方法
          var cols=new Array();
          $.each(_lmChart._indexes,function(k,v){
                 $.each(_lmChart._Columns,function(kk,vv){
                        if(v==kk){
                               cols[cols.length] = vv;
                        }
                  });
            });
            columns = cols;
            lmCha = _lmChart;
            if(savePic == "column"){    
                  column();
            }else if(savePic == "pie"){
                  pie();
            }else if(savePic == "tide"){
                  tide();
            }else{
                  column();
            }
 }

 /**
  * 柱状图数据数组对象
  */
 function outputColumnDataArray()
 { 
        var data=new Array();
        var sum = 0;
        for(var i=0;i<columns.length;i++){
               var column= columns[i];
               for(var j = 0; j<column._values.length ; j++){
                      sum += column._values[j];
               }
               data[i]=sum;
               sum = 0;
         }
         return data;
 }
  
 /**
  * 获取图形分布的名称
  */
  function outputNameArray(){
          var name = new Array();
          for(var i=0;i<columns.length;i++){
                 var column= columns[i];
                 name[i] = column._name;
          }
          return name;
  }
 
 /**
  * 趋势图数据数组对象
  */
 function outputTideDataArray(){
            var len = columns.length;
            var subLen=columns[0]._values.length;
            var data = new Array(subLen);
            for(var i = 0 ; i < subLen ; i++){
                   data[i] = new Array(len);
            }
            for(var i = 0 ; i < subLen ; i++){
                    for(var j = 0 ; j < len ; j++){
                          data[i][j]  =  columns[j]._values[i];
                    }
             }
             return data;
 }
 
  function column(){     //柱状图
          $("#bar1").html("");
          var d = outputColumnDataArray();
          var n = outputNameArray();
          var api = new jGCharts.Api();
          var i=0;
          $.each(lmCha._indexes,function(k,v){    i++;   });
          var _wid =  parseInt(lmCha._width-100)/i;
          jQuery('<img>').attr('src', api.make({
                data :  [d],
                size : lmCha._width+"x"+lmCha._height, //default 300x200 (width x height) - maximum size 300,000 pixels
                bar_width : parseInt(_wid/2),//default 20  条形宽度
                bar_spacing : parseInt(_wid/2), //default 1 条形间距
                grid : true, //default false 网格
                title :lmCha._name, //default false 图表标题
                title_color : '000000', //标题颜色
                title_size  : 20 , //default 10 
                legend : n, //default none  - 图例
                axis_labels : ['统计'] //X轴显示文本
             })).appendTo("#bar1"); 
             savePic = "column";
  }
  function pie(){     //饼图
           $("#bar1").html("");
           var n = outputNameArray();
           var d = outputColumnDataArray();
           var api = new jGCharts.Api();
           jQuery('<img>').attr('src', api.make({
                   data :  d,
                   type : "p3",
                   size : lmCha._width+"x"+lmCha._height, //default 300x200 (width x height) - maximum size 300,000 pixels
                   title : lmCha._name, //default false 图表标题
                   title_color : '000000', //标题颜色
                   title_size  : 20 , //default 10 
                   axis_labels : n //X轴显示文本
             })).appendTo("#bar1"); 
             savePic = "pie";
  }
  function tide(){     //趋势图
           $("#bar1").html("");
           var d =  outputTideDataArray();
           var n = outputNameArray();
           var api = new jGCharts.Api(); 
           jQuery('<img>').attr('src', api.make({
                  data : d ,
                  type : "lc",
                  grid : true, //default false 网格
                  size : lmCha._width+"x"+lmCha._height, //default 300x200 (width x height) - maximum size 300,000 pixels
                  title :lmCha._name, //default false 图表标题 
                  title_color : '000000', //标题颜色
                  title_size  : 20 , //default 10
                  legend : n,
                  axis_labels : ['周一', '周二', '周三','周四','周五','周六','周日'] //X轴显示文本
             })).appendTo("#bar1"); 
             savePic = "tide";
  }
至此大功告成,现将效果图发布一张,供参考:

 

extgrid插件、jgcharts插件与ssh框架完美结合,实现动态生成报表及图表 - ytrtfhj@126 - 艾冰家园
 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics