FusionCharts 之用户数据报告

╰半橙微兮° 2022-06-05 02:43 190阅读 0赞

## **FusionCharts 之 用户数据报告** ##

本节我们将学习一下 如何使用FustionCharts 做一些可视化的报告。

*  [FusionCharts 官网][FusionCharts]、[学习 FusionCharts例子][FusionCharts 1]
 *  如何在项目中使用 FusionCharts
    
     *  [下载FusionCharts 提供的 open source 包][FusionCharts _ open source]
     *  引入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>
 *  效果
    
     *  初始化时  
        ![这里写图片描述][SouthEast]
     *  实时  
        ![这里写图片描述][SouthEast 1]

--------------------

## **更多使用例子** ##

*  统计投资类型占比  
    ![这里写图片描述][SouthEast 2]
 *  用户数据来源
    
     *  Arean  
        ![这里写图片描述][SouthEast 3]
     *  generation  
        ![这里写图片描述][SouthEast 4]
     *  SourceType  
        ![这里写图片描述][SouthEast 5]
     *  Gender  
        ![这里写图片描述][SouthEast 6]

--------------------

## **小结** ##

*  FusionCharts 还提供了一些其他的图形类型和比较类型，个人觉得能够满足一般的企业需求
 *  使用 FusionCharts 来满足我们的需求最关键的点在于源数据的模拟，需要严格按照FusionCharts 定义的数据来实现。
 *  一般需要进行数据转换，因而需要一个常用的 net.sf.json.JSONArray jar包
    
        
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
        </dependency>

[FusionCharts]: https://www.fusioncharts.com/
[FusionCharts 1]: https://www.fusioncharts.com/dev/demos/chart-gallery.html#Gallary
[FusionCharts _ open source]: https://www.fusioncharts.com/download/
[SouthEast]: /images/20220605/69a13084770d4d4290a3fcd33760469c.png
[SouthEast 1]: /images/20220605/f09b35ed084f42fbaa81a837b02bd19e.png
[SouthEast 2]: /images/20220605/c3efbba4580f4b469521d7d39ab9b573.png
[SouthEast 3]: /images/20220605/7c7344f0ff674dc290ca8409c27a4372.png
[SouthEast 4]: /images/20220605/f05c5752d4884f9ea5296809b7ee69de.png
[SouthEast 5]: /images/20220605/bda645ecf7754230ad3c869e41ffb48d.png
[SouthEast 6]: /images/20220605/840826a5ed5b410e976a6a7c4d2e4cc0.png