标签：highcharts highcharts数据交互 highcharts中ajax传递 highcharts中java后台数据
最近在项目中要添加一个Highcharts数据图表显示。看过官方的Ajax交互事例，可惜好像使用的是PHP语言，而且没有显示后台的代码。百度查看了很多前辈们的事例，发现没一样是我所要的效果。。。最后还是自己试着写写。今天却成功了！我后台用的是SSH框架。在此把此经验分享给大家。
Highcharts其实还是满简单的，有点像一个框架一样，因为步骤单一而简单，只要自己在各个步骤中改一改自己想要的效果就出来了，在此我就不介绍这方面的知识了，有兴趣的可以上中文官方查看事例或学习。Highcharts中文在线演示 ；
//注，我以下的代码全Copy可不行，至少后台你Copy了也不能用，前台的代码可Copy，改一改里面的Ajax相关的代码即可！
@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;
}
<%@ 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>
标签：highcharts highcharts数据交互 highcharts中ajax传递 highcharts中java后台数据
原文地址：http://blog.csdn.net/qq348843576/article/details/46503469
