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