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的深入理解

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

html5开发之viewport使用

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