在实现之前,先把Map<String, Object> map格式的数据转换成string字符串,页面通过jquery-ajax异步调用在页面获取json数据显示方法如下:
Map<String, Object> data = service.findWorkStatus(ent_id); //座席状态
Util.out(Util.gson.toJson(data));
public static void out(String msg) {
try {
HttpServletResponse response = response();
//不要缓存
response.setDateHeader("expires", -1);
response.setHeader("Cache-control", "no-cache");
response.setHeader("Pragma", "no-cache");
response.setCharacterEncoding("utf-8");
response.setContentType("text/plain");
response().getWriter().write(msg);
response.getWriter().flush();
response.flushBuffer();
} catch (IOException e) {
throw new RuntimeException("Util.out", e);
}
}
页面:
$.ajax(
type : "post",
url : "monitor/screen!agentsList?workstatus="+workstatus,
success : function(data) {
var json = eval("(" + data + ")");
$("#counts").text(json.COUNTS);//COUNT为map的键,此处用大写,小写获取不到,此问题待研究。
}
});
如果传入的为实体对象:
public static void out(RAjax rajax) {
try {
HttpServletResponse response = response();
response.setDateHeader("expires", -1);
response.setHeader("Cache-control", "no-cache");
response.setHeader("Pragma", "no-cache");
response.setCharacterEncoding("utf-8");
response.setContentType("text/plain");
response.getWriter().write(rajax.toString());
response.getWriter().flush();
response.flushBuffer();
} catch (Exception e) {
throw new RuntimeException("Util.out", e);
}
}
对象:
public class RAjax {
private int status;
private String msg;
private Object o;
}
页面:
$.ajax({
type : "post",
url : "clickcall/taskassign!uniqImp",
dataType : "json",
success : function(data) {
if(data.status == 200) {
alert("成功");
}else{
alert("失败");
}
}
});
=========================================================================================================
以上为获取json数据展示在页面的方法,额外补充。
以下为本主题内容。
==========================================================================================================================
如果传到out方法为对象,最终页是转换为string字符串:
要实现二维的柱状图,饼图等,先下载fusioncharts文件,文件包括:
项目中使用了2种方式,一种是在action返回页面之前建好图形数据,在页面用el表达式获取, 在页面展示;一种是通过ajax方式,异步调用action方法建好图形数据,页面用json获取并展示,2中方法大同小异,都是将图形数据转换为string字符串。
1.
public String execute(){
String agent_id = (String) Util.session().getAttribute("agentid"); //座席ID
String ent_id = (String) Util.session().getAttribute("ent_id"); //企业ID
String[] chart = new String[]{"plotSpacePercent:60", "showBorder:0", "baseFontSize:12", "formatNumberScale:0", "showLabels:1", "bgColor:ffffff", "showValues:1", "showSum:1", "yAxisMinValue:1", "yAxisValuesStep:1", "decimals:0", "useRoundEdges:1", "legendBorderAlpha:0"};
String[] label = new String[]{"IVR呼入量", "ACD排队量", "座席接通量"};
String[] style = new String[]{"seriesname:IVR呼入量", "seriesname:ACD排队量", "seriesname:座席接通量"};
String[][] vals = new String[3][3];
Map<String, Object> data = service.queueMonitor(agent_id, ent_id);
Integer c_in = parseInt(data.get("c_in"), 0);
Integer ivr = parseInt(data.get("ivr"), 0);
Integer acd = parseInt(data.get("acd"), 0);
// Integer jt = parseInt(data.get("jt"), 0);
vals[0][0] = String.valueOf(c_in); //呼入总量
vals[1][1] = String.valueOf(ivr); //IVR呼通量
vals[2][2] = String.valueOf(acd); //ACD排队量
// vals[3][3] = String.valueOf(jt); //座席接通量
json = Crts.jsonStackedColumn2D(chart, label, style, vals); //运营监控
data = service.statis(agent_id, ent_id); //满意度
List<Map<String, String>> slist = new ArrayList<Map<String, String>>();
String count_my = data.get("count_my").toString();
String count_yb = data.get("count_yb").toString();
String count_bmy = data.get("count_bmy").toString();
for(String key : data.keySet()){
Map<String, String> smap = new HashMap<String, String>();
if(key.equals("COUNT_MY")){
smap.put("label", "满意");
smap.put("value", count_my);
}else if(key.equals("COUNT_YB")){
smap.put("label", "一般");
smap.put("value", count_yb);
}else if(key.equals("COUNT_BMY")){
smap.put("label", "不满意");
smap.put("value", count_bmy);
}
slist.add(smap);
}
statis = Crts.jsonPie3D(slist); //满意度
return "success";
}
Crts类:
public class Crts {
public static String jsonMSLine(String[] chart, String[] label, String[] style, String[][] vals) {
Map<String, Object> StackedColumn2D = new HashMap<String, Object>();
Map<String, Object> chart_map = new HashMap<String, Object>();
for(String str : chart) {
String[] kv = str.split(":");
chart_map.put(kv[0], kv[1]);
}
StackedColumn2D.put("chart", chart_map);
Object[] categories = new Object[1];
Map<String, Object> category = new HashMap<String, Object>();
Object[] c_category = new Object[label.length];
for(int i = 0; i < c_category.length; i++) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("label", label[i]);
c_category[i] = map;
}
category.put("category", c_category);
categories[0] = category;
StackedColumn2D.put("categories", categories);
Object[] dataset = new Object[vals.length];
for(int i = 0; i < vals.length; i++) {
Map<String, Object> set = new HashMap<String, Object>();
if(style != null && style.length > 0) {
String[] set_style = style[i].split(",");
for(String str : set_style) {
String[] kv = str.split(":");
set.put(kv[0], kv[1]);
}
}
Object[] data_vals = new Object[vals[i].length];
for(int j = 0; j < vals[i].length; j++) {
Map<String, Object> data_val = new HashMap<String, Object>();
data_val.put("value", vals[i][j] == null ? 0 : vals[i][j]);
data_vals[j] = data_val;
}
set.put("data", data_vals);
dataset[i] = set;
}
StackedColumn2D.put("dataset", dataset);
return Util.gson.toJson(StackedColumn2D);
}
/**
*
* @param chart new String[]{"caption:IPCC日呼入梯形图", "showBorder:0", "formatNumberScale:0", "showLabels:1", "bgColor:ffffff", "showValues:1", "showSum:1", "decimals:0", "useRoundEdges:1", "legendBorderAlpha:0"};
* @param label new String[]{"400呼入量", "IVR进入量", "IVR", "排队进入量", "座席接起量", "20秒接起量"};
* @param style new String[]{"seriesname:2004,color:AFD8F8", "seriesname:2005,color:F6BD0F"};
* @param vals new String[2][6];
* @return
*/
public static String jsonStackedColumn2D(String[] chart, String[] label, String[] style, String[][] vals) {
Map<String, Object> StackedColumn2D = new HashMap<String, Object>();
Map<String, Object> chart_map = new HashMap<String, Object>();
for(String str : chart) {
String[] kv = str.split(":");
chart_map.put(kv[0], kv[1]);
}
StackedColumn2D.put("chart", chart_map);
Object[] categories = new Object[1];
Map<String, Object> category = new HashMap<String, Object>();
Object[] c_category = new Object[label.length];
for(int i = 0; i < c_category.length; i++) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("label", label[i]);
c_category[i] = map;
}
category.put("category", c_category);
categories[0] = category;
StackedColumn2D.put("categories", categories);
Object[] dataset = new Object[vals.length];
for(int i = 0; i < vals.length; i++) {
Map<String, Object> set = new HashMap<String, Object>();
// if(style != null && style.length > 0) {
// String[] set_style = style[i].split(",");
// for(String str : set_style) {
// String[] kv = str.split(":");
// set.put(kv[0], kv[1]);
// }
// }
Object[] data_vals = new Object[vals[i].length];
for(int j = 0; j < vals[i].length; j++) {
Map<String, Object> data_val = new HashMap<String, Object>();
data_val.put("value", (vals[i][j] != null && vals[i][j].equals("0")) ? null : vals[i][j]);
data_vals[j] = data_val;
}
set.put("data", data_vals);
dataset[i] = set;
}
StackedColumn2D.put("dataset", dataset);
return Util.gson.toJson(StackedColumn2D);
}
public static String jsonPie3D(List<Map<String, String>> datas) {
Map<String, Object> charts = new HashMap<String, Object>();
Map<String, String> map = new HashMap<String, String>();
map.put("palette", "2");
map.put("animation", "1");
map.put("showlegend", "1");
map.put("legendposition", "bottom");
map.put("formatnumberscale", "0");
map.put("pieslicedepth", "45");
map.put("startingangle", "125");
map.put("baseFontSize", "12");
map.put("pieYScale", "60");
map.put("pieSliceDepth", "20");
map.put("startingAngle", "270");
charts.put("chart", map);
charts.put("data", datas);
return Util.gson.toJson(charts);
}
}
2.
/**
* 运营监控
*/
public void queueMonitor() {
String agent_id = (String) Util.session().getAttribute("agentid"); //座席ID
String ent_id = (String) Util.session().getAttribute("ent_id"); //企业ID
String[] chart = new String[]{"caption: ", "showBorder:0", "baseFontSize:11", "formatNumberScale:0", "showLabels:1", "bgColor:ffffff", "showValues:1", "showSum:1", "decimals:0", "useRoundEdges:1", "legendBorderAlpha:0"};
String[] label = new String[]{"呼入总量", "IVR呼通量", "ACD排队量", "座席接通量"};
String[] style = new String[]{"seriesname:呼入总量", "seriesname:排队量", "seriesname:IVR放弃", "seriesname:接通量", "seriesname:排队放弃", "seriesname:" + 20 + "秒内接起", "seriesname:" + 20 + "秒外接起"};
String[][] vals = new String[7][4];
Map<String, Object> data = service.queueMonitor(agent_id, ent_id);
Integer c_in = parseInt(data.get("c_in"), 0);
Integer ivr_drop = parseInt(data.get("ivr_drop"), 0);
Integer c_acd = parseInt(data.get("c_acd"), 0);
Integer answer = parseInt(data.get("answer"), 0);
Integer acd_drop = parseInt(data.get("acd_drop"), 0);
Integer level = parseInt(data.get("ok"), 0);
Integer level_out = parseInt(data.get("no"), 0);
vals[0][0] = String.valueOf(c_in);
vals[1][1] = String.valueOf(c_acd);
vals[2][1] = String.valueOf(ivr_drop);
vals[3][2] = String.valueOf(answer);
vals[4][2] = String.valueOf(acd_drop);
vals[5][3] = String.valueOf(level);
vals[6][3] = String.valueOf(level_out);
String json = null;
try {
json = Crts.jsonStackedColumn2D(chart, label, style, vals);
} catch (Exception e) {
e.printStackTrace();
}
Util.out(json);
}
页面:
$(document).ready(function() {
//运营监控
//Crts.createJsonChartsAjax("monitor/screen!queueMonitor", "StackedColumn2D", "Queue", "100%", 195);
Crts.createJsonCharts("StackedColumn2D", ${json}, "Queue", "100%", 200);
//满意度调查
Crts.createJsonCharts("Pie3D", ${statis}, "Statis", 330, 170);
});
Crts.js:
var Crts = {
filepath : "../../winvoice/resource/js/crts/flash/",
createJsonChartsAjax : function(url, name, id, xx, yy) {
$.ajax( {
type : "post",
url : url,
cache : false,
success : function(json) {
Crts.createJsonCharts(name, json, id, xx, yy);
}
});
},
<span style="color:#ff6666;">createJsonCharts : function(name, json, id, xx, yy) {
var chart = new FusionCharts(Crts.path(name), Crts.crtsid(id), xx, yy, 0, 0);
chart.setJSONData(json);
chart.render(id);
}
</span>
}