转自:http://blog.163.com/ytrtfhj@126/blog/static/89053109201042633457665/
现在我们项目要用到extgrid插件、jgcharts与ssh框架结合,经过几天研究终于成功,现将过程及实现写入下面。
准备工作: 下载extgrid插件、jgcharts插件,这里我用到的extgrid插件为ext-3.2.1,经过精简得如下目录结构:
其中图片自己从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="柱状图形" οnclick="column();">
<input type="button" value="饼状图形" οnclick="pie();">
<input type="button" value="趋势图形" οnclick="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";
}
至此大功告成,现将效果图发布一张,供参考: