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

伯先知

已于 2022-01-22 22:52:53 修改

阅读量1.8k

点赞数 1

分类专栏： highcharts获取json 文章标签：异步异步获取数据 json highcharts

于 2018-04-17 15:57:44 首次发布

本文链接：https://blog.youkuaiyun.com/u013189545/article/details/79975973

版权

highcharts获取json 专栏收录该内容

2 篇文章

订阅专栏

我的软件测试资源小站：www.qabujiaban.com

html>

<!DOCTYPE

<html lang="en">

<head><title>http://blog.youkuaiyun.com/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><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 : []
}

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>

<div id="container" style="min-width: 400px; height: 400px"></div>
</body>
</html>