程序博客网 > c语言接口与实现知乎

HighCharts说明

来源：互联网 发布：c语言接口与实现知乎 编辑：程序博客网 时间：2024/05/21 17:14

使用环境：struts2 json

使用目的：统计图

流程：只需要在jsp页面配置，就能实现数据的线状图，柱状图，饼状图的统计

一个例子：

1.JSP页面：

[html] view plaincopyprint?
  1. <%@ page contentType="text/html; charset=utf-8" %>  
  2. <%@ taglib prefix="s" uri="/struts-tags"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7. <title>浙江省食品药品监督管理局公众服务平台</title>  
  8. <link href="/css/main.css" rel="stylesheet" type="text/css" />  
  9. <link href="/css/column.css" rel="stylesheet" type="text/css" />  
  10. <link href="/css/myChart.css" rel="stylesheet" type="text/css" />  
  11. <script language="javascript" type="text/javascript" src="/js/jquery-1.5.2.min.js" ></script>  
  12. <script language="javascript" type="text/javascript" src="/jqPlugIn/highcharts/highcharts.js"></script>  
  13. <script language="javascript" type="text/javascript" src="/js/myChart.js" ></script>  
  14. <script language="javascript" type="text/javascript" src="/js/myChartTheme.js" ></script>  
  15. <script language="javascript" type="text/javascript" src="/My97DatePicker/WdatePicker.js"></script>  
  16. <script type="text/javascript">  
  17. $(function(){  
  18.     var sql = "select count(*) from tb_interac_consultative where time_treatment between ? and ? ";  
  19.       
  20.     // 初始化线状图对象  
  21.     var line = new MyChart(0);  
  22.     line.xAppend("已回复",sql+"and ct_treatment_status=?",new Array("1"));  
  23.     line.xAppend("回复中",sql+"and ct_treatment_status=?",new Array("2"));  
  24.     line.xAppend("未回复",sql+"and ct_treatment_status=?",new Array("0"));  
  25.     line.setTime("timeStart","timeEnd","timetype");  
  26.           
  27.     // 初始化柱状图对象  
  28.     var column = new MyChart(1).cloneAttr(line);  
  29.       
  30.     // 初始化饼状图对象  
  31.     var pie = new MyChart(2);  
  32.     pie.fAppend("已回复",sql+"and ct_treatment_status=?",new Array("1"));  
  33.     pie.fAppend("回复中",sql+"and ct_treatment_status=?",new Array("2"));  
  34.     pie.fAppend("未回复",sql+"and ct_treatment_status=?",new Array("0"));  
  35.     pie.setTime("timeStart","timeEnd","timetype");  
  36.       
  37.     var myHighcharts = new MyHighcharts({  
  38.         title:"科大公司在线咨询信息统计",  
  39.         subTitle:"Source:http://www.zjda.com",  
  40.         xTitle:"人数",  
  41.         yTitle:"信息条数",  
  42.         line:line,  
  43.         column:column,  
  44.         pie:pie  
  45.     });  
  46.       
  47.     myHighcharts.draw(0);     
  48. });  
  49. </script>  
  50.   
  51. </head>  
  52. <body>  
  53. <jsp:include page="/header.jsp" flush="true"/>  
  54. <div class="tenHeight"></div>  
  55. <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">  
  56.   <tr>  
  57.     <td width="706" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="positionArea">  
  58.       <tr>  
  59.         <td>当前位置：<a href="/">首页</a>>> <a href="/onlineInteract.jsp">互动信息</a>>> <a href="/zjfda/statistic/consultative.jsp">咨询信息统计</a></td>  
  60.       </tr>  
  61.     </table>  
  62. <div class="tenHeight"></div>  
  63.   
  64. <!-- 数据统计图 -->  
  65. <div id="myChart">  
  66.   
  67.     <!-- 导航 -->  
  68.     <ul id="navigation">  
  69.       <li><a href="#" class="current">线状图</a></li>  
  70.       <li><a href="#">柱状图</a></li>  
  71.       <li><a href="#">饼状图</a></li>  
  72.     </ul>  
  73.       
  74.     <!-- 统计图 -->  
  75.     <div id="container"></div>  
  76.       
  77.     <!-- 如果没有用到时间动态统计则删除 -->  
  78.     <div id="timeselect">  
  79.         时间类型：  
  80.         <select id="timetype">  
  81.             <!-- <option value="3">年份</option> -->  
  82.             <option value="2" selected="selected">月份</option>  
  83.             <!-- <option value="1">天数</option> -->  
  84.         </select>  
  85.         时间段：<input type="text" class="Wdate" id="timeStart" size="12" onclick="WdatePicker()" value="2012-01-01"/>  
  86.                     至<input type="text" class="Wdate" id="timeEnd" size="12" onclick="WdatePicker()" value="2012-12-30"/>  
  87.     </div>  
  88. </div>  
  89. <!-- 数据统计图 -->  
  90.   
  91. <div class="tenHeight"></div>  
  92. <jsp:include page="/footer.jsp" flush="true"/>  
  93. </body>  
  94. </html>  
