关于highcharts动态获取数据做报表

来源：互联网发布：mac游戏不能全屏编辑：程序博客网时间：2024/05/16 12:05

首先，这是我第一次写博客；其次，我也不是大牛。

最近要做报表，我们总监说要用highcharts，就在网上搜了搜关于highcharts的一些列子，看了看api以及基本的组成和结构。

要用到的jar包可以在如下地址下载：http://pan.baidu.com/s/1o6NodRk （百度网盘）

折线图。代码如下：

//定义图表的名称

var downloadAppClomunOptions;

//新图表的名称

var downloadAppClomun;

$(document).ready(function() {
   downloadAppClomun();
   getDownloadAppData();
});

==========================这个是调用api的时候会等待很久，做了一个loading效果，更人性化点。==============================================
/**
* loading 效果
*/

function ajaxLoading(){
    $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
    $("<div class=\"datagrid-mask-msg\"></div>").html("玩命加载中，请稍候。。。。。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
}
function ajaxLoadEnd(){
     $(".datagrid-mask").remove();
     $(".datagrid-mask-msg").remove();
}

var params = {};
function getDownloadAppData() {

//这里是对时间的判断
   var beginDate = new Date(document.getElementById("brokerOnlineStartDate").value.replace(/-/g, "/"));
   var endDate = new Date(document.getElementById("brokerOnlineEndDate").value.replace(/-/g, "/"));

   if (beginDate > endDate) {
       alert("开始日期不能大于结束日期,请重新选择！");
       return false;
   } else {
       if ($("#brokerOnlineStartDate").val()) {
           params.startDate = $("#brokerOnlineStartDate").val();
       } else {
           params.startDate = -1;
       }
       if ($("#brokerOnlineEndDate").val()) {
           params.endDate = $("#brokerOnlineEndDate").val();
       } else {
           params.endDate = -1;
       }

       $.ajax({
           url : "/proxy/api/oss/detail/period/onlineoverview/2/"+ params.startDate + "/" + params.endDate + "/token",      //调用api
           type : "get",
           dataType : "json",
           beforeSend:ajaxLoading,

//回调函数  获取api的json数据
           success : function(delData) {
               ajaxLoadEnd();
               if (delData.ret == 0) {
                   var time = [];//根据api返回的json数据定义的数组变量
                   var online = [];
                   var avg = [];
                   var max = [];

//循环出json数据的每个数据
for (var b = 0; b < delData.data.pers.length; b++) {

//给定义的变量赋值；

                        time.push(delData.data.pers[b].per);
                       online.push(delData.data.pers[b].ol);
                       avg.push(delData.data.pers[b].ag);
                       max.push(delData.data.pers[b].mol);

                        downloadAppClomunOption.xAxis.categories=time; //给x轴赋值

//获取数据，填充到series，绘出图表
                       downloadAppClomunOptions.series = [ {
                           "name" : "在线",
                           "data" : online
                       }, {
                           "name" : "平均",
                           "data" : avg
                       }, {
                           "name" : "最高",
                           "data" : max
                       } ];

                       // 初始化图表，为downloadAppClomun重绘图表；
                       downloadAppClomun = $('#downloadAppClomun').highcharts(downloadAppClomunOptions);
                   }

               } else {
                   $.messager.alert("系统提示", "获取用户在线数据失败:" + delData.msg, "error");
               }
           },
           error : function(XMLHttpRequest, textStatus, errorThrown) {
               $.messager.alert("系统提示", "获取数据失败:" + textStatus, "error");
           }
       });
   }
}
/**
* 初始化在线柱状图
*/
function downloadAppClomun() {
   downloadAppClomunOptions = {
       chart : {
           height : 400
       },

       title : {
           text : '用户在线信息',
           x : -20
       // center
       },
       subtitle : {
           text : '',
           x : -20
       },
       xAxis : {
           title : {
               text : "时间段（点）",
               align : 'high'
           },
           categories : [ '0-6', '6-9', '9-11', '11-14', '14-16', '16-20',
                   '20-22', '22-24' ]
       },
       yAxis : {
           title : {
               text : '数量'
           }
       },
       tooltip : {
           enabled : false,
           formatter : function() {
               return '<b>' + this.series.name + '</b><br/>' + this.x + ': '
                       + this.y + '°C';
           }
       },
       plotOptions : {
           line : {
               dataLabels : {
                   enabled : true
               },
               enableMouseTracking : false
           }
       },
       series : []
   };
}

api返回的json格式如下：

{"ret":0,"msg":"OK","data":{"perStr":"2014-10-28到2014-11-04","pers":[{"per":"0-6","ol":2,"ag":0,"mol":1},{"per":"6-9","ol":5,"ag":0,"mol":2},{"per":"9-11","ol":52,"ag":6,"mol":11},{"per":"11-14","ol":44,"ag":5,"mol":12},{"per":"14-16","ol":50,"ag":6,"mol":14},{"per":"16-20","ol":56,"ag":7,"mol":14},{"per":"20-22","ol":10,"ag":1,"mol":3}]}}

页面代码：

<%@ page contentType="text/html; charset=UTF-8"%>

<link rel="stylesheet" type="text/css"
   href="/oss-portlet/css/easyui.css">
<link rel="stylesheet" type="text/css" href="/oss-portlet/css/icon.css">
<link rel="stylesheet" type="text/css" href="/oss-portlet/css/demo.css">

<script type="text/javascript"
   src="/html/js/jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript"
   src="/html/js/Highcharts-4.0.3/js/highcharts.js"></script>
<script type="text/javascript"
   src="/oss-portlet/html/postreport/BrokerOnline.js"></script>
<script type="text/javascript"
   src="/html/js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript"
   src="/html/js/My97DatePicker/WdatePicker.js"></script>
<div style="width: 1000px; margin: auto;">
   
   <div id="p" class="easyui-panel" title="请选择日期："
       style="width: 1000px; height: 120px; padding: 10px; background: #fafafa;"
       data-options="iconCls:'icon-save',collapsible:true,collapsed:true">
       <div style="margin: 20 auto auto 260;">
           <table>
               <tr>
                   <td align="center" style="font-size: 12px;">请选择日期:</td>
                   <td>
                       <input id="brokerOnlineStartDate" class="Wdate" type="text" onclick="WdatePicker()" placeholder="yyyy-MM-dd" />
                   </td>
                   <td align="center">至</td>
                   <td>
                       <input id="brokerOnlineEndDate" class="Wdate" type="text" onclick="WdatePicker()" placeholder="yyyy-MM-dd" />
                   </td>
                   <td><input type="button" value="确定" id="btn" onclick="getDownloadAppData()"></td>
               </tr>
           </table>
       </div>
   </div>
   <div style="margin: 100 auto;">
       <div id="downloadAppClomun" style="height: 400px;"></div>
   </div>
</div>

0 0