1.服务器端传送json格式的数据代码如下(这里指在servlet类中的情况):
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class repjson extends HttpServlet {
public repjson() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
//主方法,通过doGet的response回传json数据
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String title="HelloJson";
String a="J";
String b="S";
String c="O";
String d="N";
String xData="["+"\""+a+"\""+","+"\""+b+"\""+","+"\""+c+"\""+","+"\""+d+"\""+"]";
String yData="["+4+","+3+","+2+","+1+"]";
out.println("{" + "\"title\": \"" + title + "\"" + ","+ "\"xData\":" + xData + "," + "\"yData\":" + yData + "}");
}
public void init() throws ServletException {
// Put your code here
}
}
2.客户端接收json数据并以直方图显示代码如下:
<%@ page language="java" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=utf-8"%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart : {
renderTo : 'container',
type : 'column'
},
title : {
text : ''
},
credits : {
enabled : false
},
exporting : {
enabled : true
},
plotOptions : {
column : {
pointPadding : 0.2,
borderWidth : 0
}
},
tooltip : {
formatter : function() {
return '' + this.x + ': ' + this.y + ' 次';
}
},
legend : {
enabled : false
},
xAxis : {
categories : [],
labels : {
rotation : -45,
align : 'right',
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : '数量(次)'
}
},
series : [ {
name : "",
data : []
} ]
};
$.get('servlet/repjson', function(JSON) {
JSON = eval("(" + JSON + ")");
options.title.text = JSON.title;
$.each(JSON.xData, function(key, value) {
options.xAxis.categories.push(value);
});
$.each(JSON.yData, function(key, value) {
options.series[0].data.push(value);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
<div id="container" style="min-width: 720px; height: 400px; margin: 0 auto"></div>
3.实验结果图如下: