- 浏览: 9983 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
dingding5060:
jgcharts不好的地方就是需要去调用google的api! ...
jQuery jgCharts 图表插件
转自: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="柱状图形" 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";
}
至此大功告成,现将效果图发布一张,供参考:
相关推荐
eclipse插件生成ssh框架和ssi框架
ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh框架项目源码ssh...
基于SSH框架的代码生成工具的设计与实现 基于SSH框架的代码生成工具的设计与实现 基于SSH框架的代码生成工具的设计与实现 基于SSH框架的代码生成工具的设计与实现
基于SSH框架的飞机订票系统研究与实现.pdf基于SSH框架的飞机订票系统研究与实现.pdf基于SSH框架的飞机订票系统研究与实现.pdf基于SSH框架的飞机订票系统研究与实现.pdf基于SSH框架的飞机订票系统研究与实现.pdf基于...
ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ssh 框架 ...
ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ssh shhs ssh ...
基于SSH框架的动态表单设计与实现
ssh框架实现的学生管理系统,其中也实现了前台界面的学生管理。
这是一个关于SSH框架整合 和用FreeMarker技术来将动态网页静态化的操作事例
里面是SSH框架搭建登录的demo,清楚的描述了SSH框架搭建过程的各种配置,另附博客地址:http://blog.csdn.net/u010539352
完整ssh框架
ssh框架搭建及实例ssh框架 ssh框架搭建及实例ssh框架
功能:用MyEclipse5.5或者6.0快速搭建SSH框架 一键搭建(Struts1.3+Spring2.0+Hibernate3.2) 一键搭建(Struts2.0+Spring2.0+Hibernate3.2) 一键搭建(Struts2.0+Spring2.0+iBatis2.3) 等还有其他功能,本人并...
自己练习搭建的ssh框架 其中实现了一个简单的增删改查功能 包含代码 和 数据库表结构
用ssh框架实现的基本页面 数据库oracle,连接的事scott用户下的emp表的dept表,很方便调试。包含页面
ssh框架实现后台的管理
该代码实现了Spring、Struts、Hibernate的高效整合,任何一个使用SSH开发的项目都可以以本代码为起点
javaSSH框架javaSSH框架javaSSH框架javaSSH框架
ssh框架实现登录实例
Java三大框架SSH框架,实现增删改查分页上传下载,是个很好的学习示例!