FusionCharts 3.2.1 flash 图表展示、数据钻取
StackedColumn3DLineDY.swf 效果展示:
一、页面代码
<div id="chart2div" align="center" style="margin: 5px 0 0 5px;float: left;width:700px;border: 1px solid #fff;"></div> <script type="text/javascript"> var myChart2 = new FusionCharts("/fcharts/StackedColumn3DLineDY.swf", "chartId2", "700", "300"); myChart2.setDataURL(escape("/report/home/02-gzxjscbqkb.xml")); myChart2.render("chart2div"); </script>
二、XML数据文件内容
<graph caption='各中心结算成本情况表(二季度)' PYAxisName='结入后成本(万元)' SYAxisName='环比增幅(%)' syAxisMaxValue='50' showSYAxisValues='0' showSum='1' showValues='0' unescapelinks='0' formatNumberScale='0' formatNumber='0' decimalPrecision='0' baseFontSize='12' baseFont='微软雅黑' chartTopMargin='5' chartBottomMargin='5' maxColWidth='30'> <categories> <category name='网优中心' /> <category name='呼叫中心' /> <category name='业务支撑系统部' /> <category name='ICT' /> <category name='客响中心' /> <category name='培训中心' /> <category name='网管中心' /> <category name='增值业务中心' /> <category name='集团客户部' /> <category name='工建中心' /> <category name='核算中心' /> </categories> <dataset seriesName='结入后成本(万元)' parentYAxis='P'> <set value='248' color='afd8f8' /> <set value='3668' color='f6bd0e' /> <set value='7554' color='8cba00' /> <set value='741' color='fe8e46' /> <set value='158' color='008e8f' /> <set value='579' color='0097cd' /> <set value='411' color='d64647' /> <set value='5256' color='8e468f' /> <set value='551' color='598726' /> <set value='256' color='b2aa00' /> <set value='197' color='008ed6' /> </dataset> <dataset seriesName='环比增幅(%)' parentYAxis='S'> <set value='1' /> <set value='17' /> <set value='3' /> <set value='-7' /> <set value='14' /> <set value='169' /> <set value='28' /> <set value='14' /> <set value='30' /> <set value='40' /> <set value='51' /> </dataset> </graph>
三、struts2 框架动态加载内容
Action类增加方法:
public void doZscbhzbChart1() throws IOException { // 读取结出中心列表 List zxList = DAO_CheckOut.doSelect( "select * from t_check_out order by sn", new Object[] {}); if (zxList == null) { zxList = new ArrayList(); } List cbkmList = DAO_Dict.getSubLevels("cbkm"); // 成本科目类型 // 添加 综合保障分摊 BN_Dict zhbz = new BN_Dict(); zhbz.setOp_id("zzlx-zhbz"); zhbz.setOp_name("综合保障分摊"); cbkmList.add(zhbz); Map valueMap = DAO_Report.getValueMap(id_ver, "report-zscbhzb"); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); out.write("<graph caption='成本各中心分布情况' "+CHART_STYLE+">"); out.write("<categories>"); for (int i = 0; i < zxList.size(); i++) { BN_CheckOut checkOut = (BN_CheckOut) zxList.get(i); out.write("<category name='" + checkOut.getShort_name() + "' />"); } out.write("</categories>"); for (int i = 0; i < cbkmList.size(); i++) { BN_Dict cbkm = (BN_Dict) cbkmList.get(i); out.write("<dataset seriesName='" + (i + 1) + "-" + cbkm.getOp_name() + "'>"); for (int j = 0; j < zxList.size(); j++) { BN_CheckOut checkOut = (BN_CheckOut) zxList.get(j); out.write("<set value='" + DAO_Report.formatValue(valueMap.get(cbkm.getOp_id() + "--&" + checkOut.getDept_no() + "--")) + "' " + getGraphColor(i) + " />"); } out.write("</dataset>"); } out.write("</graph>"); out.flush(); out.close(); }
前台页面请求:
myChart1.setDataURL(escape("/manage/report.do?action=doGdsjrcbChart1"));
struts.xml 无须特殊配置即可使用
四、解决数据重复加载的问题
找到FusionCharts.js,利用js工具格式化为可阅读内容
定位到756行,把内容做如下注释掉即可:
this.options.dataSource = c; xStore[this.id] = g.ajax.get(decodeURIComponent(c), function(a, x) { var b = false; /* g.raiseEvent("DataLoadRequestCompleted", { source:"XmlHttpRequest", url:c, data:a, dataFormat:f, cancelDataLoad:function() { b = true; this.cancelDataLoad = function() { return false; }; return true; }, xmlHttpRequestObject:x }, obj); */ if (b !== true) { obj.setChartData(a, f, e);
五、解决set 中 link 脚本中文乱码问题
out.write("<set name='Dec' value='39800' link=\"javascript:void(top.addMyTab('各中心成本汇总表','/manage/report.do?action=doGzxcbhzb&module=bbgl-gzxcbhzb','icon-shezi2'))\"/>");
在graph节点中设置unescapelinks='0' 属性即可
李小家