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包已经过破解