`
chen_sheng_lin
  • 浏览: 5673 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Highchart应用封装

阅读更多
*********************************************************************************************************
*******************************************jsp页面:staffRiskStat.jsp************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="struts" uri="/struts-tags" %>

<!--引入path java中的path和js中的path-->
<%@include file="/modules/comm/loadingData.jsp" %>
<%@include file="/common/path_header.jsp" %>
<%@include file="/common/jqgrid_header.jsp" %>

<!--显示对话框-->
<script type="text/javascript" src="${path}/script/common/rims.js"></script>

<script src="<%=path%>/script/hightcharts3.0.10/highcharts.js"></script>
<script src="<%=path%>/script/hightcharts3.0.10/modules/exporting.js"></script>
<!--myChart为封装好的js文件-->
<script src="<%=path%>/script/common/myChartTheme.js"></script>
<script src="<%=path%>/script/common/myChart.js"></script>

<!--dwr-->
<script type="text/javascript" src="<%=path%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=path%>/dwr/util.js"></script>
<script type="text/javascript" src="<%=path%>/dwr/interface/dwrStuffRiskStat.js"></script>

<!--选择用户-->
<script type="text/javascript" src="<%=path%>/script/common/uIUtiltyCommon.js"></script>

<style type="text/css">
   .td-border-class
   {
       border: 1px solid #000000;
       border-collapse:collapse;
       background-color: #E8F7FA;
   }

   .td-class
   {
       border: 1px solid #E5E5E5;
       border-collapse:collapse;
   }

   .stat-module-title
   {
       height: 30px;
       font-size: 20px;
       font-weight: bold;
       border: 1px solid #E5E5E5;
       vertical-align: bottom;
       text-align:center;
   }

   .bpmSelectUser {
       background-color: transparent;
       background-image: url("/htsc.abms/modules/comm/img/user_add.gif");
       background-repeat: no-repeat;
       border: medium none;
       height: 20px;
       overflow: hidden;
       vertical-align: middle;
       cursor: pointer;
       width: 20px;
   }

   #userName
   {
       width:400px;
   }

   .countBtn
   {
       background: url("/htsc.abms/modules/images/button.png");
       background-color:#2CB1EC;
       color:#ffffff;
       font-size: 14px;
       cursor: pointer;
       width:70px;
   }

   .total-class{
       min-width:500px;
       min-height: 400px;
   }

   .detail-class{
       min-width:1000px;
       min-height: 400px;
   }

   #severityTotalShow
   {
       font-size: 24px;
       font-weight:bolder;
       background: url('../../../../images/severitybg.jpg') repeat;
   }
</style>

<table align="center" width="1000" class="td-border-class">
  <thead>
    <tr>
       <td colspan="2" class="td-class" height="40" bgcolor="#BFDAEF">
           &nbsp;&nbsp;&nbsp;
           请选择人员:
           <input id="userName" value="" name="" readonly="true"/>
           <input id="selectUser" class="bpmSelectUser" type="button" onclick="selectUsers();"/>
           &nbsp;&nbsp;&nbsp;
           <input class="countBtn" type="button" value="分析" onclick="count();">
       </td>
    </tr>
  </thead>

  <tbody>
    <!--风险发生频率总体视图-->
    <tr>
        <td class="stat-module-title" class="td-class" colspan="2">&nbsp;风险发生总体视图</td>
    </tr>
    <tr>
        <td width="500" class="td-class">
            <div id="typesProblemTotal" class="total-class"></div>
        </td>
        <td width="500" class="td-class">
            <div id="problemRectifyTotal" class="total-class"></div>
        </td>
    </tr>
    <tr>
        <td width="500" class="td-class">
            <div id="problemSeverityTotal" class="total-class"></div>
        </td>
        <td width="500" class="td-class">
            <div id="severityTotalShow" class="total-class">
               <br>
               <br>
               <table align="center" height ="300" width="300" bgcolor="#E7F6F9">
                 <tr><td colspan="2" align="center" bgcolor="#BFDAEF">具体情况如下:</td></tr>
                 <tr bgcolor="#D3E9F6">
                     <td align='center' width='150'>严重问题:</td>
                     <td align='center' width='150'>0个</td>
                 </tr>
                 <tr bgcolor="#D3E9F6">
                     <td align='center' width='150'>一般问题:</td>
                     <td align='center' width='150'>0个</td>
                 </tr>
                 <tr bgcolor="#D3E9F6">
                     <td align='center' width='150'>轻微问题:</td>
                     <td align='center' width='150'>0个</td>
                 </tr>
               </table>
            </div>
        </td>
    </tr>

    <!--风险发生频率-->
    <tr>
       <td colspan="2" class="td-class">
           <div id="riskFrequency" class="detail-class" ></div>
           <div>
               <table id ="riskFrequencyGrid"></table>
           </div>
       </td>
    </tr>

    <!--风险发生偏好-->
    <tr>
       <td colspan="2" class="td-class">
           <div id="riskPreferences" class="detail-class"></div>
           <div>
               <table id ="riskPreferencesGrid"></table>
           </div>
       </td>
    </tr>

    <!--风险整改情况-->
    <tr>
       <td colspan="2" class="td-class">
         <div id="problemRectify" class="detail-class"></div>
         <div>
               <table id ="problemRectificationGrid"></table>
         </div>
       </td>
    </tr>

    <!--风险发生程度明细-->
    <tr>
        <td colspan="2" class="td-class">
            <div id="riskSeverity" class="detail-class"></div>
            <div>
                <table id ="riskSeverityGrid"></table>
            </div>
        </td>
    </tr>
    </tbody>
  </table>
<input type="hidden" id="USER_ID">
<input type="hidden" id="REPORT_ID">
<input type="hidden" id="RISK_TYPE">
<input type="hidden" id="REFORM_STATUS">
<input type="hidden" id="SEVERITY_LEVEL">

<script type="text/javascript">

    // 选择用户
    function selectUsers()
    {
        // 选择的用户
        var _selectedUsers = [];

        // 筛选条件
        var modalDialogParam={};

        // 是否单选
        modalDialogParam["singleSelect"] = true;

        var newSelectUsers = selectUser(_selectedUsers,modalDialogParam);

        // 返回有用户
        if( newSelectUsers!=undefined )
        {
            var user = newSelectUsers[0];

            // 判断选择人
            if(null==user){
                return;
            }

            // 将用户添加到查询作为输入参数
            _selectedUsers.push(user);

            // Ajax后台查询用户的部门信息
            $.ajax({
                type: "POST",
                data:{"userId":user.UUID},
                url: path+"/org/getOrgInfoByUserId.do",
                async: false,
                dataType:'json',
                success: function(org){
                    if( org!=undefined&&org!=null&&org.orgId!=undefined&&org.orgId!=null )
                    {
                        $("#userName").val(org.orgName +" "+user.DUTY +" "+user.REALNAME);
                        $("#userName").attr('name',user.UUID);
                    }
                }
            });
        }
    }

// 初始化加载
count();

// 统计函数
function count(){

    // 拿到稽查人员的用户Id
    var userId= $("#userName").attr("name");

    // 用户ID
    if(userId == undefined || userId == null || userId =="")
    {
        noData_pie('typesProblemTotal');
        noData_pie('problemRectifyTotal');
        noData_pie('problemSeverityTotal');
        noData_column('riskFrequency');
        noData_column('riskPreferences');
        noData_column('problemRectify');
        noData_column('riskSeverity');
        // document.getElementById("severityTotalShow").innerHTML="";
        return;
    }

    // 封装参数
    var o = {
        id:userId
    }

    // 显示加载
    createDiv();

    // 风险类型汇总
    dwrStuffRiskStat.queryRiskTypeTotal(o,function(data){
        myChart("typesProblemTotal",data,function(event){

        });

        // 加载完成移出
        removeDiv();
    });

    // 风险整改汇总
    dwrStuffRiskStat.queryRiskRectifyTotal(o,function(data){
        myChart("problemRectifyTotal",data,function(event){

        });
    });


    // 风险严重程度汇总
    dwrStuffRiskStat.queryRiskSeverityTotal(o,function(data){
        myChart("problemSeverityTotal",data,function(event){

        });

        document.getElementById("severityTotalShow").innerHTML="";

        // 拿到系列值
        var names = xNames(data);

        // 拿到系列数据
        var counts = data['seriesList'][0]['chartData'];

        var severityCount =0;
        var sum = 0;
        var text ="<table align='center' height ='270' width='300' bgcolor='#E7F6F9'>"
                +"<tr><td colspan='2' align='center' bgcolor='#BFDAEF'>具体情况如下:</td></tr>";
        for(var i=0;i<names.length;i++)
        {
            text += "<tr bgcolor='#D3E9F6'>";
            text +="<td align='center' width='150'>"+names[i]+"问题:</td>";

            if(names[i]=='严重')
            {
                text +="<td align='center' width='150'><font color='red'>"+counts[i]+"</font>个</td>";
                severityCount = counts[i];
            }else{
                text +="<td align='center' width='150'>"+counts[i]+"个</td>";
            }

            text += "</tr>";
            sum += counts[i];
        }

        text += "</table>";

        var severity="";
        if(severityCount*100/sum>30)
        {
            severity = "<font color='red'>高</font>";
        }
        else
        {
            severity = "中";
        }

        var textTitle= "<br><center>风险发生等级为:&nbsp;"+severity+"</center><br>";

        document.getElementById("severityTotalShow").innerHTML=textTitle+text;
    });

    // 风险发生频率
    dwrStuffRiskStat.queryRiskFrequency(o,function(data){
        myChart("riskFrequency",data,function(event){
              // 清空参数
              clear();

              // 拿到Id
              var id =   event.point.id;

              $("#USER_ID").val(userId);

              $("#REPORT_ID").val(id);

              // 加载表格
              reload("riskFrequencyGrid");
        });

         initTable("riskFrequencyGrid");
    });

    // 风险发生偏好
    dwrStuffRiskStat.queryRiskPreferences(o,function(data){
        myChart("riskPreferences",data,function(event){
            // 清空参数
            clear();

            // 拿到Id
            var id = event.point.id;

            $("#USER_ID").val(userId);

            $("#RISK_TYPE").val(id);

            // 加载表格
            reload("riskPreferencesGrid");
        });

         initTable("riskPreferencesGrid");
    });

    // 风险整改情况
    dwrStuffRiskStat.queryRiskRectify(o,function(data){

        // 生成图表
        myChart("problemRectify",data,function(event){
            // 清空参数
            clear();

            // 拿到项目ID
            var projectId = event.point.id;

            // 拿到整改情况datavalue
            var typeId = event.point.series.options.seriesId;

            $("#USER_ID").val(userId);

            $("#REPORT_ID").val(projectId);

            $("#REFORM_STATUS").val(typeId);

            // 加载表格
            reload("problemRectificationGrid");
        });

         initTable("problemRectificationGrid");
    });

    // 风险严重程度
    dwrStuffRiskStat.queryRiskSeverity(o,function(data){
        myChart("riskSeverity",data,function(event){
            // 清空参数
            clear();

            // 拿到项目ID
            var projectId =   event.point.id;

            // 拿到严重程度情况datavalue
            var typeId = event.point.series.options.seriesId;

            $("#USER_ID").val(userId);

            $("#REPORT_ID").val(projectId);

            $("#SEVERITY_LEVEL").val(typeId);

            reload("riskSeverityGrid");
        });

         initTable("riskSeverityGrid");
    });
}

// 点击问题发生频率柱子加载数据
function loadRisks(containerId)
{
    // 为表格加载数据
    new AbmsGrid(containerId,{
        colNames:['id','报告标题', '审计问题', '严重程度','类别'],
        colModel:[
            {name:'ID',key:true,width:55,hidden:true},
            {name:'REPORT_TITLE',width:200},
            {name:'RISK_CONTENT', width:100},
            {name:'SEVERITY_LEVEL', width:50,align:'center'},
            {name:'RISK_TYPE', width:100}
        ],
        toolbar:false,
        postParamNames:['USER_ID','REPORT_ID','RISK_TYPE','REFORM_STATUS','SEVERITY_LEVEL'],
        _pageSql:'htsc.auditrisk.getRisks',
        showPagerTool:true,
        loadDataFlag:false,
        caption: "风险审计问题"
    });
}

// 重新加载
function reload(containerId)
{

    //  重新刷新
    //  $("#"+containerId).trigger("reloadGrid");
    queryGridData(containerId);
}

// 初始化表格
function initTable(ID)
{
    // 先清空参数
    clear();

    // 重新加载
    loadRisks(ID);
}

// 清空参数
function clear()
{
    $("#USER_ID").val('');
    $("#REPORT_ID").val('');
    $("#RISK_TYPE").val('');
    $("#REFORM_STATUS").val('');
    $("#SEVERITY_LEVEL").val('');
};

</script>

****************************************************************************************************************
****************************************************封装工具:myChart.js*****************************************
///////////////////////////////////////////////////组件的主题
/**
* Chart主题
* @author Torstein Honsi
*/
Highcharts.theme = {
     // 默认颜色
     colors:['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    ,chart:{
        backgroundColor:{
            linearGradient:{ x1:0, y1:0, x2:1, y2:1 }
            ,stops:[
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        }
        ,borderWidth:2
        ,plotBackgroundColor:'rgba(255, 255, 255, .9)'
        ,plotShadow:true
        ,plotBorderWidth:1
    }
    ,title:{
        style:{
            color:'#000'
            ,font:'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    }
    ,subtitle:{
        style:{
            color:'#666666'
            ,font:'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    }
    ,xAxis:{
         gridLineWidth:1
        ,lineColor:'#000'
        ,tickColor:'#000'
        ,labels:{
            style:{
                color:'#000'
                ,font:'11px Trebuchet MS, Verdana, sans-serif'
            }
        }
        ,title:{
            style:{
                color:'#333'
                ,fontWeight:'bold'
                ,fontSize:'12px'
                ,fontFamily:'Trebuchet MS, Verdana, sans-serif'
            }
        }
    }
    ,yAxis:{
         minorTickInterval:'auto'
        ,lineColor:'#000'
        ,lineWidth:1
        ,tickWidth:1
        ,tickColor:'#000'
        ,labels:{
            style:{
                color:'#000'
                ,font:'11px Trebuchet MS, Verdana, sans-serif'
            }
        }
        ,title:{
            style:{
                color:'#333'
                ,fontWeight:'bold'
                ,fontSize:'12px'
                ,fontFamily:'Trebuchet MS, Verdana, sans-serif'
            }
        }
    }
    ,legend:{
        itemStyle:{
            font:'9pt Trebuchet MS, Verdana, sans-serif'
            ,color:'black'
        }
        ,itemHoverStyle:{
            color:'#039'
        }
        ,itemHiddenStyle:{
            color:'gray'
        }
    }
   ,labels:{
        style:{
            color:'#99b'
        }
    }
   ,navigation:{
        buttonOptions:{
            theme:{
                stroke:'#CCCCCC'
            }
        }
    }
};

// 应用主题
var highchartsOptions =Highcharts.setOptions(Highcharts.theme);

// 颜色库
var CHART_COLOR ={
// 深红色
0:"#8B0000",
// 纯红色
1:"#FF0000",
// 橘红色
2:"#EC561B",
// 橙色
3:"#FFA500",
// 纯黄色
4:"#FFFF00",
// 浅黄色
5:"#FFC73C",
// 绿黄色
6:"#ADFF2F",
// 深绿色
7:"#006400",
// 纯绿色
8:"#50B332",
// 淡绿色
9:"#90EE90",
// 深青色
10:"#008B8B",
// 青色
11:"#00FFFF",
// 淡青色
12:"#E1FFFF",
// 深蓝色
13:"#00008B",
// 纯蓝色
14:"#58DC7",
// 淡天蓝色
15:"#87CEFA",
// 淡蓝色
16:"#86D6F1",
// 深紫罗兰色
17:"#9400D3",
// 紫色
18:"#800080",
// 淡紫色
19:"#E7638B",
// 深灰色
20:"#A9A9A9",
// 灰色
21:"#808080",
// 淡灰色
22:"#CECECB",
// 纯黑
23:"#000000",
// 米色
24:"#FBFCA4"
};

// 配置颜色
var COLOR_DICTIONARY={
//8种风险问题大类别
"0-01":2,
"0-02":5,
"0-03":8,
"0-04":19,
"0-05":16,
"0-06":22,
"0-07":24,
"0-08":8,

//3种问题严重程度
"1-1":16,
"1-2":5,
"1-3":2,

//4种问题整改类型
"6-1":15,
"6-2":5,
"6-3":8,
"6-4":2
};


////////////////////////////////////////////////////////////封装的组件///////////////////////////////////
// 图标X轴标题的倾斜度
var XAXIS_ROTATION = -30;

// 单个系列对象
function MyData(id,name,y){
    this.id = id;
    this.name=name;
    this.y=y;
}

// 系列集合对象
function MySeries(type,seriesId,name,data){
    this.type = type;
    this.seriesId = seriesId;
    this.name = name;
    this.data = data;
}

// 封装单个系列对象
function datas(columnType,categories,chartData)
{
    var data = new Array();
    if(chartData!=null &&chartData.length>0)
    {
        for(var i = 0;i<categories.length;i++){
            // 生成series数据
            var b = new MyData(categories[i].id,categories[i].name,chartData[i]);

            // 如果是堆叠类型 数值为0的,处理为null,在图标上不显示
            if(columnType==1&&b.y==0){  b.y= null;  }

            // 设置系列颜色
            setColor(b,categories[i]['colorKey']);

            data.push(b);
        };
    }

    return data;
}

// 封装系列集合对象
function getSeries(obj) {

    var categories = obj['categories']

    // 拿到系列数据
    var seriesList = obj['seriesList'];

    // 报表类型
    var type =  obj['chartType'];

    // 针对堆叠类型
    var columnType = obj['columnType'];

    // 系列
    var series = new Array();

    // 如果系列数据不为空
    if(seriesList!=null&&seriesList.length>0)
    {
        var column = {};
        var data ={};
        var b ={};
        for( var i= 0;i<seriesList.length;i++)
        {
            column = seriesList[i];
            // 创建单个系列对象
            data = datas(columnType,categories,column['chartData']);
            if(data.length==0){
               data=datas(columnType,categories,column['floatData']);
            }

            // 创建系列集合对象
            b = new MySeries(type,column['id'],column['name'],data);

            // 设置系列颜色
            setColor(b,column['colorKey']);

            series.push(b);
        }
    }

    return series;
};

// 设置图标颜色
function setColor(obj,colorKey)
{
  if(colorKey!=null&&colorKey!=""){
    obj.color = CHART_COLOR[COLOR_DICTIONARY[colorKey]%25];
  }
}

// 封装x轴显示的数据
function xNames(obj)
{
   var categories = obj['categories'];
   var names = new Array();
   for(var i=0;i<categories.length;i++)
   {
       names.push(categories[i].name);
   }

   return names;
}

// 封装mychart对象
function myChart(containerId, obj, funcCode)
{
    // 组建ID
this.containerId = containerId;
    // 图标类型
    var chartType = obj['chartType'];
    // 宽度
var width = obj['width'];
    // 高度
var height = obj['height'];
    // 标题
var title = obj['title'];
    // 副标题
    var subtitle = obj['subtitle'];
    // x轴上的类型标题
var xCategories = xNames(obj);
    // x轴标题
var xTitle = obj['xTitle'];
    // y轴上的标题
var yTitle = obj['yTitle'];
    // 提示的时候的单位
    var unit = obj['unit'];
    // 特殊的几种类型图标
    var columnType = obj['columnType'];
    // 点击图标的事件
var functionCode = funcCode;
    // 系列集合
    var series =  getSeries(obj);

    var chart;

/************************************
*      折线图                       *
************************************/
if (chartType == "line")
    {
$(function() {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart : {
renderTo : containerId,
width : width,
height : height,
type : chartType
},
                    // 到处功能的国际化
                    lang:{
                        exportButtonTitle: '导出',
                        printButtonTitle: '打印',
                        downloadJPEG:"下载JPEG 图片",
                        downloadPDF: "下载PDF文档",
                        downloadPNG: "下载PNG 图片",
                        downloadSVG: "下载SVG 矢量图"
                    },
                    // 版权信息
credits : {
enabled : false
},
                    // 标题
title : {
text : title
},
                    // 副标题
                    subtitle: {
                        text: subtitle
                    },
xAxis : {
categories : xCategories,
labels : {
//align : 'center',
formatter : function() {
return this.value;
},
rotation : XAXIS_ROTATION,
staggerLines : 1
},
tickInterval : 1,
title : {
text : xTitle
}
},
yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},
//是否有竖线
/* tooltip: {
                   crosshairs: true
},*/
plotOptions : {
series : {
cursor : 'pointer',
events : {
legendItemClick : false
},
pointWidth : 30
},
line : {
// 允许线性图上的数据点进行点击
allowPointSelect : true,
// 数据点的点击事件
events : {
click : functionCode
},
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
point : {
events : {
click : functionCode
}
},
// 是否在图注中显示。
showInLegend : true,
// 调整图像顺序关系
zIndex : 3
}
},
series : series
});

});
});
};

/************************************
*      纵向堆叠柱状图                 *
************************************/
if (chartType=="column"&&columnType == 1)
{
       $(function () {
         $('#'+containerId).highcharts({
            chart: {
                width : width,
                height : height,
                type: chartType
            },
            credits : {
                 enabled : false
            },
            // 到处功能的国际化
            lang:{
                 exportButtonTitle: '导出',
                 printButtonTitle: '打印',
                 downloadJPEG:"下载JPEG 图片",
                 downloadPDF: "下载PDF文档",
                 downloadPNG: "下载PNG 图片",
                 downloadSVG: "下载SVG 矢量图"
            },
            title: {
                text: title
            },
            xAxis: {
                categories: xCategories,
                labels : {
                    // align : 'center',
                    formatter : function() {
                        return this.value;
                    },
                    rotation : XAXIS_ROTATION, // 倾斜度
                    staggerLines : 1,
                    style:{fontSize:10}
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: yTitle
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y + unit + '<br/>'+
                        '总数: '+ this.point.stackTotal + unit;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    },
                    // 允许线性图上的数据点进行点击
                    allowPointSelect : true,

                    // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
                    point : {
                        events : {
                            click : functionCode
                        }
                    },
                    // 是否在图注中显示。
                    showInLegend : true,

                    // 调整图像顺序关系
                    zIndex : 3
                }
            },
            series: series
        });
    });
    }

/************************************
*      纵向柱形图                    *
************************************/
if (chartType == "column"&&columnType!= 1)
{
$(function() {
$(document).ready(function() {
chart = new Highcharts.Chart({
                // Chart图表区选项用于设置图表区相关属性
chart : {
renderTo : containerId,
width : width,
height : height,
type : chartType
},
                // 到处功能的国际化
                lang:{
                    exportButtonTitle: '导出',
                    printButtonTitle: '打印',
                    downloadJPEG:"下载JPEG 图片",
                    downloadPDF: "下载PDF文档",
                    downloadPNG: "下载PNG 图片",
                    downloadSVG: "下载SVG 矢量图"
                },
credits : {
enabled : false
},
title : {
text : title
},
                subtitle: {
                    text: subtitle
                },
xAxis : {
categories : xCategories,
labels : {
    // align : 'center',    // X轴标题的位置
                        // 返回的格式
formatter : function() {
return this.value;
},
rotation : XAXIS_ROTATION, // 倾斜度
staggerLines : 1,
                        style:{fontSize:10}
},
tickInterval : 1,
title : {
text : xTitle
}
},
yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.x +'</b><br/>'+
                            this.series.name +': '+ this.y + unit;
                    }
                },
plotOptions : {
series : {
cursor : 'pointer',
events : {
                            // 允许切换系列
legendItemClick : function(event){
                                return true;
                            }
},
pointWidth : 30
},
dataLabels : {
enabled : true
},
column : {
                        dataLabels:{
                            enabled:true //是否柱状图上显示数值
                        },

                        // 允许线性图上的数据点进行点击
allowPointSelect : true,

// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
point : {
events : {
click : functionCode
}
},
// 是否在图注中显示。
showInLegend : true,
// 调整图像顺序关系
zIndex : 3
}
},
                series : series
});
});
});
}

/************************************
*      曲线图                       *
************************************/
if (chartType == "spline")
{
$(function() {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart : {
renderTo : containerId,
width : width,
                    height : height,
type : chartType
},
credits : {
enabled : false
},
title : {
text : title
},
                subtitle: {
                    text: subtitle
                },
xAxis : {
categories : xCategories,
labels : {
//align : 'center',
formatter : function() {
return this.value;
},
rotation : XAXIS_ROTATION,
staggerLines : 1
},
tickInterval : 1,
title : {
text : xTitle
}
},
yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},
plotOptions : {

series : {
cursor : 'pointer',
events : {
legendItemClick : false
},
pointWidth : 30
},
spline : {
// 允许线性图上的数据点进行点击
allowPointSelect : true,
// 数据点的点击事件
events : {
click : functionCode
},
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
point : {
events : {
click : functionCode
}
},
// 是否在图注中显示。
showInLegend : true,
// 调整图像顺序关系
zIndex : 3
}

},
                series : series
});

});
});
}

/************************************
*      饼型图                       *
************************************/
if (chartType == "pie") {
$(function() {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart : {
renderTo : containerId,
width : width,
                    height : height,
type : chartType
},
                // 到导出功能的国际化
                lang:{
                    exportButtonTitle: '导出',
                    printButtonTitle: '打印',
                    downloadJPEG:"下载JPEG 图片",
                    downloadPDF: "下载PDF文档",
                    downloadPNG: "下载PNG 图片",
                    downloadSVG: "下载SVG 矢量图"
                },
credits : {
enabled : false
},
title : {
text : title
},
                subtitle: {
                    text: subtitle
                },
xAxis : {
categories : xCategories,
labels : {
                        // 标题显示的位置
                        //align : 'center',
                        // X轴上显示的标题格式
                        formatter : function() {
                            return this.value;
                        },
                        // 倾斜度
                        rotation : XAXIS_ROTATION,
                        staggerLines : 1,
                        style:{fontSize:10}
},
tickInterval : 1,
title : {
text : xTitle
}
},
yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},
tooltip: {
formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                         Highcharts.numberFormat(this.y, 0, ',') + unit +')';
         },
         useHTML:true
            },
plotOptions : {
dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    pie:{
                        // 是否允许扇区点击
                        allowPointSelect: true,
                        // 点击后,滑开的距离
                        slicedOffset: 5,
                        // 饼图的中心坐标
                        // 饼图的大小
                        // 数据标签
                        dataLabels: {
                            format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
                            // 是否允许标签
                            enabled: true,
                            // 标签与图像元素之间的间距
                            distance: 10
                        },
                        // 数据点的点击事件
                        events:{
                            click: functionCode
                        },
                        // 是否忽略隐藏的项
                        ignoreHiddenPoint: true,
                        // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
                        point:{
                            events:{
                                click: functionCode
                            }
                        },
                        // 是否在图注中显示。
                        showInLegend: true,
                        // 调整图像顺序关系
                        zIndex: 0
                    }
                },   
series : series
});

});
});
}

/************************************
*      正反堆叠条形图                *
************************************/
if(chartType=="bar"&&columnType==2)
{
       $(function () {
           $('#'+containerId).highcharts({
               chart: {
                   width : width,
                   height : height,
                   type : chartType
               },
               // 到导出功能的国际化
               lang:{
                   exportButtonTitle: '导出',
                   printButtonTitle: '打印',
                   downloadJPEG:"下载JPEG 图片",
                   downloadPDF: "下载PDF文档",
                   downloadPNG: "下载PNG 图片",
                   downloadSVG: "下载SVG 矢量图"
               },
               title: {
                   text: title
               },
               subtitle: {
                   text: subtitle
               },
               xAxis: [{
                   categories: xCategories,
                   reversed: false
               }, {
                   opposite: true,
                   reversed: false,
                   categories: xCategories,
                   linkedTo: 0
               }],
               yAxis: {
                   title: {
                       text: yTitle
                   },
                   labels: {
                       formatter: function(){
                           return Math.abs(this.value)  + unit;
                       }
                   }
               },

               plotOptions: {
                   series: {
                       stacking: 'normal'
                   }
               },

               tooltip: {
                   formatter: function(){
                       return '<b>'+ this.point.category +'</b><br/>'+
                           yTitle +":"+ Math.abs(this.point.y)+ unit;
                   }
               },

               series: series
           });
       });
}

/************************************
*      横向条形图                    *
************************************/
if (chartType == "bar"&&columnType!=2) {
$(function() {
$(document).ready(function() {

chart = new Highcharts.Chart({

chart : {
renderTo : containerId,
width : width,
                    height : height,
type : chartType
},
                // 到处功能的国际化
                lang:{
                    exportButtonTitle: '导出',
                    printButtonTitle: '打印',
                    downloadJPEG:"下载JPEG 图片",
                    downloadPDF: "下载PDF文档",
                    downloadPNG: "下载PNG 图片",
                    downloadSVG: "下载SVG 矢量图"
                },
credits : {
enabled : false
},

title : {
text : title
},
                subtitle: {
                    text: subtitle
                },
xAxis : {
categories : xCategories,
labels : {
//align : 'center',
formatter : function() {
return this.value;
},
rotation :0,
staggerLines : 1
},
tickInterval : 1,
title : {
text : xTitle
}
},

yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},

plotOptions : {

series : {
cursor : 'pointer',
events : {
                            // 允许系列可以切换
legendItemClick : true
},
pointWidth : 30
},

bar : {
// 允许线性图上的数据点进行点击
allowPointSelect : true,
// 数据点的点击事件
events : {
click : functionCode
},
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
point : {
events : {
click : functionCode
}
},
// 是否在图注中显示。
showInLegend : true,
// 调整图像顺序关系
zIndex : 3
}

},
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.x +'</b><br/>'+
                            this.series.name +': '+ this.y + unit;
                    }
                },

                series : series
});

});
});
}

/************************************
*      散播型                       *
************************************/
if (chartType == "scatter") {
$(function() {
$(document).ready(function() {

chart = new Highcharts.Chart({

chart : {
renderTo : containerId,
width : width,
                    height : height,
type : chartType
},
                // 到处功能的国际化
                lang:{
                    exportButtonTitle: '导出',
                    printButtonTitle: '打印',
                    downloadJPEG:"下载JPEG 图片",
                    downloadPDF: "下载PDF文档",
                    downloadPNG: "下载PNG 图片",
                    downloadSVG: "下载SVG 矢量图"
                },
credits : {
enabled : false
},

title : {
text : title
},
                subtitle: {
                    text: subtitle
                },

xAxis : {
categories : xCategories,
labels : {
//align : 'center',
formatter : function() {
return this.value;
},
rotation : XAXIS_ROTATION,
staggerLines : 1
},
tickInterval : 1,
title : {
text : xTitle
}
},

yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},

plotOptions : {

series : {
cursor : 'pointer',
events : {
legendItemClick : false
},
pointWidth : 30
},

scatter : {
// 允许线性图上的数据点进行点击
allowPointSelect : true,
// 数据点的点击事件
events : {
click : functionCode
},
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
point : {
events : {
click : functionCode
}
},
// 是否在图注中显示。
showInLegend : true,
// 调整图像顺序关系
zIndex : 3
}

},

                series : series
});

});
});
}

/************************************
*      折线区域图                    *
************************************/
if (chartType == "area") {
$(function() {
$(document).ready(function() {

chart = new Highcharts.Chart({

chart : {
renderTo : containerId,
width : width,
                    height : height,
type : chartType
},
lang:{
exportButtonTitle: '导出',
printButtonTitle: '打印',
downloadJPEG:"下载JPEG 图片",
downloadPDF: "下载PDF文档",
downloadPNG: "下载PNG 图片",
downloadSVG: "下载SVG 矢量图"
},
credits : {
enabled : false
},

title : {
text : title
},
                subtitle: {
                    text: subtitle
                },

xAxis : {
categories : xCategories,
labels : {
//align : 'center',
formatter : function() {
return this.value;
},
rotation : XAXIS_ROTATION,
staggerLines : 1
},
tickInterval : 1,
title : {
text : xTitle
}
},

yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},

plotOptions : {

series : {
cursor : 'pointer',
events : {
legendItemClick : false
},
pointWidth : 30
},

area : {
// 允许线性图上的数据点进行点击
allowPointSelect : true,

// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
point : {
events : {
click : functionCode
}
},
// 是否在图注中显示。
showInLegend : true,
// 调整图像顺序关系
zIndex : 3
}
},
                series : series
});

});
});
}

/************************************
*       曲线区域图                    *
************************************/
if (chartType == "areaspline") {
$(function() {
$(document).ready(function() {

chart = new Highcharts.Chart({

chart : {
renderTo : containerId,
width : width,
                    height : height,
type : chartType
},
credits : {
enabled : false
},

title : {
text : title
},
                subtitle: {
                    text: subtitle
                },

xAxis : {
categories : xCategories,
labels : {
//align : 'center',
formatter : function() {
return this.value;
},
rotation : XAXIS_ROTATION,
staggerLines : 1
},
tickInterval : 1,
title : {
text : xTitle
}
},

yAxis : {
labels : {
align : 'right',
formatter : function() {
return this.value;
}
},
tickInterval : 3,
title : {
text : yTitle
}
},

plotOptions : {

series : {
cursor : 'pointer',
events : {
legendItemClick : false
},
pointWidth : 30
},

areaspline : {
// 允许线性图上的数据点进行点击
allowPointSelect : true,
// 数据点的点击事件
events : {
click : functionCode
},
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
point : {
events : {
click : functionCode
}
},
// 是否在图注中显示。
showInLegend : true,
// 调整图像顺序关系
zIndex : 3
}

},

                series : series
});
});
});
  }
};

// 当数据为空时的显示
function noData_column(containerId){
    $(function () {
        $('#'+containerId).highcharts({
            chart: {
                type: 'column'
            },
            credits : {
                enabled : false
            },
            title: {
                text: '没有符合条件的数据'
            },
            xAxis: {
                categories: [
                    ' ',' ',' ',' ',' ',' ',' ',
                    ' ',' ',' ',' ',' ',' ',' ',
                    ' ',' ',' ',' ',' ',' ',' ',
                    ' ',' ',' ',' ',' ',' ',' '
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.1,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'no data',
                data: [0, 0, 0,0, 0, 0,0,0, 0,0, 0, 0,0,0,0, 0, 0,0, 0, 0,0,0, 0,0, 0, 0,0,0]
            }]
        });
    });
}

// 没有数据时的饼图
function noData_pie(containerId)
{
    $(function () {
        $('#'+containerId).highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            credits : {
                enabled : false
            },
            title: {
                text: '没有符合条件的数据'
            },
            tooltip: {
                pointFormat: '{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer'
                }
            },
            series: [{
                type: 'pie',
                name: 'no data',
                data: [
                    {color:'#E5E5E5',name:'no data',y:100}
                ]
            }]
        });
    });
}

************************************************************************************************
************************************************后台数据封装************************************
//////////////////////////DWR操作
package com.htsc.abms.auditrisk.dwr;

import com.htsc.abms.auditrisk.model.Model;
import com.htsc.abms.auditrisk.model.ChartType;
import com.htsc.abms.auditrisk.model.ChartsInfo;
import com.htsc.abms.auditrisk.service.AuditRiskService;
import org.springframework.beans.factory.annotation.Autowired;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-21
* Time: 上午10:14
* 被稽查人员风险分析
*/
public class DwrStuffRiskStat {
    /**
     * 风险分析业务处理
     */
    @Autowired
    private AuditRiskService auditRiskService;

    /**
     * 查询问题类型汇总
     *
     * @param model
     * @return
     */
    public ChartsInfo queryRiskTypeTotal(Model model) {
        // 创建图表
        ChartsInfo data = new ChartsInfo("各类型问题发生总体情况", "", ChartType.CHART_PIE);
        data.setUnit("个");
        data.setWidth(500);

        // 封装业务数据
        auditRiskService.setTypeTotalChart(data, model.getId());

        return data;
    }

    /**
     * 查选整改情况汇总
     *
     * @param model
     * @return
     */
    public ChartsInfo queryRiskRectifyTotal(Model model) {
        // 创建图表
        ChartsInfo data = new ChartsInfo("问题整改总体情况", "", ChartType.CHART_PIE);
        data.setUnit("个");
        data.setWidth(500);

        // 封装业务数据
        auditRiskService.setRectifyTotalChart(data, model.getId());

        return data;
    }

    /**
     * 查选严重等级汇总
     *
     * @param model
     * @return
     */
    public ChartsInfo queryRiskSeverityTotal(Model model) {
        // 创建图表
        ChartsInfo data = new ChartsInfo("问题发生严重等级分布", "", ChartType.CHART_PIE);
        data.setUnit("个");
        data.setWidth(500);

        // 设置图标数据
        auditRiskService.setSeverityTotalChart(data, model.getId());
        return data;
    }

    /**
     * 查询风险频率
     *
     * @param model
     * @return
     */
    public ChartsInfo queryRiskFrequency(Model model) {
        // 创建图表
        ChartsInfo data = new ChartsInfo("风险发生频率", "问题数 (个)", ChartType.CHART_COLUMN);
        data.setUnit("个");
        // 设置图标数据
        auditRiskService.setRiskFrequencyChart(data, model.getId());

        return data;
    }

    /**
     * 查询问题整改情况
     *
     * @param model
     * @return
     */
    public ChartsInfo queryRiskRectify(Model model) {
        // 创建图表
        ChartsInfo data = new ChartsInfo("问题整改情况", "问题数 (个)", ChartType.CHART_COLUMN);
        data.setUnit("个");
        data.setColumnType(ChartsInfo.COLUMN_TYPE_CASCADE);

        // 设置图标数据
        auditRiskService.setRiskRectifyChart(data, model.getId());

        return data;
    }

    /**
     * 查询问题偏好
     *
     * @param model
     * @return
     */
    public ChartsInfo queryRiskPreferences(Model model) {
        // 创建图表
        ChartsInfo data = new ChartsInfo("风险发生偏好", "问题数 (个)", ChartType.CHART_COLUMN);
        data.setUnit("个");

        // 设置图标数据
        auditRiskService.setRiskPreferencesChart(data, model.getId());

        return data;
    }

    /**
     * 查询问题严重程度
     *
     * @param model
     * @return
     */
    public ChartsInfo queryRiskSeverity(Model model) {
        // 创建图表
        ChartsInfo data = new ChartsInfo("风险发生程度详情", "问题数 (个)", ChartType.CHART_COLUMN);
        data.setUnit("个");

        // 设置图标数据
        auditRiskService.setRiskSeverityChart(data, model.getId());

        return data;
    }

}

/////////////////////////////////////////Service类操作
package com.htsc.abms.auditrisk.service;

import com.htsc.abms.auditrisk.dao.AuditRiskDao;
import com.htsc.abms.auditrisk.model.*;
import com.htsc.abms.auditrisk.util.RiskStatServiceUtil;
import com.lhzq.ibms.commons.model.DataDictionaryDetail;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.*;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-22
* Time: 下午11:57
* 被稽查人员审计风险分析
*/
@Service
@Transactional
public class AuditRiskService {
    /**
     * 风险审计持久层
     */
    @Autowired
    private AuditRiskDao auditRiskDao;

    /**
     * 辅助工具
     */
    @Autowired
    private RiskStatServiceUtil riskStat;

    /**
     * 设置类型汇总视图数据
     *
     * @param chart 图表
     * @param userId  用户ID
     */
    public void setTypeTotalChart(ChartsInfo chart, String userId) {
        // 查询数据
        List<Model> data = auditRiskDao.getRiskTypeTotal(newParam(userId));

        Series ss = new Series("001", "所占比例");
        ss.setChartData(riskStat.setCategories(chart, data));
        chart.getSeriesList().add(ss);
    }

    /**
     * 设置整改汇总数据
     *
     * @param chart 图表
     * @param userId  用户ID
     */
    public void setRectifyTotalChart(ChartsInfo chart, String userId) {
        List<Model> data = auditRiskDao.getRiskRectifyTotal(newParam(userId));

        Series ss = new Series("001", "所占比例");
        ss.setChartData(riskStat.setCategories(chart, data));
        chart.getSeriesList().add(ss);
    }

    /**
     * 设置严重程度汇总数据
     *
     * @param chart 图表
     * @param userId  用户ID
     */
    public void setSeverityTotalChart(ChartsInfo chart, String userId) {
        List<Model> data = auditRiskDao.getRiskSeverityTotal(newParam(userId));

        Series ss = new Series("001", "所占比例");
        ss.setChartData(riskStat.setCategories(chart, data));
        chart.getSeriesList().add(ss);
    }

    /**
     * 设置项目发生频率数据
     *
     * @param chart 图表
     * @param userId  用户ID
     */
    public void setRiskFrequencyChart(ChartsInfo chart, String userId) {
        List<Model> data = auditRiskDao.getRiskFrequency(newParam(userId));

        Series ss = new Series("001", "风险发生频率");
        ss.setChartData(riskStat.setCategories(chart, data));
        chart.getSeriesList().add(ss);
    }

    /**
     * 设置风险发生偏好统计数据
     *
     * @param chart 图标
     * @param userId  用户ID
     */
    public void setRiskPreferencesChart(ChartsInfo chart,String userId) {
        List<Model> data = auditRiskDao.getRiskPreferences(newParam(userId));
        Series ss = new Series("001", "风险发生偏好");
        ss.setChartData(riskStat.setCategories(chart, data));
        chart.getSeriesList().add(ss);
    }

    /**
     * 设置风险等级统计数据
     *
     * @param chart 图表
     * @param userId  用户ID
     */
    public void setRiskRectifyChart(ChartsInfo chart,String userId) {
        List<Model> data = auditRiskDao.getRiskRectification(newParam(userId));

        // 查询整改类型
        List<Model> rectTypes = auditRiskDao.getTypeDictionary(DataDictionaryDetail.DATA_TYPE_RECTIFY);
        riskStat.setChartData(chart, rectTypes, data);
    }

    /**
     * 设置严重程度统计数据
     *
     * @param chart 图表
     * @param userId  用户ID
     */
    public void setRiskSeverityChart(ChartsInfo chart, String userId) {
        List<Model> data = auditRiskDao.getRiskSeverity(newParam(userId));

        // 查询整改类型
        List<Model> rectTypes = auditRiskDao.getTypeDictionary(DataDictionaryDetail.DATA_TYPE_SEVERITY);
        riskStat.setChartData(chart, rectTypes, data);
    }

    /**
     * 封装参数
     *
     * @param userId
     * @return
     */
    private Map newParam(String userId) {
        Map map = new HashMap();
        map.put("USER_ID", userId);

        return map;
    }

}

////////////////////////////////////////////////////Dao的操作类
package com.htsc.abms.auditrisk.dao;

import com.htsc.abms.auditrisk.model.Model;
import com.htsc.abms.auditrisk.model.QueryCondition;
import com.lhzq.ibms.commons.dao.EntityDao;
import org.springframework.stereotype.Repository;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-22
* Time: 下午7:02
* 风险发生频率统统计持久层
*/
@Repository
public class AuditRiskDao extends EntityDao {
    /**
     * 设置SQL空间
     */
    public AuditRiskDao() {
        this.setNamespace("htsc.auditrisk");
    }

    /**
     * 根据用户查询风险类型汇总
     *
     * @param param
     * @return
     */
    public List<Model> getRiskTypeTotal(Map param)
    {
        return queryForList("getRiskTypeTotal", param, Model.class);
    }

    /**
     * 根据用户查询风险整改汇总
     *
     * @param param
     * @return
     */
    public List<Model> getRiskRectifyTotal(Map param)
    {
        return queryForList("getRiskRectifyTotal", param, Model.class);
    }

    /**
     * 根据用户查询风险严重等级汇总
     *
     * @param param
     * @return
     */
    public List<Model> getRiskSeverityTotal(Map param)
    {
        return queryForList("getRiskSeverityTotal", param, Model.class);
    }

    /**
     * 根据用户查询风险频率
     *
     * @param param
     * @return
     */
    public List<Model> getRiskFrequency(Map param)
    {
        return queryForList("getRiskFrequency", param, Model.class);
    }

    /**
     * 根据用户查询风险偏好
     *
     * @param param
     * @return
     */
    public List<Model> getRiskPreferences(Map param)
    {
        return queryForList("getRiskPreferences", param, Model.class);
    }


    /**
     * 根据用户查询风险整改情况
     *
     * @param param
     * @return
     */
    public List<Model> getRiskRectification(Map param)
    {
        return queryForList("getRiskRectification", param, Model.class);
    }

    /**
     * 根据项目查询风险严重程度
     *
     * @param param
     * @return
     */
    public List<Model> getRiskSeverity(Map param)
    {
        return queryForList("getRiskSeverity", param, Model.class);
    }

    /**
     * 根据类型查询数据词典类型
     *
     * @param dataType
     * @return
     */
    public List<Model> getTypeDictionary(int dataType) {
        Map map = new HashMap();
        map.put("DATATYPE", dataType);

        return queryForList("getTypeDictionary", map, Model.class);
    }


    /**
     * 查询所有的单位数
     * @param map
     * @return
     */
    public Integer getReportCounts(Map map)
    {
        return this.queryForInt("getReportCounts",map);
    }

    /**
     * 查询风险类型
     * @param map
     * @return
     */
    public List<Model> getAuditRiskType(Map map)
    {
        return this.queryForList("getAuditRiskType",map,Model.class);
    }

    /**
     * 根据
     * @param map
     * @return
     */
    public List<Model> getAuditRiskTypeByCode(Map map)
    {
        return this.queryForList("getAuditRiskTypeByCode",map,Model.class);
    }

    /**
     * 查询各类的损失金额
     * @param map
     * @return
     */
    public List<Model> getLossSituation(Map map)
    {
        return this.queryForList("getLossSituation",map,Model.class);
    }

    // 机构总数
    public List<Model> getTotalOrgCount(){
        Map map = new HashMap();
        return this.queryForList("getTotalOrgCount",map,Model.class);
    }

    // 风险问题覆盖率
    public List<Model> getCoverageRate(Map map){
        return this.queryForList("getCoverageRate",map,Model.class);
    }


    // 风险问题发生地域性
    public List<Model> getHappenArea(Map map){
        return this.queryForList("getHappenArea",map,Model.class);
    }

    // 风险问题整改情况-所属区域
    public List<Model> queryRectifyByArea(Map map){
        return this.queryForList("getRectifyByArea",map,Model.class);
    }

    public List<Model> getMonthSeverity(Map map)
    {
        return this.queryForList("getMonthSeverity",map,Model.class);
    }

    // 风险问题整改情况-风险大类
    public List<Model> queryRectifyByRiskType(Map map){
        return this.queryForList("getRectifyByRiskType",map,Model.class);
    }

    // 风险问题整改情况-严重程度
    public List<Model> queryRectifyBySeverityLevel(Map map){
        return this.queryForList("getRectifyBySeverityLevel",map,Model.class);
    }

}

////////////////////////////////////////HighChart的X轴上的单个系列数据封装
package com.htsc.abms.auditrisk.model;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-24
* Time: 下午4:05
* Chart标题分类
*/
public class Category
{
    protected String id;

    protected String name;

    protected String colorKey;

    public  Category(){};

    public Category(Model model) {
        this.id = model.getId();
        this.name = model.getName();
        this.colorKey =model.getColorKey();
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getColorKey() {
        return colorKey;
    }

    public void setColorKey(String colorKey) {
        this.colorKey = colorKey;
    }
}

//////////////////////////////////////////////////////HightChart基本信息封装
package com.htsc.abms.auditrisk.model;

import org.omg.CORBA.PUBLIC_MEMBER;

import java.util.ArrayList;
import java.util.List;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-21
* Time: 上午9:50
* 报表对象封装
*/
public class ChartsInfo
{
    /**
     * 默认的高度
     */
    public static final int DEFAULT_HEIGHT = 400;

    /**
     * 默认的宽度
     */
    public static final int DEFAULT_WIDTH = 1000;

    /**
     * 默认的单位
     */
    public static final String DEFAULT_UNIT = "个";

    /**
     * 堆叠柱状图
     */
    public static final int COLUMN_TYPE_CASCADE = 1;

    /**
     * 正反对比图
     */
    public static final int COLUMN_TYPE_OPPOSITE_CASCADE = 2;

    /**
     * 报表在页面上显示的宽度
     */
    private int width;

    /**
     * 报表在页面上显示的高度
     */
    private int height;

    /**
     * 报表名称
     */
    private String title;

    /**
     * 报表名称
     */
    private String subtitle;

    /**
     * 横坐标名称
     */
    private String xTitle;

    /**
     * 纵坐标名称
     */
    private String yTitle;

    /**
     * 提示单位
     */
    private String unit;

    /**
     * 报表类型(分为十种,在ChartType公共常量类定义)
     */
    private String chartType;

    /**
     * 特殊类型 1.表示堆叠柱状图 2.正反对比图 0.其他
     */
    private int columnType;

    /**
     * 横坐标所需列
     */
    private List<Category>  categories= new ArrayList<Category>();

    /**
     * 系列数据
     */
    private List<Series> seriesList = new ArrayList<Series>();

    public ChartsInfo(){}

    public ChartsInfo(String title, String yTitle, String chartType)
    {
        this.title = title;
        this.yTitle = yTitle;
        this.chartType = chartType;
        this.height = DEFAULT_HEIGHT;
        this.width = DEFAULT_WIDTH;
        this.unit = DEFAULT_UNIT;
    }

    public List<Category> getCategories() {
        return categories;
    }

    public void setCategories(List<Category> categories) {
        this.categories = categories;
    }

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getSubtitle() {
        return subtitle;
    }

    public void setSubtitle(String subtitle) {
        this.subtitle = subtitle;
    }

    public String getxTitle() {
        return xTitle;
    }

    public void setxTitle(String xTitle) {
        this.xTitle = xTitle;
    }

    public String getyTitle() {
        return yTitle;
    }

    public void setyTitle(String yTitle) {
        this.yTitle = yTitle;
    }

    public String getChartType() {
        return chartType;
    }

    public void setChartType(String chartType) {
        this.chartType = chartType;
    }

    public List<Series> getSeriesList() {
        return seriesList;
    }

    public void setSeriesList(List<Series> seriesList) {
        this.seriesList = seriesList;
    }

    public int getColumnType() {
        return columnType;
    }

    public void setColumnType(int columnType) {
        this.columnType = columnType;
    }

    public String getUnit() {
        return unit;
    }

    public void setUnit(String unit) {
        this.unit = unit;
    }
}


//////////////////////////////////////////////HighChart的X轴上系列集数据分装
package com.htsc.abms.auditrisk.model;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-21
* Time: 下午2:09
* 系列
*/
public class Series extends Category
{
    /**
     * 报表(纵坐标)值
     */
    private Integer[] chartData;

    private Float[] floatData;

    public  Series(){}

    public Series(String id,String name)
    {
        this.id =id;
        this.name = name;
    }

    public Integer[] getChartData() {
        return chartData;
    }

    public void setChartData(Integer[] chartData) {
        this.chartData = chartData;
    }

    public Float[] getFloatData() {
        return floatData;
    }

    public void setFloatData(Float[] floatData) {
        this.floatData = floatData;
    }
}


//////////////////////////////////////////////////对应数据库数据Model
package com.htsc.abms.auditrisk.model;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-22
* Time: 下午7:04
* 问题发生频率
*/
public class Model extends Category
{
    /**
     * 值
     */
    private Integer  value;

    /*
    * 多维度
    */
    private String typeId;

    /**
     * 类型ID
     */
    private String typeName;

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (!(o instanceof Model)) return false;

        Model model = (Model) o;

        if (!this.id.equals(model.id)) return false;
        if (!this.name.equals(model.name)) return false;
        if (this.value!=model.value) return false;
        if (!this.colorKey.equals(model.colorKey)) return false;

        return true;
    }

    public Integer getValue() {
        return value;
    }

    public void setValue(Integer value) {
        this.value = value;
    }

    public String getTypeName() {
        return typeName;
    }

    public void setTypeName(String typeName) {
        this.typeName = typeName;
    }

    public String getTypeId() {
        return typeId;
    }

    public void setTypeId(String typeId) {
        this.typeId = typeId;
    }
}


//////////////////////////////////////////////////帮助类util
package com.htsc.abms.auditrisk.util;

import com.htsc.abms.auditrisk.model.*;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-6-6
* Time: 上午10:46
* 风险审计统计Service的公共方法
*/
@Service
public class RiskStatServiceUtil
{
    /**
     * 设置categories的值
     * @param chart
     * @param data
     * @return
     */
    public Integer[] setCategories(ChartsInfo chart,List<Model> data)
    {
        Integer [] values = new Integer[data.size()];

        int i = 0;
        for(Model model : data)
        {
            chart.getCategories().add(new Category(model));
            values[i++] = model.getValue();
        }

        return values;
    }

    /**
     * 设置多系列的数据
     * @param chart
     * @param rectTypes
     * @param data
     */
    public void setChartData(ChartsInfo chart,List<Model> rectTypes,List<Model> data)
    {
        // 过滤报告
        Set<String> filter = new HashSet<String>();

        int rectCount = rectTypes.size();
        int reportCount = data.size()/rectTypes.size();

        // 定义二维数组存放series的数据
        Integer[][] chartArray = new Integer[rectCount][reportCount];

        int x = 0;
        int y = 0;
        Model temp = null;
        List<Model> reports = new ArrayList<Model>();
        for(int i=0;i<data.size();i++)
        {
            temp = data.get(i);
            chartArray[y][x] = temp.getValue();
            x++;
            if(x==reportCount){
                x=0;
                y++;
            }

            if(!filter.contains(temp.getId()))
            {
                filter.add(temp.getId());
                reports.add(temp);
            }
        }

        // 设置series
        Series series = null;
        for(int i=0;i<rectCount;i++)
        {
            temp = rectTypes.get(i);
            series = new Series();
            series.setId(temp.getId());
            series.setName(temp.getName());
            series.setColorKey(temp.getColorKey());
            series.setChartData(chartArray[i]);
            chart.getSeriesList().add(series);
        }

        // 设置categories
        for(Model m: reports)
        {
            chart.getCategories().add(new Category(m));
        }
    }
}


////////////////////////////////////////////////////HighChart类型常量封装
package com.htsc.abms.auditrisk.model;

/**
* Created with IntelliJ IDEA.
* User: 陈圣林
* Date: 14-5-21
* Time: 上午9:52
* Chart类型常量
*/
public final class ChartType
{
    // 折线形
    public static final String CHART_LINE = "line";

    // 曲线图
    public static final String CHART_SPLINE = "spline";

    //纵向单列柱状图
    public static final String CHART_COLUMN = "column";

    //横向条形图
    public static final String CHART_BAR = "bar";

    //饼形图
    public static final String CHART_PIE = "pie";

    //散播点图
    public static final String CHART_SCATTER = "scatter";

    //区域折线图
    public static final String CHART_AREA = "area";

    //区域曲线图
    public static final String CHART_AREA_SPLINE = "areaspline";
}

分享到:
评论

相关推荐

    highcharts的例子和封装

    在"highcharts的例子和封装"这个主题中,我们可以深入探讨Highcharts的使用方法以及如何进行封装,以便在项目中更高效地应用。 首先,`test1.html`很可能是包含Highcharts图表展示的一个示例网页。在HTML文件中,...

    highchart使用demo+文档

    #### 4.1 创建图表组件应用 4.1.1 **准备图表数据model**:根据业务需求,创建数据模型,例如: ```javascript var data = [ { name: 'Category 1', data: [4, 3, 5, 4, 6] }, { name: 'Category 2', data: [3, 4...

    Data2Highchart

    "Data2Highchart"项目正为此目的而生,它旨在帮助开发者从各类数据源抽取数据,通过封装JSON,使得在网页上加载Highcharts图表变得更加简单易行,同时强调操作留痕,提高工作效率。 Highcharts是一款强大的...

    Highcharts封装

    在文件`highchart封装.zip`中,可能包含了这样的封装代码示例,包括C#的后端处理和JavaScript的前端渲染。解压并研究这些文件,可以帮助你更好地理解和应用Highcharts的封装技术。 此外,还可以考虑集成Highcharts...

    highcharts的java写法(一个封装方法调用即可)

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,如柱状图、折线图、饼图等。...通过理解Highcharts的配置结构和Java的JSON处理,你可以轻松地构建出满足需求的图表应用。

    jquery+easyUI+ajax+dom+highchart

    jQuery 的API设计使得JavaScript编程变得更加简单,它封装了许多常用的JavaScript函数,使得开发者可以更方便地操作DOM、处理事件、进行AJAX请求。 **EasyUI** EasyUI 是基于jQuery的一个前端开发框架,它提供了...

    highchart-wrapper:生成用于highcharts API的GWT包装器

    总之,`highchart-wrapper`是Java开发者在GWT项目中使用Highcharts的利器,它简化了集成过程,提升了开发体验,使得在Web应用中创建数据可视化变得更加简单。如果你的项目需要在GWT中使用Highcharts,`highchart-...

    Web开发文档

    在`Highcharts-4.0.1.zip`中,你将获取到Highchart的详细文档,可以学习如何利用这个库来可视化数据,使你的网站或应用具有更直观的数据呈现能力。 3. **JavaScript**:JavaScript是Web开发的基础,是一种运行在...

    highchart-echart-jquery-ajax:使用jquery的ajax向highchart+echart发送请求,并获得动态数据—通过修改json

    在这个特定的项目“highchart-echart-jquery-ajax”中,我们将探讨如何使用jQuery的AJAX功能来获取动态数据,并将这些数据应用于Highcharts和ECharts这两个流行的图表库。这个项目特别强调在服务器环境下运行,以...

    QML+Chart.js 实现图表显示

    在`QML`中封装`Chart.js`,可以将Web技术与原生应用的优势结合起来。这通常涉及到以下几个步骤: 1. **创建HTML5 Canvas元素**:在`QML`中,可以使用`WebView`或`QuickWebEngineView`组件来加载包含`Chart.js`脚本...

    JChart:JChart是一个基于D3的图表库,既有D3的灵活,又有类似于highchart的便捷使用

    JChart的出现,旨在为开发者提供一种平衡,既能利用D3.js的底层控制能力,又能享受高阶封装带来的便利。 **D3.js简介** D3.js(Data-Driven Documents)是David Surocki开发的一款强大的JavaScript库,专门用于数据...

    highcharts 在angular中的使用示例代码

    首先,为了在Angular应用中使用Highcharts,你需要安装`highcharts-ng`库,这是一个专门为AngularJS设计的Highcharts封装器。可以通过以下命令进行安装: ```bash npm install highcharts-ng --save ``` 接下来,...

    python入门到高级全栈工程师培训 第3期 附课件代码

    04 封装 05 面向对象概念总结 06 反射 07 反射及动态导入模块 08 类的内置attr属性 09 类内置attr属性补充 10 继承的方式完成包装 11 组合的方式完成授权 第27章 01 os模块复习 02 上节课复习 03 内置函数补充及...

Global site tag (gtag.js) - Google Analytics