//柱形圖
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: '{point.key}
pointFormat: '
{series.name}: ' +'
{point.y:.1f} KW',footerFormat: '
',shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,//設置兩個柱形圖的距離
borderWidth: 0
}
}
});
$.ajax({
type: "POST",
url: "tu/cloumnjson.action",
data: "year=1&lastyear=2&status=zhuxingtu",
dataType:'json',
success: function(returndata){
var result = eval('(' + returndata.json + ')');--------------------returndata.變量名(JSON)必須和后台的json變量名一致,json數據返回時候最好用eval來處理一下
for(var i = 0; i < result.length; i++) {
var varkeyTemp = (result[i].key).split("#")
if(varkeyTemp.length>0){
for (var n=0;n
categories.push(varkeyTemp[n].toString())
}
}
var varvalueTemp = (result[i].data).split("#")
if(varvalueTemp.length>0){
for (var j=0;j
data[j]= parseFloat(varvalueTemp[j]);//必須加parseFloat
}
}
chart.addSeries({ name: result[i].name, data:data});
//chart.xAxis[i].setCategories(categories); 已經push了,所以不需要再設置,
}
}
});
struts2配置文件:
/p>
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
column_struts.xml:
/p>
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
后台java
package com.nari.npce.action;
import java.util.Calendar;
import java.util.GregorianCalendar;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import com.nari.npce.log.NPECRunLog;
import com.nari.npce.log.impl.NPECRunLogImpl;
import com.opensymphony.xwork2.ActionSupport;
/**
* Servlet implementation class HighChartsJsonAction
*/
public class HighChartsJsonAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private static final NPECRunLog LOGGER = new NPECRunLogImpl();
/**
* @see HttpServlet#HttpServlet()
*/
private String json;
public String getJson()
{
return json;
}
/**
* @param 對jsonTree進行賦值
*/
public void setJson(String json)
{
this.json = json;
}
public String initCloumnString() {
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(); 直接復制,前台直接就可)獲取了或者(this.setJson(gdsNodes.toString())),
此種情況用在ajax情況下,不跳轉頁面,如果要跳轉頁面,那么就不需要寫出了,直接request.setAtrrbute就可以了或者通過通過${json}的EL表達式
return SUCCESS;
}
}