2.myChart.js

[javascript] view plaincopyprint?
  1. // 封装请求参数对象   
  2. var Emtoy = function(f,name,sql,params){  
  3.     this.f = -1;  
  4.     this.name = name;  
  5.     this.sql = sql;  
  6.     if(params!=null){  
  7.         this.params = params.concat();  
  8.     }else{  
  9.         this.params = null  
  10.     }  
  11. }  
  12.   
  13. /** 
  14.  * 统计图对象对应的JAVA类MyChart.java 
  15.  * @param : typechart  
  16.  *          0表示线状图对象  
  17.  *          1表示柱状图对象  
  18.  *          2表示单饼状图对象  
  19.  *          3表示内嵌饼图对象 
  20.  */  
  21. var MyChart = function(typechart){  
  22.       
  23.     this.title;//统计图标题  
  24.     this.subtitle;//统计图副标题  
  25.     this.xTitle;//x轴标题  
  26.     this.yTitle;//主轴标题  
  27.       
  28.     this.typedb;//服务器端的数据源  
  29.     this.typechart = typechart;//统计图类类型  
  30.     this.typetime = 0;//统计的时间类型  
  31.     this.emtoys = new Array();//需要统计的参数  
  32.     this.smtoys = new Array();//需要统计的参数,当统计图是内嵌饼图的时候用到  
  33.     this.categories = new Array();//发送到服务器时间分段  
  34.     this.categoriesLocal = new Array();//本地轴分段名称  
  35.   
  36.     this.timeAry = new Array();//保存从页面取得的时间的ID  
  37.     /** 
  38.      * x轴统计内容 
  39.      * @param : name   系列名称 
  40.      * @param : sql    查询语句 
  41.      * @param : params 查询参数 
  42.      */  
  43.     this.xAppend = function(name,sql,params){  
  44.         this.emtoys.push(new Emtoy(null,name,sql,params));  
  45.     }  
  46.     /** 
  47.      * y轴系列内容,时间段查询用 
  48.      * @param : name   时间段名称 
  49.      * @param : time   时间 
  50.      */  
  51.     this.yAppend = function(name,time){  
  52.         this.categories.push(time);  
  53.         this.categoriesLocal.push(name);  
  54.     }  
  55.     /** 
  56.      * 饼状图外层 
  57.      * @param : name   系列名称 
  58.      * @param : sql    查询语句 
  59.      * @param : params 查询参数 
  60.      */  
  61.     this.fAppend = function(name,sql,params){  
  62.         this.emtoys.push(new Emtoy(null,name,sql,params));  
  63.     }  
  64.     /** 
  65.      * 饼状图内层 
  66.      * @param : f      外层饼状图的标志 
  67.      * @param : name   系列名称 
  68.      * @param : sql    查询语句 
  69.      * @param : params 查询参数 
  70.      */  
  71.     this.sAppend = function(f,name,sql,params){  
  72.         this.smtoys.push(new Emtoy(f,name,sql,params));  
  73.     }  
  74.     /** 
  75.      * 保存y轴系列时间段，从页面读取 
  76.      * @param : timeStart   页面开始时间的ID 
  77.      * @param : timeEnd     页面结束时间的ID 
  78.      * @param : timetype    页面时间的类型，年或月或日 
  79.      */  
  80.     this.setTime = function(timeStart,timeEnd,timetype){  
  81.         this.timeAry.push(timeStart);  
  82.         this.timeAry.push(timeEnd);  
  83.         this.timeAry.push(timetype);  
  84.     }  
  85.     /** 
  86.      * 设置y轴系列时间段，从页面读取 
  87.      * @param : timeStart   页面开始时间的ID 
  88.      * @param : timeEnd     页面结束时间的ID 
  89.      * @param : timetype    页面时间的类型，年或月或日 
  90.      */  
  91.     this.getPageTime = function(){  
  92.         if(this.timeAry.length!=0){           
  93.             this.categories = new Array();  
  94.             this.categories.push($("#"+this.timeAry[0]).val());  
  95.             this.categories.push($("#"+this.timeAry[1]).val());  
  96.             this.typetime = $("#"+this.timeAry[2]).val();  
  97.             this.xTitle =  $("#"+this.timeAry[2]).find("option:selected").text();  
  98.         }else{  
  99.             this.categories = null;  
  100.         }  
  101.     }  
  102.     /** 
  103.      * 复制一个对象 
  104.      * @param : chart     目标对象 
  105.      * @param : typechart 指定类型 
  106.      */  
  107.     this.cloneAttr = function(chart){  
  108.         this.title = chart.title;  
  109.         this.subtitle = chart.subtitle;  
  110.         this.xTitle = chart.xTitle;  
  111.         this.yTitle = chart.yTitle;  
  112.         this.typedb = chart.typedb;  
  113.         this.typetime  = chart.typetime;  
  114.         this.emtoys  = chart.emtoys;  
  115.         this.smtoys = chart.smtoys;  
  116.         this.categories = chart.categories;  
  117.         this.categoriesLocal = chart.categoriesLocal;  
  118.         this.timeAry = chart.timeAry;  
  119.         return this;  
  120.     }  
  121. }  
  122.   
  123. // 统计图的触发绑定与整理   
  124. var MyHighcharts = function(options){  
  125.     tempHighcharts = this;  
  126.     var defaults = {  
  127.             typedb:0,  
  128.             title:"这是默认标题",  
  129.             subTitle:"这是默认副标题",  
  130.             xTitle:"x轴说明",  
  131.             yTitle:"y轴说明",  
  132.             line:null,  
  133.             column:null,  
  134.             pie:null  
  135.         };  
  136.     var options = $.extend(defaults, options);  
  137.       
  138.     /** ajax请求，这里用POST提交，因为参数可能拼接的较长 */  
  139.     this.draw = function(i){  
  140.         // 显示等待信息   
  141.         $("#container").empty();  
  142.         $("#container").append("<p style=\"text-align: center\"><img src=\"/images/loading.gif\" alt=\"加载中，请稍候...\" /></p>");  
  143.         this.initLocalData(i,options);  
  144.         $.post("/stat/chart!draw.do",this.initParams(tempChart),this.callBackChart);  
  145.     }  
  146.       
  147.     /** 数据本地化请求*/     
  148.     this.initLocalData = function(i,options){  
  149.         switch (i) {  
  150.         case 0:  
  151.             tempChart = options.line;  
  152.             break;  
  153.         case 1:  
  154.             tempChart = options.column;  
  155.             break;  
  156.         default:  
  157.             tempChart = options.pie;  
  158.             break;  
  159.         }  
  160.         tempChart.title = options.title;  
  161.         tempChart.subtitle = options.subtitle;  
  162.         tempChart.xTitle = options.xTitle;  
  163.         tempChart.yTitle = options.yTitle;  
  164.         tempChart.typedb = options.typedb;  
  165.     }  
  166.       
  167.     /** 参数处理 */  
  168.     this.initParams = function(myChart){  
  169.         var param = new Object();  
  170.         var timeStr = "1950#1950";  
  171.           
  172.         if(myChart.time != 0){  
  173.             myChart.getPageTime();  
  174.         }  
  175.           
  176.         param["myChart.typedb"] = myChart.typedb;  
  177.         param["myChart.typechart"] = myChart.typechart;  
  178.         param["myChart.typetime"] = myChart.typetime;  
  179.           
  180.         if(myChart.categories!=undefined && myChart.categories!=null){  
  181.             param["myChart.categoriesStr"] = this.getFztoStr(myChart.categories);  
  182.         }else{  
  183.             timeStr = "";  
  184.         }  
  185.           
  186.         if(myChart.emtoys!=undefined && myChart.emtoys!=null){            
  187.             for(var i=0; i<myChart.emtoys.length; i++){  
  188.                 param["myChart.emtoys["+i+"].name"] = myChart.emtoys[i].name;  
  189.                 param["myChart.emtoys["+i+"].sql"] = myChart.emtoys[i].sql;  
  190.                   
  191.                 if(myChart.emtoys[i].params!=null && myChart.emtoys[i].params!=""){  
  192.                     param["myChart.emtoys["+i+"].params"] = (timeStr==""?timeStr:timeStr+"#")+this.getFztoStr(myChart.emtoys[i].params);  
  193.                 }else{  
  194.                     if(timeStr != ""){  
  195.                         param["myChart.emtoys["+i+"].params"] = timeStr;  
  196.                     }  
  197.                 }  
  198.             }  
  199.             for(var k=0; k<myChart.smtoys.length; k++){  
  200.                 param["myChart.smtoys["+k+"].f"] = myChart.smtoys[k].f;  
  201.                 param["myChart.smtoys["+k+"].name"] = myChart.smtoys[k].name;  
  202.                 param["myChart.smtoys["+k+"].sql"] = myChart.smtoys[k].sql;  
  203.                 param["myChart.smtoys["+k+"].params"] = "2010#2050"+myChart.smtoys[k].params  
  204.                 if(myChart.smtoys[k].params!=null && myChart.smtoys[k].params!=""){  
  205.                     param["myChart.smtoys["+k+"].params"] = timeStr==""?timeStr:(timeStr+"#")+this.getFztoStr(myChart.smtoys[k].params)  
  206.                 }else{  
  207.                     if(timeStr != ""){  
  208.                         param["myChart.smtoys["+k+"].params"] = timeStr;  
  209.                     }  
  210.                 }  
  211.             }  
  212.         }     
  213.           
  214.         return param;  
  215.     }  
  216.       
  217.     this.getFztoStr = function(array){  
  218.         var str = "";  
  219.         for(var i=0; i<array.length; i++){  
  220.             if(i == 0){  
  221.                 str = str+array[i];  
  222.             }else{  
  223.                 str = str+"#"+array[i];  
  224.             }  
  225.         }  
  226.         return str;  
  227.     }  
  228.       
  229.     /** 返回数据处理 */  
  230.     this.callBackChart = function(data){  
  231.         if(tempChart.timetype != 0){  
  232.             tempChart.categoriesLocal = data.myChart.categoriesLocal;  
  233.         }  
  234.         switch (data.myChart.typechart) {  
  235.         case 0://线状图  
  236.             tempHighcharts.setClass(0);  
  237.             tempHighcharts.callBackLine(data);  
  238.             break;  
  239.         case 1://柱状图  
  240.             tempHighcharts.setClass(1);  
  241.             tempHighcharts.callBackColumn(data);  
  242.             break;  
  243.         case 2://单饼图  
  244.             tempHighcharts.setClass(2);  
  245.             tempHighcharts.callBackPie(data);  
  246.             break;  
  247.         default://内嵌饼图  
  248.             tempHighcharts.setClass(2);  
  249.             tempHighcharts.callBackDonutPie(data);  
  250.             break;  
  251.         }  
  252.     }  
  253.       
  254.     // line请求返回函数的处理   
  255.     this.callBackLine = function(data){  
  256.         new Highcharts.Chart({  
  257.             chart: {  
  258.                 renderTo: 'container',  
  259.                 type: 'line'  
  260.             },  
  261.             title: {  
  262.                 text: tempHighcharts.getTimeTitle(tempChart.categoriesLocal)  
  263.             },  
  264.             subtitle: {  
  265.                 text: tempChart.subtitle  
  266.             },  
  267.             xAxis: {  
  268.                 title: {  
  269.                     text: tempChart.xTitle,  
  270.                     align: 'high'  
  271.                 },  
  272.                 categories: tempChart.categoriesLocal  
  273.             },  
  274.             yAxis: {  
  275.                 title: {  
  276.                     align: 'high',  
  277.                     offset: 0,  
  278.                     text: tempChart.yTitle,  
  279.                     rotation: 0,  
  280.                     y: -10  
  281.   
  282.                 },  
  283.                 plotLines: [{  
  284.                     value: 0,  
  285.                     width: 1,  
  286.                     color: '#808080'  
  287.                 }]  
  288.             },  
  289.             plotOptions: {  
  290.                 spline: {  
  291.                     marker: {  
  292.                         radius: 4,  
  293.                         lineColor: '#666666',  
  294.                         lineWidth: 1  
  295.                     }  
  296.                 }  
  297.             },  
  298.             legend:{  
  299.                 borderWidth:0  
  300.             },  
  301.             tooltip: {  
  302.                 crosshairs: true,  
  303.                 shared: true  
  304.                   
  305.             },  
  306.             series: data.myChart.series  
  307.         });  
  308.     }  
  309.     // column请求返回函数的处理   
  310.     this.callBackColumn = function(data){  
  311.         new Highcharts.Chart({  
  312.             chart: {  
  313.                 renderTo: 'container',  
  314.                 type: 'column'  
  315.             },  
  316.             title: {  
  317.                 text: tempHighcharts.getTimeTitle(tempChart.categoriesLocal)  
  318.             },  
  319.             subtitle: {  
  320.                 text: tempChart.subtitle  
  321.             },  
  322.             xAxis: {  
  323.                 title: {  
  324.                     text: tempChart.xTitle,  
  325.                     align: 'high'  
  326.                 },  
  327.                 categories: tempChart.categoriesLocal  
  328.             },  
  329.             yAxis: {  
  330.                 title: {  
  331.                     align: 'high',  
  332.                     offset: 0,  
  333.                     text: tempChart.yTitle,  
  334.                     rotation: 0,  
  335.                     y: -10  
  336.   
  337.                 },  
  338.                 plotLines: [{  
  339.                     value: 0,  
  340.                     width: 1,  
  341.                     color: '#808080'  
  342.                 }]  
  343.             },  
  344.             plotOptions: {  
  345.                 spline: {  
  346.                     marker: {  
  347.                         radius: 4,  
  348.                         lineColor: '#666666',  
  349.                         lineWidth: 1  
  350.                     }  
  351.                 }  
  352.             },  
  353.             legend:{  
  354.                 borderWidth:0  
  355.             },  
  356.             tooltip: {  
  357.                 formatter: function() {  
  358.                     return ''+this.x+'<br/>'+  
  359.                     this.series.name +': '+ this.y;  
  360.                 }     
  361.             },  
  362.             series: data.myChart.series  
  363.         });  
  364.     }  
  365.     // 单饼状图   
  366.     this.callBackPie = function(data){  
  367.         new Highcharts.Chart({  
  368.             chart: {  
  369.                 renderTo: 'container',  
  370.                 plotBackgroundColor: null,  
  371.                 plotBorderWidth: null,  
  372.                 plotShadow: false,  
  373.                 type:'pie'  
  374.             },  
  375.             title: {  
  376.                 text: tempHighcharts.getTimeTitle(tempChart.categoriesLocal)  
  377.             },  
  378.             subtitle: {  
  379.                 text: tempChart.subtitle  
  380.             },  
  381.             tooltip: {  
  382.                 formatter: function() {  
  383.                     return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';  
  384.                 }  
  385.             },  
  386.             plotOptions: {  
  387.                 pie: {  
  388.                     allowPointSelect: true,  
  389.                     cursor: 'pointer',  
  390.                     dataLabels: {  
  391.                         enabled: true,  
  392.                         color: '#000000',  
  393.                         connectorColor: '#000000',  
  394.                         formatter: function() {  
  395.                             return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';  
  396.                         }  
  397.                     }  
  398.                 }  
  399.             },  
  400.             series: data.myChart.series_pie  
  401.         });  
  402.   
  403.     }  
  404.     // 内嵌饼状图   
  405.     this.callBackDonutPie = function(data){  
  406.         var dt = tempChart.comb(data);  
  407.         new Highcharts.Chart({  
  408.             chart: {  
  409.                 renderTo: 'container',  
  410.                 type: 'pie'  
  411.             },  
  412.             title: {  
  413.                 text: tempHighcharts.getTimeTitle(data.myChart.categories)  
  414.             },  
  415.             subtitle: {  
  416.                 text: tempChart.subtitle  
  417.             },  
  418.             yAxis: {  
  419.                 title: {  
  420.                     text: 'Total percent market share'  
  421.                 }  
  422.             },  
  423.             plotOptions: {  
  424.                 pie: {  
  425.                     shadow: false  
  426.                 }  
  427.             },  
  428.             tooltip: {  
  429.                 formatter: function() {  
  430.                     return '<b>'+ this.point.name +'</b>: '+ this.y +' %';  
  431.                 }  
  432.             },  
  433.             series: dt  
  434.         });  
  435.     }  
  436.     // 对内嵌饼状图异步请求产生的数据进行整理然后展示到JSP页面上   
  437.     this.comb = function(data){  
  438.         var colors = Highcharts.getOptions().colors;  
  439.         var pie1 = data.myChart.series_pie[0];  
  440.         var pie2 = data.myChart.series_pie[1];  
  441.         var firstData = [];  
  442.         var secondData = [];  
  443.         for (var i = 0; i < pie1.data.length; i++) {  
  444.             firstData.push({  
  445.                 name: pie1.data[i][0],  
  446.                 y: pie1.data[i][1],  
  447.                 color: colors[i]  
  448.             });  
  449.         }  
  450.         for (var i = 0; i < pie2.data.length; i++) {  
  451.             secondData.push({  
  452.                 name: pie2.data[i][0],  
  453.                 y: pie2.data[i][1],  
  454.                 color:this.getColor(colors,pie2,pie2.data[i])  
  455.             });  
  456.         }  
  457.           
  458.         var dt = [];  
  459.         dt.push({  
  460.             name: 'first',  
  461.             data: firstData,  
  462.             size: '60%',  
  463.             dataLabels: {  
  464.                 formatter: function() {  
  465.                     return this.y > -1 ? this.point.name : null;  
  466.                 },  
  467.                 color: 'white',  
  468.                 distance: -30  
  469.             }  
  470.         });  
  471.         dt.push({  
  472.             name: 'second',  
  473.             data: secondData,  
  474.             innerSize: '60%',  
  475.             dataLabels: {  
  476.                 formatter: function() {  
  477.                     return this.y > -1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;  
  478.                 }  
  479.             }  
  480.         });   
  481.         return dt;  
  482.     }  
  483.     // 内嵌饼状图-子类的颜色   
  484.     this.getColor = function(colors,pie2,dt){  
  485.         var one = 0;  
  486.         var all = 0;  
  487.         var tempAy = [];  
  488.         for (var i = 0; i < pie2.data.length; i++) {  
  489.             if(pie2.data[i][2] == dt[2]){  
  490.                 tempAy.push(pie2.data[i][0]);   
  491.             }  
  492.         }  
  493.         all  =tempAy.length;  
  494.         for (var i = 0; i < all; i++) {  
  495.             if(tempAy[i]== dt[0]){  
  496.                 one = i;  
  497.                 continue;  
  498.             }  
  499.         }  
  500.         //alert(dt[0]+":"+one+"/"+all+":"+dt[2]);  
  501.         var brightness = 0.2 - (one / all) / 5 ;  
  502.         return Highcharts.Color(colors[dt[2]]).brighten(brightness).get();  
  503.     }  
  504.     this.setClass = function(i){  
  505.         var obj = $("#navigation a");  
  506.         obj.attr("class","");  
  507.         obj.eq(i).attr("class","current");  
  508.     }  
  509.     this.getTimeTitle = function(categories){  
  510.         if(categories == null){  
  511.             return tempChart.title;  
  512.         }  
  513.         var lgh = categories.length;  
  514.         return this.pmt(categories[0],0)+"~"+this.pmt(categories[lgh-1],1)+tempChart.title;  
  515.     }  
  516.     this.pmt = function(str,i){//时间格式化        
  517.         if(str.indexOf("#") != -1){  
  518.             str = str.split("#")[i];  
  519.         }  
  520.         if(str.length==10){  
  521.             str = str.substring(0,4)+"年"+str.substring(5,7)+"月"+str.substring(8)+"号";  
  522.         }else if(str.length==7){  
  523.             str = str.substring(0,4)+"年"+str.substring(5)+"月";  
  524.         }else{  
  525.             str = str + "年";  
  526.         }  
  527.         return str;  
  528.     }  
  529. }  
  530.   
  531. $(function(){  
  532.     $("#navigation a").click(function(){  
  533.         var i = $("#navigation a").index($(this));  
  534.         tempHighcharts.draw(i);  
  535.     });   
  536. });  
