利用highcharts生成動態曲線，實時獲取數據是一個問題，前幾天自己琢磨了以下，查看一些資料，最終結果如下，供大家參考。
首先js中，我們在highcharts官網獲取動態刷新源碼，我們在此基礎上進行修改，利用Ajax實時獲取數據，servlet處理返回json（需要添加jar包），生成動態曲線。
<script>
var xStr=<%= xstr%>;
var yData=<%= dstr%>;
var strtime="<%=time%>";
var strtrainNum="<%=trainNum%>";
var strfield="<%=field%>";
var strcarriageNum="<%=carriageNum%>";
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
var i=0;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
//主要修改以下代碼
setInterval(function() {
var x,
y,
time;
type=0;
i=i+1;
$.ajax({
type: "post",
url: "/crhmis/GetDataServlet?time="+strtime+"&trainNum="+strtrainNum+"&field="+strfield+"&carriageNum="+strcarriageNum+"&i="+i+"&type="+type+"",
dataType: "json",
success : function(data){
$(data).each(function(n,item){
x = item.time;
if(item.data!=null){
y = parseInt(item.data, 10);
}else{
y = null;
}
})
series.addPoint([x, y], true, true);
}
});
}, 1000);
}
}
},
title: {
text: '<%= time%> 起近30分鐘數據動態曲線圖',
x: -20 //center
},
xAxis: {
categories: xStr,
labels:{
rotation:45
}
},
yAxis: {
min: 0,
title: {
text: '值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '<%=name %>',
data: yData
}]
});
});
});
servlet中處理數據後傳出：
List<Statistic> resultList =new ArrayList<Statistic>();
此處因需要而使用list，若動態刷新，每次只需要獲取一次數據，該數據類型應包含x軸數據，y軸數據。
Gson gson=new Gson();
String result = gson.toJson(resultList);
PrintWriter out =response.getWriter();
out.write(result);
out.flush();
out.close();
BY： 天有點涼 CSDN