java web 图表展示流程概述

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

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

public ActionForward queryWechatGongDanReprotDetail(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response)
<span style="white-space:pre">			</span>throws Exception {      

<span style="white-space:pre">		</span>String sql = "  " ; // 此处需要你自己定义相关的取数逻辑来展示数据

<span style="white-space:pre">		</span> log.info("查询工单的sql:"+sql);

JdbcBean jdbc = new JdbcBean();
res = jdbc.executeParamQuery(sql,date);

/*
* jsonArray 包含多个 jsonObj ，每个jsonObj可以有多个属性，key value值
* jsonObj 对象 {	系统名称 : '<span style="font-family: Arial, Helvetica, sans-serif;">abc系统</span>',	工单数量 : 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<datatemp.length;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);
}
});
});
</script>

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

（3）中间传数json

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

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

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">因为ichartjs中模板代码中定义的数据类型如下</span><pre name="code" class="javascript">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'}
];

</pre><p></p><p>是一个键值对的形式。最简单的方法就是采用json的键值对的形式。</p><p>————————————————————————————————————</p><p>以上是展示的部分</p><p>展示的美观和自适应的各个终端屏幕的请情况，需要了解下 viewport</p><p><pre name="code" class="javascript"> <meta name="viewport" content="width=device-width" />

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;
}
}

可以参考下

移动前端开发之viewport的深入理解

/article/5062193.html

html5开发之viewport使用

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