3.myChartTheme.js可以在官网下载，这里我作了少量改动，统计饼图的颜色作了调整

[javascript] view plaincopyprint?
  1. /** 
  2.  * Grid theme for Highcharts JS 
  3.  * @author Torstein Hønsi 
  4.  */  
  5.   
  6. Highcharts.theme = {  
  7.    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],  
  8.    chart: {  
  9.       backgroundColor: {  
  10.          linearGradient: [0, 0, 500, 500],  
  11.          stops: [  
  12.             [0, 'rgb(255, 255, 255)'],  
  13.             [1, 'rgb(240, 240, 255)']  
  14.          ]  
  15.       },  
  16.       borderWidth: 2,  
  17.       plotBackgroundColor: 'rgba(255, 255, 255, .9)',  
  18.       plotShadow: true,  
  19.       plotBorderWidth: 1,  
  20.       spacingBottom:25  
  21.    },  
  22.    title: {  
  23.       style: {  
  24.          color: '#000',  
  25.          font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'  
  26.       }  
  27.    },  
  28.    subtitle: {  
  29.       style: {  
  30.          color: '#666666',  
  31.          font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'  
  32.       }  
  33.    },  
  34.    xAxis: {  
  35.       gridLineWidth: 1,  
  36.       lineColor: '#000',  
  37.       tickColor: '#000',  
  38.       labels: {  
  39.          style: {  
  40.             color: '#000',  
  41.             font: '11px Trebuchet MS, Verdana, sans-serif'  
  42.          }  
  43.       },  
  44.       title: {  
  45.          style: {  
  46.             color: '#333',  
  47.             fontWeight: 'bold',  
  48.             fontSize: '12px',  
  49.             fontFamily: 'Trebuchet MS, Verdana, sans-serif'  
  50.   
  51.          }  
  52.       }  
  53.    },  
  54.    yAxis: {  
  55.       minorTickInterval: 'auto',  
  56.       lineColor: '#000',  
  57.       lineWidth: 1,  
  58.       tickWidth: 1,  
  59.       tickColor: '#000',  
  60.       labels: {  
  61.          style: {  
  62.             color: '#000',  
  63.             font: '11px Trebuchet MS, Verdana, sans-serif'  
  64.          }  
  65.       },  
  66.       title: {  
  67.          style: {  
  68.             color: '#333',  
  69.             fontWeight: 'bold',  
  70.             fontSize: '12px',  
  71.             fontFamily: 'Trebuchet MS, Verdana, sans-serif'  
  72.          }  
  73.       }  
  74.    },  
  75.    legend: {  
  76.       itemStyle: {  
  77.          font: '9pt Trebuchet MS, Verdana, sans-serif',  
  78.          color: 'black'  
  79.   
  80.       },  
  81.       itemHoverStyle: {  
  82.          color: '#039'  
  83.       },  
  84.       itemHiddenStyle: {  
  85.          color: 'gray'  
  86.       }  
  87.    },  
  88.    labels: {  
  89.       style: {  
  90.          color: '#99b'  
  91.       }  
  92.    }  
  93. };  
  94.   
  95. // Apply the theme   
  96. var highchartsOptions = Highcharts.setOptions(Highcharts.theme);  

