在Java中Highcharts前后台数据交互传输
来源:互联网 发布:类似imagemeter的软件 编辑:程序博客网 时间:2024/04/28 21:00
最近在项目中要添加一个Highcharts数据图表显示。看过官方的Ajax交互事例,可惜好像使用的是PHP语言,而且没有显示后台的代码。百度查看了很多前辈们的事例,发现没一样是我所要的效果。。。最后还是自己试着写写。今天却成功了!我后台用的是SSH框架。在此把此经验分享给大家。
Highcharts其实还是满简单的,有点像一个框架一样,因为步骤单一而简单,只要自己在各个步骤中改一改自己想要的效果就出来了,在此我就不介绍这方面的知识了,有兴趣的可以上中文官方查看事例或学习。Highcharts中文在线演示 ;
//注,我以下的代码全Copy可不行,至少后台你Copy了也不能用,前台的代码可Copy,改一改里面的Ajax相关的代码即可!
我来说说这篇的步骤分析吧:
- 首先,自然是要搭建SSH框架了。
- 然后就是在Action中写一个查询方法(我用的是JSON传递数据)
- 前台使用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 + 1int start = (intPage - 1)*number;paramsList.clear();conditionsList.clear();//String typeno = this.getClientData("typeno");//根据值判断是否有设置查询条件if(typeno != null && !typeno.isEmpty()){paramsList.add("name = ");//ftypenoconditionsList.add(typeno);}//String typevalue = this.getClientData("typevalue");//根据值判断是否有设置查询条件if(typevalue != null && !typevalue.isEmpty()){paramsList.add("sex like");//fvalueconditionsList.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上面前台的代码改一改即可使用。
0 0
- 在Java中Highcharts前后台数据交互传输
- 用highcharts前后台传输数据servlet--柱形图
- 用highcharts前后台传输数据struts2--柱形图
- 前后台数据交互
- 前后台数据交互
- Java web项目前后台数据交互
- phonegap前后台数据交互
- AngularJs前后台数据交互
- AJAX 前后台数据交互
- web前后台数据交互
- SpringMVC前后台数据交互
- JSP前后台数据交互
- 在ssm框架中前后台数据交互均使用json格式
- web 前后台数据交互的方式
- Spring MVC 前后台数据交互
- struts1 ajax前后台数据交互
- 利用AjaxPro2实现前后台数据交互
- Spring MVC 前后台数据交互
- Android5.1--APK包的安装、卸载和优化(PackageManagerService)(二)
- Linux基础(二)常用命令1
- 在NGUI中高效优化UIScrollView之UIWrapContent的简介以及使用
- jQuery方法区别:click() bind() live() delegate()区别
- js 放置位置
- 在Java中Highcharts前后台数据交互传输
- 压缩感知(Compressive Sensing)一
- GRE填空词汇——显性类+隐性类
- iOS开发 纯代码适配技巧 baseViewController
- 代码里 各种神注释
- JS——事件
- Android调用系统截图时候出现黑框
- Linux下使用Sigar 获取磁盘信息
- 爬虫技术和爬虫需求现状和展望