amcharts图表应用
Amcharts是基于flex的报表控件,官网地址:http://www.amcharts.com/
?
1. Amcharts图表需要的相关文件
一个“配置文件”(setting.xml),
一个数据文件(amile_data.xml),也可动态从后台获取。
一个 SWFObject.js,
一个swf文件。
?
2.SWFObject的对象结构
deconceptutil 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包已经过破解
?
?
?