4.sturts.xml

[html] view plaincopyprint?
  1. <!-- 统计图ajax -->  
  2.     <package name="fda.bak" namespace="/stat" extends="common-ajax">  
  3.         <action name="chart" class="com.zjfda.action.MyChartAction">  
  4.             <result type="json">  
  5.                 chart\.categoriesLocal\[\d+\],  
  6.                 chart\.series\[\d+\]\.name,  
  7.                 chart\.series\[\d+\]\.data\[\d+\]  
  8.                 chart\.series_pie\[\d+\]\.name,  
  9.                 chart\.series_pie\[\d+\]\.data\[\d+\]\[\d+\]  
  10.             </result>  
  11.         </action>  
  12.     </package>   

4.MyChartAction.java

[java] view plaincopyprint?
  1. package com.zjfda.action;  
  2.   
  3. import javax.annotation.Resource;  
  4.   
  5. import com.common.ssh.action.BaseAction;  
  6. import com.zjfda.bean.MyChart;  
  7. import com.zjfda.service.MyChartService;  
  8.   
  9. /** 
  10.  * 线状、柱状、饼状(单饼与内嵌饼)统计图 
  11.  * @author LQ. 
  12.  * 
  13.  */  
  14. @SuppressWarnings("serial")  
  15. public class MyChartAction extends BaseAction{  
  16.   
  17.     public String draw(){  
  18.         myChart = myChartService.drawMyChart(myChart);  
  19.         return SUCCESS;  
  20.     }  
  21.       
  22.     @Resource MyChartService myChartService;  
  23.     private MyChart myChart;  
  24.     public MyChart getMyChart() {  
  25.         return myChart;  
  26.     }  
  27.     public void setMyChart(MyChart myChart) {  
  28.         this.myChart = myChart;  
  29.     }  
  30.       
  31. }  

