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

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

最近要做报表，我们总监说要用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 style="margin-left: 900px;">

<h3>请选择日期:</h3>

<input id="dd" type="text" class="easyui-datebox" required="required"></input>

</div> -->

<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>