highcharts折线图通过ajax异步获取服务器处理过的数据

 html>

<!DOCTYPE

<html lang="en">

<head><!--
设置编码格式,导入需要的JS
--><title>http://blog.csdn.net/ime33 AJAX异步请求数据</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../WebRoot/WEB-INF/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../WebRoot/WEB-INF/js/highcharts.js"></script>
<script type="text/javascript" src="../WebRoot/WEB-INF/js/exporting.js"></script>
<script type="text/javascript" src="../WebRoot/WEB-INF/js/dark-unica.js"></script><!--
JS部分:
--><script type="text/javascript">
$(function() {
// 异步加载数据第二种方式  
var options = {
chart : {
renderTo : 'container',
type : 'line'//line column  
},
title : {
text : '异步获取数据'
},
subtitle : {
text : '折线图',
x : -20
},
xAxis : {
categories : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
},
yAxis : {
title : {
text : '金额 (元)'
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip : {
valueSuffix : '万'
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'middle',
borderWidth : 0
},
Loading : {
hideDuration : 1000,//淡出效果的持续时间(以毫秒为单位)  
showDuration : 1000,//淡入效果的持续时间(以毫秒为单位)  
labelStyle : {//加载标签的span的CSS样式  
fontStyle : 'italic',
color : 'red',
fontSize : "40px"
},
style : {//覆盖在绘图区的加载页面的样式  
position : 'absolute',
backgroundColor : 'white',
opacity : 0.5,
textAlign : 'center',
color : 'red'
}
},
credits : {
enabled : false
},
series : []
}
<!-- ajax异步获取数据 -->
var oChart = null;
oChart = new Highcharts.Chart(options);
Load_SeriesData();
function Load_SeriesData() {
oChart.showLoading("Loading....");
$.ajax( {
url : 'http://localhost:8080/eyServer/rf/queryParkRecord/reportForm/queryPaymentOrder',//求情地址
method : 'post',
contentType : 'application/json',
data : JSON.stringify( {//请求参数
"id" : "",
"companyCode" : "",
"parkId" : "",
"parkCode" : "101",
"parkName" : "",
"arriveId" : "",
"orderNo" : "",
"trxNo" : "",
"paidTime" : "2018",
"expireTime" : "",
"carNum" : "",
"cardNo" : "",
"beginTime" : "2016",
"endTime" : null,
"charge" : "",
"paidFee" : "200",
"paidWay" : "支付宝",
"paidType" : "",
"status" : "",
"notified" : "",
"notifiedTime" : "",
"remark" : "",
"lprInId" : "",
"voucherNo" : "",
"voucherType" : ""
}),
success : function(Data) {//响应参数
console.log("Data : " + JSON.stringify(Data));
//两种方式把数据展示到highcharts

/*var result = Data;*/
/*一.循环方式*/
/*
for(var p in result){//遍历json对象的每个key/value对,p为key
console.log(p + " " + result[p]);//打印
  var series = {
          data:result[p]
    }; 
  oChart.addSeries(series);  
}
*/
/*二.添加方式*/
var DataSeries1 = {
data : Data.orderAlipay
};
var DataSeries2 = {
data : Data.orderWeChat
};
oChart.addSeries(DataSeries1);
oChart.addSeries(DataSeries2);
oChart.hideLoading("Loading....");
}
});
}
});
</script>
</head>
<body>
<!--[if lt IE 10]>  
            <div class="browserupgrade">  
            在线编辑代码s 目前只支持 IE10 以上的浏览器,为了更好的体验,建议使用谷歌、火狐、IE10+ 等主流浏览器访问本站!  
            </div>  
        <![endif]-->
<div id="container" style="min-width: 400px; height: 400px"></div>
</body>
</html>
阅读更多
个人分类: highcharts获取json
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