java web j图表_java web 图表展示流程概述

最近项目中，需要用的用图表展示后台的数据库的数据。所以对此进行了初步调研和实现。在此整理下，已做备用。

(1)后台取数 因为该项目中使用了ssh1的框架，通过jdbc或者hebernate取出数据后

public ActionForward queryWechatGongDanReprotDetail(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response)

throws Exception {

String sql = " " ; // 此处需要你自己定义相关的取数逻辑来展示数据

log.info("查询工单的sql:"+sql);

JdbcBean jdbc = new JdbcBean();

res = jdbc.executeParamQuery(sql,date);

/*

* jsonArray 包含多个 jsonObj ，每个jsonObj可以有多个属性，key value值

* jsonObj 对象 {系统名称 : 'abc系统',工单数量 : 5 }

* jsonArray 对象 [ {系统名称 : 'abc系统',工单数量 : 5 } , {系统名称 : '123系统',工单数量 : 5 }]

*/

JSONArray jsonArray = new JSONArray();

JSONObject jsonObj = new JSONObject();

// 获取列数

ResultSetMetaData metaData = res.getMetaData();

int columnCount = metaData.getColumnCount();

// 遍历ResultSet中的每条数据

while (res.next()) {

// 遍历每一列

for (int i = 1; i <= columnCount; i++) {

String columnName =metaData.getColumnLabel(i); //获取列名

String value = res.getString(columnName); //取出列值

jsonObj.put(columnName, value);

}

jsonArray.add(jsonObj);// 将所有结果变成对应的 key value

}

//往JSONArray中添加JSONObject对象。发现JSONArray跟JSONObject的区别就是JSONArray比JSONObject多中括号[]

request.setAttribute("jsondata", jsonArray.toString()); //返回数组作为json储存起来

response.setCharacterEncoding("UTF-8");

response.getWriter().print(jsonArray);

return null;

此处为啥选择json传输是根据你的前台图标展示的方法来定的。稍后给出答案。

(2)前台展示

经过调研，发现 http://www.ichartjs.com/  基于HTML5的开源图形组件比较好用。只是需要将后台的取出的数据，放入给ichartjs所指定的变量里，然后调用ichartjs中给出的相应的模板，可根据你所呈现的数据类型进行挑选(因为模板的类型很全面，完全能满足一般的需求)。

用jquery 的ajax方法进行提交请求到后台取数后进行前台展示

$(document).ready(function() {

//跳转页面 仅仅只需要加载所有的DOM结构，就可以执行js向后台发送请求

$.ajax({

type: "POST", //提交方式

contentType: "application/json; charset=utf-8", //内容类型

dataType: "json", //类型

url: url, //提交的页面，方法名

// data: "date=" + parameter, //参数，如果没有，可以为null

success: function (jsondata) { //如果执行成功，那么执行此方法

//response返回来的数据(一般都 是以字符串格式返回)，eval(data)是该字符串转换成json格式(json是以key:value)这样的存在的

var datatemp = eval(jsondata);

/*d表示二维数组里的某一个对像 ,二维数组格式：[{key,val},{key,val},{key,val}](key为键；val表示值,指某一个对象，该对象有很多的属性)

i表示key,数组里第几个对象；ob表示对象*/

var color = ['#a5c2d5', '#cbab4f', '#76a871', '#9f7961', '#a56f8f', '#c12c44', '#6f83a5'];

var color2 = ['#8658a5', '#4ac2db', '#dd4b4b', '#add14f', '#f47721' ,'#c12c44', '#6f83a5'];

var data=new Array();

for(var i=0;i

data[i]={

name : datatemp[i].系统名称,

value : parseInt(datatemp[i].工单数量),

color : color2[i]};

}

//report柱状图, report1 2d饼图,report1_2 3d饼图 , report2 组合图

report2(data);

},

error: function (err) { //如果执行不成功，那么执行此方法

alert("err:" + err);

}

});

});

最简单的方法就是采用json的键值对的形式。将 返回的 jsondata按照要求进行整合。然后进行图表展示。

(3)中间传数json

我上面代码中的   report2(data);

是直接使用ichartjs的模板代码，封装的一个函数可以直接调用，只要传入你想要展示的数据就行。

因为ichartjs中模板代码中定义的数据类型如下

var data = [

{name : 'H',value : 7,color:'#a5c2d5'},

{name : 'E',value : 5,color:'#cbab4f'},

{name : 'L',value : 12,color:'#76a871'},

{name : 'L',value : 12,color:'#76a871'},

{name : 'O',value : 15,color:'#a56f8f'},

{name : 'W',value : 13,color:'#c12c44'},

{name : 'O',value : 15,color:'#a56f8f'},

{name : 'R',value : 18,color:'#9f7961'},

{name : 'L',value : 12,color:'#76a871'},

{name : 'D',value : 4,color:'#6f83a5'}

];

是一个键值对的形式。最简单的方法就是采用json的键值对的形式。

————————————————————————————————————

以上是展示的部分

展示的美观和自适应的各个终端屏幕的请情况，需要了解下 viewport

var pageWidth =window.innerWidth; // window.innerWidth $(window).width()

var pageHeight = window.innerHeight; // window.innerHeight $(window).Height()

if(typeof pageWidth != "number"){

if(document.compatMode == "number"){

pageWidth = document.documentElement.clientWidth;

pageHeight = document.documentElement.clientHeight;

}else{

pageWidth = document.body.clientWidth;

pageHeight = document.body.clientHeight;

}

}

可以参考下

http://www.cnblogs.com/2050/p/3877280.html

html5开发之viewport使用

http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html