前台html和js
var categories = [];
var name ='';
var data = [];
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
type: 'column'
},
title: {
text: '总负荷环比'
},
xAxis: {
categories: categories,
title: {
algin:'right',
text: '时/h'
}
},
yAxis: {
min: 0,
title: {
text: 'KW'
}
},
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} KW</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,//设置两个柱形图的距离
borderWidth: 0
}
}
});
-----------------------------------------------ajax
$.ajax({
type: "POST",
url: "<%= basePath%>tu/cloumnserlvet",
data: "year=1&lastyear=2&status=zhuxingtu",
dataType:'json',
success: function(return){
// var result = eval('(' + returndata.json + ')');此是struts回调用的
for(var i = 0; i < result.length; i++) {
var varkeyTemp = (result[i].key).split("#")
if(varkeyTemp.length>0){
for (var n=0;n<varkeyTemp.length;n++){
categories.push(varkeyTemp[n].toString())
}
}
var varvalueTemp = (result[i].data).split("#")
if(varvalueTemp.length>0){
for (var j=0;j<varvalueTemp.length;j++){
data[j]= parseFloat(varvalueTemp[j]);//必须加parseFloat
}
}
chart.addSeries({ name: result[i].name, data:data});
//chart.xAxis[i].setCategories(categories); 已经push了,所以不需要再设置,
}
}
});
------------------------------html-------------------------
<div id="container"
style="height: 400px; margin: 0 auto; float: left; width: 35%;"></div>
后台servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String year = request.getParameter("year");
String lastyear = request.getParameter("lastyear");
String jsonCloumn="";
//System.out.println("tree id=" + id);
if("1".equals(year)&&"2".equals(lastyear)){
jsonCloumn = initCloumnString(year,lastyear);
System.out.println("jsonCloumn=" + jsonCloumn);
}
PrintWriter write = null;
try {
write = response.getWriter();
write.write(jsonCloumn); servlet要写数据的,不像struts2,不需要,因为可以定义一个变量,前台直接就可以拿到了( 此种情况用在ajax情况下,不跳转页面,如果要跳转页面,那么就不需要写出了,直接request.setAtrrbute就可以了)
} catch (IOException e) {
e.printStackTrace();
} finally {
if (null != write) {
write.close();
}
write = null;
}
}
private String initCloumnString(String year,String lastyear) {
String Json = "";
JSONArray gdsNodes = new JSONArray();
JSONObject gdsNodeYear = new JSONObject();
gdsNodeYear.put("key", "1#2#3#4#5#6#7#8#9#10#11#12#13#14#15#16#17#18#19#20#21#22#23#24");
gdsNodeYear.put("name", "今年");
gdsNodeYear.put("data", "10# 11# 12# 13# 14# 15# 10#16# 17# 10# 18# 10#10#10#10#10#10#10#10#10#10#10#10#10");
JSONObject gdsNodeLastYear = new JSONObject();
gdsNodeLastYear.put("key", "1#2#3#4#5#6#7#8#9#10#11#12#13#14#15#16#17#18#19#20#21#22#23#24");
gdsNodeLastYear.put("name", "去年");
gdsNodeLastYear.put("data", "20# 20# 20# 20# 20# 20# 20# 20# 20# 20# 20# 20#20#20#20#20#20#20#20#20#20#20#20#15");
gdsNodes.add(gdsNodeYear);
gdsNodes.add(gdsNodeLastYear);
Json = gdsNodes.toString();
return Json;
}