amcharts图表运用

Amcharts是基于flex的报表控件，官网地址：http://www.amcharts.com/

?

1. Amcharts图表需要的相关文件

一个“配置文件”（setting.xml），
一个数据文件(amile_data.xml)，也可动态从后台获取。
一个 SWFObject.js，
一个swf文件。

?

2．SWFObject的对象结构

deconcept
util
    getRequestParameter(_2b) // 取得url参数value。_2b是URL的key。
SWFObjectUtil
    getPlayerVersion() // 取得版本号对象。major.minor.rev。
    cleanupSWFs() // 清除页面上所有<OBJECT>元素。
SWFObject(_1, id, w, h, _5, c, _7, _8, _9, _a)
                               // _1: swf，指定SWF文件路径。
                               // _id: id，<embed>或者<object>标签的id。
                               // w: width，属性width。
                               // h: height，属性height。
                               // _5: version，flash版本，默认自动会去读取本地的flash插件版本的。
                               // c: bgcolor，背景色。
                               // _7: quality，品质(low, high, autolow, autohigh, best ) 。
                               // _8: xiRedirectUrl
                               // _9: redirectUrl
                               // _a: url参数key
    useExpressInstall(_d) // 设置xiSWFPath, useExpressInstall属性
    setAttribute(_e, _f) // 设置属性attributes。_e是key，_f是value。
    getAttribute(_10) // 取得属性attributes中的值。_10是key。
    addParam(_l1, _l2) // 设置参数params。_l1是key，_l2是value。
    getParams() // 取得params。
    addVariable(_l3, _l4) // 设置变量variables。_13是key，_14是value。
    getVariable(_l5) // 取得变量variables中的值。
    getVariables() // 取得变量variables。
    getVariablePairs() // 取得变量variables的key=value对数组。
    getSWFHTML() // 返回flash嵌入的HTML                   
    write(_20) // 写入flash插入的位置。_20可以是id的名称或者是一个dom结点。
PlayerVersion(_29) // 创建版本号对象。
    versionIsValid(fv) // 验证flash插件的当前版本号是否兼容fv的版本号（大于等于）。
getQueryParamValue = deconcept.util.getRequestParameter;
FlashObject = deconcept.SWFObject;
SWFObject = deconcept.SWFObject;

?3. amcharts图表的数据文件格式

?

支持csv、xml格式。
csv实际上是一个文本文件，而非excel文件，所以，可以直接使用文本文件来命名。
每一列的数据采用“;”或“,”分隔都可以。
例如：
// amcolumn_data.txt
2003;2.5
2004;4.6
2005;5.8
2006;3.8
2007;4.8
2008;6.8
2009;7.8

?

4.前台JS调用事例代码(饼图事例，其它图表更改参照的相应文件路径)

?

?

Ext.Ajax.request({
	url : SMIS.CTX+ '/report/supervise/SuperviseReportController
					 /getBizSuperviseCount.do',
	method : 'POST',  
	sync:true,
	params : {
		beginDate : Ext.getCmp("beginDate").value,
		endDate : Ext.getCmp("endDate").value,
		areaRange : Ext.getCmp("areaRange").getValue().inputValue
	},
	success : function(resp, opts) {
		var chartData;
		// chartData的数据格式应同上面数据文件中的数据格式一致。
		if(resp.responseText==""){
			chartData="无数据;0";
		}else{
			chartData=resp.responseText;
		}		
		var so = new SWFObject("../../chartsetting/ampie/ampie.swf", 
							 "ampie", "480", "305", "8", "#DFE8F6");
		so.addVariable("path", "../../chartsetting/ampie/");
		so.addParam('wmode', 'Transparent');
		so.addVariable("error_loading_file", "没有数据");
		so.addVariable("settings_file", encodeURIComponent(
				       "../../chartsetting/biz_ampie_settings.xml "));
		//这是采用本地的静态数据文件			
		//so.addVariable("data_file", encodeURIComponent(
		//							"amcolumn_data.txt")); // 数据文件

		so.addVariable("chart_data", encodeURIComponent(chartData));
		// flashcontent1为页面中需显示amchart图表的dom名称
		so.write("flashcontent1");		
	},
	failure : function() {
		Ext.Msg.alert('信息','获取统计数据失败。');
	}
});

?

5.后台代码生成数据

StringBuffer sb= new StringBuffer();
for(Map.Entry<String, Integer> m : map.entrySet()){
    // 将map数据格式进行转换（以分号隔开，一个分组一行数据）
	sb.append(m.getKey() + ";" + m.getValue()+"\n");
}
response.setContentType("text/html;charset=UTF-8");	
response.getWriter().write(sb.toString());

?

注：附件中amcharts包已经过破解

?

?

?