5.MyChartService.java

[java] view plaincopyprint?
  1. package com.zjfda.service;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import com.common.ssh.dao.BaseJDBCDao;  
  7. import com.common.ssh.service.BaseService;  
  8. import com.common.util.Tools;  
  9. import com.zjfda.bean.Emtoy;  
  10. import com.zjfda.bean.MyChart;  
  11. import com.zjfda.bean.Serie;  
  12. import com.zjfda.bean.Serie_pie;  
  13.   
  14. public class MyChartService extends BaseService {  
  15.   
  16.     public MyChart drawMyChart(MyChart myChart) {  
  17.         BaseJDBCDao dao;  
  18.           
  19.         /* TODO 如果是多数据源，在这里通过myChart.getTypedb()判断选择哪个数据源*/  
  20.         switch (myChart.getTypedb()) {  
  21.         case 1:  
  22.             dao = spDao;  
  23.             break;  
  24.         default:  
  25.             dao = fdaDao;  
  26.             break;  
  27.         }  
  28.           
  29.           
  30.         switch (myChart.getTypechart()) {  
  31.         case 3:  
  32.             myChart = getPieInline(dao,myChart);  
  33.             break;  
  34.         case 2:  
  35.             myChart = getPie(dao,myChart);  
  36.             break;  
  37.         case 1:  
  38.             myChart = getColumn(dao,myChart);  
  39.             break;  
  40.         default:  
  41.             myChart = getLine(dao,myChart);  
  42.             break;  
  43.         }  
  44.         return myChart;  
  45.     }  
  46.   
  47.     // 内嵌饼图   
  48.     private MyChart getPieInline(BaseJDBCDao dao, MyChart myChart) {  
  49.         List<Serie_pie> series_pie = new ArrayList<Serie_pie>();  
  50.         String[] categories = getCombCate(myChart);  
  51.         myChart.setCategoriesLocal(categories);  
  52.         series_pie.add(getPieSeries(dao,myChart.getEmtoys(),categories));  
  53.         series_pie.add(getPieSeries(dao,myChart.getSmtoys(),categories));  
  54.         myChart.setSeries_pie(series_pie);  
  55.         return myChart;  
  56.     }  
  57.   
  58.     // 单饼图   
  59.     private MyChart getPie(BaseJDBCDao dao, MyChart myChart) {  
  60.         List<Serie_pie> series_pie = new ArrayList<Serie_pie>();  
  61.         String[] categories = getCombCate(myChart);  
  62.         myChart.setCategoriesLocal(categories);  
  63.         series_pie.add(getPieSeries(dao,myChart.getEmtoys(),categories));  
  64.         myChart.setSeries_pie(series_pie);  
  65.         return myChart;  
  66.     }  
  67.       
  68.     // 柱状图   
  69.     private MyChart getColumn(BaseJDBCDao dao, MyChart myChart) {  
  70.         return getLine(dao,myChart);  
  71.     }  
  72.   
  73.     // 线状图   
  74.     private MyChart getLine(BaseJDBCDao dao, MyChart myChart) {  
  75.         List<Emtoy> emtoys = myChart.getEmtoys();  
  76.         String[] categories = getCombCate(myChart);  
  77.         myChart.setCategoriesLocal(categories);  
  78.           
  79.         List<Serie> series = new ArrayList<Serie>();  
  80.         int length = categories.length;  
  81.         int line[];  
  82.         Serie serie;  
  83.         for (Emtoy emtoy : emtoys) {  
  84.             line = new int[length];  
  85.             for (int i = 0; i < length; i++) {  
  86.                 line[i] = dao.count(emtoy.getSql(), getRealParams(emtoy.getParams().split("#"),categories,i));  
  87.             }  
  88.             serie = new Serie();  
  89.             serie.setName(emtoy.getName());  
  90.             serie.setData(line);  
  91.             series.add(serie);  
  92.         }  
  93.         myChart.setSeries(series);  
  94.         return myChart;  
  95.     }  
  96.   
  97.     // 饼图的数据处理   
  98.     private Serie_pie getPieSeries(BaseJDBCDao dao, List<Emtoy> emtoys,String[] categories) {  
  99.         int length = emtoys.size();  
  100.         Object pie[][] = new Object[length][3];  
  101.           
  102.         Emtoy emtoy;  
  103.         double temp;  
  104.         for (int i = 0; i < length; i++) {  
  105.             emtoy = emtoys.get(i);  
  106.             temp = dao.count(emtoy.getSql(),getRealParamsPie(emtoy.getParams(),categories));      
  107.             pie[i][0] = emtoy.getName();  
  108.             pie[i][1] = temp;  
  109.             pie[i][2] = emtoy.getF();  
  110.         }  
  111.         Serie_pie serie_pie = new Serie_pie();  
  112.         serie_pie.setData(pie);  
  113.         return serie_pie;  
  114.     }  
  115.   
  116.     private Object[] getRealParamsPie(String paramsStr, String[] categories) {  
  117.         String[] params;  
  118.         if(paramsStr==null && categories==null){  
  119.             params = new String[]{};  
  120.         }else if(paramsStr!=null&&categories==null){  
  121.             params = paramsStr.split("#");  
  122.         }else if(paramsStr==null&&categories!=null){  
  123.             params = new String[2];  
  124.             int i = categories.length;  
  125.             params = combTimeStart(params,categories[0]);  
  126.             params = combTimeEnd(params,categories[i-1]);  
  127.         }else{  
  128.             params = paramsStr.split("#");  
  129.             int i = categories.length;  
  130.             params = combTimeStart(params,categories[0]);  
  131.             params = combTimeEnd(params,categories[i-1]);  
  132.         }  
  133.         return params;  
  134.     }  
  135.   
  136.     private String[] combTimeEnd(String[] params, String timeStr) {  
  137.         int i = timeStr.indexOf("#");  
  138.         if(i == -1){  
  139.             params[1] = Tools.getTimeEnd(timeStr);  
  140.         }else{  
  141.             params[1] = Tools.getTimeEnd(timeStr.substring(i+1));  
  142.         }  
  143.         return params;  
  144.     }  
  145.   
  146.     private String[] combTimeStart(String[] params, String timeStr) {  
  147.         int i = timeStr.indexOf("#");  
  148.         if(i == -1){  
  149.             params[0] = Tools.getTimeStart(timeStr);  
  150.         }else{  
  151.             params[0] = Tools.getTimeStart(timeStr.substring(0,i));  
  152.         }  
  153.         return params;  
  154.     }  
  155.   
  156.     // 取得查询参数   
  157.     private Object[] getRealParams(Object[] params, String[] categories,int w) {  
  158.         if(categories == null){  
  159.             return params;  
  160.         }  
  161.         String timeStr;  
  162.         if(categories.length == 1){  
  163.             timeStr = categories[0];  
  164.         }else{  
  165.             timeStr = categories[w];  
  166.         }  
  167.           
  168.         int i = timeStr.indexOf("#");  
  169.         if(i == -1){  
  170.             params[0] = Tools.getTimeStart(timeStr);  
  171.             params[1] = Tools.getTimeEnd(timeStr);  
  172.         }else{  
  173.             params[0] = Tools.getTimeStart(timeStr.substring(0,i));  
  174.             params[1] = Tools.getTimeEnd(timeStr.substring(i+1));  
  175.         }  
  176.         return params;  
  177.     }  
  178.     // 取得时间段   
  179.     private String[] getCombCate(MyChart myChart) {  
  180.         String[] newCates;  
  181.         String[] cates = myChart.getCategories();  
  182.         switch (myChart.getTypetime()) {  
  183.         case 3:  
  184.             newCates = Tools.getYearList(cates[0], cates[1]);  
  185.             break;  
  186.         case 2:  
  187.             newCates = Tools.getMonthList(cates[0], cates[1]);  
  188.             break;  
  189.         case 1:  
  190.             newCates = Tools.getDayList(cates[0], cates[1]);  
  191.             break;  
  192.         default:  
  193.             newCates = cates;  
  194.             break;  
  195.         }  
  196.         return newCates;  
  197.     }  
  198. }  

