做了一个简单的基于Struts2 + Json + HighChart的小例子，费了一下午+晚上的时间，虽然简单，但对于我这种Jquery+Ajax小白的人还是很值得记录的。
哈哈哈
# 0. 关键点找到highchart的模板网站 https://www.hcharts.cn/docs/basic-tooltip
# 1. 关键点，在struts.xml中配置返回类型为json
<action name="queryItemsJson" class="com.bestplan.action.JsonAction" method="jsonTest">
<result type="json">
<param name="root">dataMap</param>
</result>
# 2. 关键点2
public class JsonAction {
private Map<String, Object> dataMap;
public String jsonTest(){
dataMap = new HashMap<String,Object>();
dataMap.clear();
List<List<Float>> aveTimeForCpsWay = new ArrayList<List<Float>>();
for(int x=0;x<4;x++){
List<Float> temp = new ArrayList<Float>();
for(int i=0;i<12;i++){
temp.add((new Random().nextFloat())*100); // 随机产生12个float数
}
aveTimeForCpsWay.add(temp);
}
List<String> name = new ArrayList<String>();
name.add("Tokyo");
name.add("New York");
name.add("London");
name.add("Berlin");
dataMap.put("dataArr", aveTimeForCpsWay);
dataMap.put("nameArr", name);
return "success";
}
public Map<String, Object> getDataMap() {
return dataMap;
}
public void setDataMap(Map<String, Object> dataMap) {
this.dataMap = dataMap;
}
}
# 3. 关键点 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="js/jquery.1.9.1.min.js"></script> <script src="js/highcharts.js"></script> <script type="text/javascript"> function requestJson(){ alert("nihao"); $.ajax({ type:'GET', url:'queryItemsJson.action', contentType:'application/json;charset=utf-8', //数据格式是json串 dataType:"html", //接受响应的数据类型 success:function(data){//返回json结果 alert(data); var d = eval("("+data+")"); var chart = new Highcharts.Chart({ chart: { renderTo:'container', type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: d.nameArr[0], data: d.dataArr[0] }, { name: d.nameArr[1], data: d.dataArr[1] }, { name: d.nameArr[2], data: d.dataArr[2] }, { name: d.nameArr[3], data: d.dataArr[3] }] }); } } ); } </script> </head> <body> <input type="button" onclick="requestJson()" value="请求是json，输出是json"><div id="mydiv"></div> <div id="container" style="min-400px;height:400px"></div> </body> </body> </html>
效果图
