首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

amcharts图表运用

2012-10-19 
amcharts图表应用Amcharts是基于flex的报表控件,官网地址:http://www.amcharts.com/?1. Amcharts图表需要

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

?

?

?

热点排行