6.统计图






c语言接口与实现知乎 c语言接口与实现知乎
原创粉丝点击
热门IT博客
简单的c语言代码简单的c语言代码
淘宝链接转化成淘口令淘宝链接转化成淘口令
淘宝电脑可靠么
智慧记mac版
电路原理图画图软件
淘宝水蛭蚂蟥诱捕约
java微信二次开发教程
北京江水平 知乎
苹果打不开淘宝网页
淘宝店加盟骗局
女人必知的男人心理学
上海大学乐乎pt平台
大华监控软件客户端
软件评测师教程
sql按年月统计count
caj阅读器for mac版
阿里布达年代txt百度云
花千骨页游进阶数据
贤良 知乎
迅雷下载网络异常
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 御湖湾 武汉银泰御华园 广州御华园 御华园楼盘 御华园二手房 御华园户型图 御华园小区 花都御华园 新鸿基御华园 狮岭御华园 御华园二期 银泰御华园 御华园植物墙 御华园房价 银泰御华园房价 御华园电话 银泰御华园地址 御华园地址 御华园酒店 银泰御华园样板间 御华园物业 御华园论坛 狮城国际 金海岸花园 新天半山 保利罗兰国际 轩逸荟 时代水岸 四季金谷 自由人花园 碧桂园豪园 保利翡翠山 花城美汇 智杰雅筑 凯云新世界 绿地越秀海玥 越秀岭南山畔 广州绿地城 天马河公馆 越秀星汇云城 富力泉天下

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里