在Java中Highcharts前后台数据交互传输

最近在项目中要添加一个Highcharts数据图表显示。看过官方的Ajax交互事例,可惜好像使用的是PHP语言,而且没有显示后台的代码。百度查看了很多前辈们的事例,发现没一样是我所要的效果。。。最后还是自己试着写写。今天却成功了!我后台用的是SSH框架。在此把此经验分享给大家。

Highcharts其实还是满简单的,有点像一个框架一样,因为步骤单一而简单,只要自己在各个步骤中改一改自己想要的效果就出来了,在此我就不介绍这方面的知识了,有兴趣的可以上中文官方查看事例或学习。Highcharts中文在线演示 ;

//注,我以下的代码全Copy可不行,至少后台你Copy了也不能用,前台的代码可Copy,改一改里面的Ajax相关的代码即可!

我来说说这篇的步骤分析吧:

  1. 首先,自然是要搭建SSH框架了。
  2. 然后就是在Action中写一个查询方法(我用的是JSON传递数据)
  3. 前台使用Ajax传递数据,成功传递后,把数据转成数组,交给series

还是看代码吧。

后台Java代码

//我Struts使用的是注解方式,以下很多代码与此次交互的无关,比如页码等。 大家大致看看就行。
	@Action("findUserList")
	public String FindUserList(){
		JSONObject obj = new JSONObject();
		try{
			Object [] params = null;
			Object [] values = null;

			//当前页
			int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
			//每页显示条数
			int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);

			//每页的开始记录   第一页为1,第二页为number + 1
			int start = (intPage - 1)*number;
			
			paramsList.clear();
			conditionsList.clear();
			//
			String typeno = this.getClientData("typeno");
			//根据值判断是否有设置查询条件
			if(typeno != null && !typeno.isEmpty()){
				paramsList.add("name = ");	//ftypeno
				conditionsList.add(typeno);
			}
			//
			String typevalue = this.getClientData("typevalue");
			//根据值判断是否有设置查询条件
			if(typevalue != null && !typevalue.isEmpty()){
				paramsList.add("sex like");		//fvalue
				conditionsList.add("%" + typevalue + "%");
			}
			//		
			if(paramsList.size() > 0){
				params = paramsList.toArray(new Object[paramsList.size()]);
				values = conditionsList.toArray(new Object[conditionsList.size()]);
			
			}
			int xCount = userService.getCountUser(params, values);
			List list = userService.showUserParams(params, values, start, number);
		
			if((list != null) && (list.size() > 0)){
				String strJSON = makeObjectJson(list);
				obj.accumulate("total", xCount);
				obj.accumulate("rows", strJSON);
				obj.accumulate("status", "success");
			}else{
				obj.accumulate("total", 0);
				obj.accumulate("rows", "[]");
				obj.put("status", "fail");
				
			}		
		}catch(Exception e){
			obj.accumulate("Exception total", 0);
			obj.accumulate(" Exceptionrows", "[]");
			obj.put("Exception status", "fail");
			log.error("FindUserList error:" + e.getMessage());
		}
		common.outDataJSON(response, obj.toString());
		return null;
	}
	

前台JSP代码:


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
  <head>
    <title>Highcharts测试</title>
<script type="text/javascript" src="jss/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jss/highcharts.js"></script>
<script type="text/javascript" src="jss/exporting.js"></script>

<script type="text/javascript">
var chart;  
var num = [];
$(function(){  
    $.ajax({  
       type: "POST",  
       dataType: "JSON",  
       url: "findBaseTypeList.action",  //改成你的Action
           success : function(result){ 
        		for(var i = 0; i < result.rows.length;i++){
        			num[i] = parseInt(result.rows[i].fid);
        		         	   
        		}
          //此处构建曲线  
              $("#highchart").highcharts({  
    
        chart:{  
             defaultSeriesType: "spline",//图表的显示类型(line,spline,scatter,splinearea bar,pie,area,column)  
             marginRight: 125,//上下左右空隙  
             marginBottom: 25 //上下左右空隙  
        },  
        title:{  
            text: "插件分析视图",//主标题  
                x: -20 //center  
        },  
        xAxis: {   //横坐标  
            categories: num
        },  
            yAxis: {  
           title: {  
             text: "测试" //纵坐标  
               },  
               plotLines: [{  //标线属性  
            value: 0,  
             width: 1,  
             color: 'red'  
                }]  
              },  
             tooltip: { //数据点的提示框  
             formatter: function() { //formatter格式化函数  
             return  this.series.name +  
             this.x +': '+ this.y;  
            }  
        },  
        legend: {  
              layout: 'vertical',  
              align: 'right',  
              verticalAlign: 'top',  
              x: -10,  
              y: 100,  
              borderWidth: 0  
             },   
        series:[{
        	data:num
        }]
         });
       }  
    });  
}); 

</script>
  </head>
  
  <body>
   <div id="highchart" style="min-width:400px;height:400px">11122</div>
  </body>
</html>

我这个Success返回的是N个对象,所以我需要对象数组中点(。)单个对象中的点(。)fid值。
//因为取到的值是一个Json对应的字符(fid:"59")。所以我使用String转Int转了下。parseInt(); 最后把所有对象的ID字符转成了一个数组类型比如[59,55,66,77,88,99]
然后把数组放到series中的data中。
换成一句话就是,Ajax从后台取到了对象值,然后转成数组,最后把数组传到Highcharts中的series中的data中。显示数据,因为只是测试,所以X我也用数据代替。
只要熟悉后台的数据传递方式,直接Copy上面前台的代码改一改即可使用。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值