fusioncharts 柱状图饼状图的实现（Column2D, Pie3D）

在实现之前，先把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>
}