FusionCharts 之 用户数据报告
本节我们将学习一下 如何使用FustionCharts 做一些可视化的报告。
如何在项目中使用 FusionCharts
引入FusionCharts 文件。由于需求不同，因而对 FusionCharts 依赖的程度也会不同， 有的需要新建一个单独的Server,有的要嵌入代码中，有的只需要引用 JS API即可满足。本例子只依赖 FusionCharts的 JS API。
<script type="text/javascript" src="../fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="../fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
JAVA 代码的实现
/** * 用户月报表统计信息 * * @return * @throws Exception */ public String userCountInfodisplay() throws Exception { // 返回参数 String createTimeStart = StringUtils.isNullOrEmpty(paramMap .get("createTimeStart")) ? "" : paramMap.get("createTimeStart"); String createTimeEnd = StringUtils.isNullOrEmpty(paramMap .get("createTimeEnd")) ? "" : paramMap.get("createTimeEnd"); List<Map<String, Object>> userCountInfo = null; try { List<Map<String, String>> countNewList = new ArrayList<Map<String, String>>(); List<Map<String, String>> countUsrCustList = new ArrayList<Map<String, String>>(); List<Map<String, String>> countUsrBankList = new ArrayList<Map<String, String>>(); List<Map<String, String>> totalAmountList = new ArrayList<Map<String, String>>(); List<Map<String, String>> countInvestList = new ArrayList<Map<String, String>>(); List<Map<String, String>> countfirstList = new ArrayList<Map<String, String>>(); List<Map<String, String>> labelsList = new ArrayList<Map<String, String>>(); List<Map<String, String>> promotionList = new ArrayList<Map<String, String>>(); List<Map<String, String>> activityList = new ArrayList<Map<String, String>>(); // 查询临时表中的数据源 userCountInfo = statisManageService.userCountInfo(createTimeStart, createTimeEnd); if (null != userCountInfo && userCountInfo.size() > 0) { for (Map<String, Object> map : userCountInfo) { // X labe Map<String, String> labelsMap = new HashMap<String, String>(); labelsMap.put("label", String.valueOf(map.get("MONTH"))); labelsList.add(labelsMap); // 新注册用户 Map<String, String> countNewMap = new HashMap<String, String>(); countNewMap.put("value", String.valueOf(map.get("countNew"))); countNewList.add(countNewMap); // 实名用户 Map<String, String> countUsrCustMap = new HashMap<String, String>(); countUsrCustMap.put("value", String.valueOf(map.get("countUsrCust"))); countUsrCustList.add(countUsrCustMap); // 绑卡用户 Map<String, String> countUsrBankMap = new HashMap<String, String>(); countUsrBankMap.put("value", String.valueOf(map.get("countUsrBank"))); countUsrBankList.add(countUsrBankMap); // 投资总额 Map<String, String> totalAmountMap = new HashMap<String, String>(); totalAmountMap.put("value", String.valueOf(map.get("totalAmount"))); totalAmountList.add(totalAmountMap); // 投资人数 Map<String, String> countInvestMap = new HashMap<String, String>(); countInvestMap.put("value", String.valueOf(map.get("countInvest"))); countInvestList.add(countInvestMap); // 首投人数 Map<String, String> countfirstMap = new HashMap<String, String>(); countfirstMap.put("value", String.valueOf(map.get("countfirst"))); countfirstList.add(countfirstMap); // X labe Map<String, String> promotionMap = new HashMap<String, String>(); promotionMap.put("value", String.valueOf(map.get("promoteFees"))); promotionList.add(promotionMap); // X labe Map<String, String> activityMap = new HashMap<String, String>(); activityMap.put("value", String.valueOf(map.get("activtyFees"))); activityList.add(activityMap); } } JSONArray labels = JSONUtils.toJSONArray(labelsList); String labels_json = labels.toString(); JSONArray countNew = JSONUtils.toJSONArray(countNewList); String countNew_json = countNew.toString(); JSONArray countUsrCust = JSONUtils.toJSONArray(countUsrCustList); String countUsrCust_json = countUsrCust.toString(); JSONArray countUsrBank = JSONUtils.toJSONArray(countUsrBankList); String countUsrBank_json = countUsrBank.toString(); JSONArray totalAmount = JSONUtils.toJSONArray(totalAmountList); String totalAmount_json = totalAmount.toString(); JSONArray countInvest = JSONUtils.toJSONArray(countInvestList); String countInvest_json = countInvest.toString(); JSONArray countfirst = JSONUtils.toJSONArray(countfirstList); String countfirst_json = countfirst.toString(); JSONArray activtyFees = JSONUtils.toJSONArray(activityList); String activtyFees_json = activtyFees.toString(); JSONArray promoteFees = JSONUtils.toJSONArray(promotionList); String promoteFees_json = promoteFees.toString(); String labels1 = ""; labels1 = "[" + "{\"category\":" + labels_json + "}" + "]"; String data = ""; data = "[" + "{\"dataset\": [ {\"seriesname\": \"新增注册\",\"data\": " + countNew_json + " },] }," + // 注册人数 "{\"dataset\": [ {\"seriesname\": \"实名人数\",\"data\": " + countUsrCust_json + "},] }," + // 实名认证 "{\"dataset\": [ {\"seriesname\": \"绑卡人数\",\"data\": " + countUsrBank_json + "},] }," + // 绑卡人数已 "{\"dataset\": [ {\"seriesname\": \"投资总额(万)\",\"data\": " + totalAmount_json + "},] }," + // 投资人数 "{\"dataset\": [ {\"seriesname\": \"投资人数\",\"data\": " + countInvest_json + "},] }," + // 投资金额. "{\"dataset\": [ {\"seriesname\": \"首投人数\",\"data\": " + countfirst_json + "},] }," + // 投资金额. "{\"dataset\": [ " + "{\"seriesname\":\"推广费用(万)\",\"data\":" + promoteFees_json + "}," + "{\"seriesname\":\"活动费用(万)\",\"data\":" + activtyFees_json + "}" + // "{\"seriesname\":\"经费_III\",\"data\":"+json1+"}" + "]}" + "]"; String line = ""; line = "[{\"seriesname\": \"投资总额(万)\",\"showValues\":\"0\",\"data\": " + totalAmount_json + "}]"; System.out.println("labels" + labels1); System.out.println("data:" + data); System.out.println("line:" + line); request().setAttribute("line", line); request().setAttribute("data", data); request().setAttribute("label", labels1); } catch (Exception e) { log.error(e); e.printStackTrace(); throw e; } return SUCCESS; }初始化 JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/include/taglib.jsp"%> <html> <head> <title>统计管理-指报表计</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <link href="../css/admin/admin_css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../script/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../script/jquery.shove-1.0.js"></script> <script type="text/javascript" src="../css/admin/popom.js"></script> <script language="javascript" type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script> <script type="text/javascript" src="../fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="../fusioncharts/js/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> $(function(){ initListInfo(param); $("#bt_search").click(function(){ param["paramMap.createTimeStart"]= $("#createTimeStart").val(); param["paramMap.createTimeEnd"]= $("#createTimeEnd").val(); $.shovePost("userCountInfodisplay.do",param,initCallBack); }); }); function initListInfo(param){ param["paramMap.createTimeStart"]= $("#createTimeStart").val(); param["paramMap.createTimeEnd"]= $("#createTimeEnd").val(); $.shovePost("userCountInfodisplay.do",param,initCallBack); } function initCallBack(data,label,line){ $("#chartContainer").html(data,label,line); } </script> </head> <body> <div id="right"> <div style="padding: 15px 10px 0px 10px;"> <div> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="140" height="28" class="main_alll_h2"> <a href="userCountInfo.do;">月报表统计</a> </td> <td width="2"> </td> <td width="140" height="28" class="main_alll_h2"> <a href="userCountInfoByDayInit.do;">日报表统计</a> </td> <td width="2"> </td> <td width="110" height="28" class="main_alll_h2"> <a href="registrationCountInit.do">注册用户统计</a> </td> <td width="2"> </td> <td width="160" height="28" class="main_alll_h2"> <a href="investmentCountInit.do">投资用户统计</a> </td> <td width="2"> </td> <td width="160" height="28" class="main_alll_h2"> <a href="userCountInfoByHourInit.do">投资人投资频率统计</a> </td> <td width="2"> </td> </tr> </table> <div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; width: auto; padding-top: 10px; background-color: #fff;"> <table style="margin-bottom: 8px;" cellspacing="0" cellpadding="0" width="95%" border="0" id="table"> <tbody> <tr> <td class="f66" align="left" width="100%" height="36px"> 查询月份： <input id="createTimeStart" class="Wdate" type="text" value="${timeStart}" style="width:135px;" onFocus="var timeEnd=$dp.$('createTimeEnd');WdatePicker({startDate:'%y-%M',dateFmt:'yyyy-MM',readOnly:'readOnly',onpicked:function(){createTimeEnd.focus();},maxDate:'#F{$dp.$D(\'createTimeEnd\')}'})"/> -- <input id="createTimeEnd" class="Wdate" type="text" value="${timeEnd}"style="width:135px;" onFocus="WdatePicker({dateFmt:'yyyy-MM',readOnly:'readOnly',minDate:'#F{$dp.$D(\'createTimeStart\')}'})"/> <input id="bt_search" type="button" value="搜索" /> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div id="chartContainer"></div> </body> </html>返回页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/include/taglib.jsp"%> <script type="text/javascript" src="../fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="../fusioncharts/js/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> FusionCharts.ready(function(){ var dataInfo = ${data}; var labelInfo = ${label}; var lineInfo = ${line}; var revenueChart = new FusionCharts({ "type": "msstackedcolumn2dlinedy", "renderAt": "chartContainer", "width": "100%", "height": "600", "dataFormat": "json", "dataSource":{ "chart": { //报表名字 "caption": "综合报表", //X坐标名 "xAxisname": "月份", //Y坐标名 "pyAxisName": "数量(万元/人次)", "syAxisName": "投资总额(万)", //计量单位 //"numberPrefix": "$", // // "plotFillAlpha": "80", //表柱颜色 "paletteColors": "#9BCD9B,#FFEC8B,#9FB6CD,#FF0000,#006400,#FFA500,#9400D3,#FF00FF,#FF0000", "baseFontColor": "#333333", "baseFont": "Helvetica Neue,Arial", "logoURL": "../source/wap/images/", //Changing logo alpha "logoAlpha":"40", //Scaling logo image "logoScale":"110", //Setting logo position "logoPosition":"TR", //主标题字体大小 "captionFontSize": "14", //副标题字体大小 "subcaptionFontSize": "14", //副标题字体 "subcaptionFontBold": "0", //Chart边线，0无1有 "showBorder": "0", //背景颜色 "bgColor": "#ffffff", //是否有阴影 "showShadow": "0", //图标作用区，我们以后叫画布，的背景颜色. "canvasbgColor": "#eeeeee,#b3b3b3", //Changing canvas baground alpha "canvasbgAlpha": "100", //Adding canvas background color ratio "canvasBgRatio": "40,60", //Adding canvas background angle "canvasBgAngle": "0", "divlineAlpha": "100", "divlineColor": "#999999", "divlineThickness": "1", "divLineIsDashed": "1", "divLineDashLen": "1", "divLineGapLen": "1", "usePlotGradientColor": "0", "showplotborder": "0", "valueFontColor": "#080808", "placeValuesInside": "1", "showHoverEffect": "1", "rotateValues": "1", "showXAxisLine": "1", "xAxisLineThickness": "1", "xAxisLineColor": "#999999", "sYAxisNameFont": "Arial", "sYAxisNameFontSize": "12", "sYAxisNameFontColor": "#003366", "sYAxisNameFontBold": "1", "sYAxisNameFontItalic": "0", "sYAxisNameAlpha": "50", "sYAxisMaxValue": "600", "showAlternateHGridColor": "0", "legendBgAlpha": "0", "legendBorderAlpha": "0", "legendShadow": "0", "legendItemFontSize": "10", "legendItemFontColor": "#666666", "exportEnabled":"1", "useRoundEdges": "1" }, "categories":labelInfo, "dataset":dataInfo, "lineset":lineInfo } }); //修改成中文提示 revenueChart.configure("ChartNoDataText","没有查询到相关数据"); revenueChart.configure("LoadDataErrorText","加载数据出错啦!"); revenueChart.configure("XMLLoadingText","加载数据中..."); revenueChart.configure("InvalidXMLText","初始化..."); revenueChart.configure("ReadingDataText","读取数据..."); revenueChart.configure("ChartNotSupported","图表不支持"); revenueChart.configure("LoadingText","加载"); revenueChart.render(); }); </script> <div id="chartContainer"></div>效果
初始化时
实时
更多使用例子
统计投资类型占比
用户数据来源
Arean
generation
SourceType
Gender
小结
FusionCharts 还提供了一些其他的图形类型和比较类型，个人觉得能够满足一般的企业需求
使用 FusionCharts 来满足我们的需求最关键的点在于源数据的模拟，需要严格按照FusionCharts 定义的数据来实现。
一般需要进行数据转换，因而需要一个常用的 net.sf.json.JSONArray jar包
<!-- https://mvnrepository.com/artifact/net.sf.json-lib/json-lib --> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> </dependency>
4479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
