highchart实时曲线实例：highchart实时曲线，java web

 最近研究将传感器传过来的数据以实时曲线的形式显示在web前端，在网上找了又找，最终实现了基本功能，拿出来和大家分享一下~~

曲线是用Highchairs实现的，使用起来非常方便~~

web前端：

[html] view plaincopy

1. var data;  
2.  Highcharts.setOptions({  
3.   global: {  
4.    useUTC: false  
5.   }  
6.  });  
7.     
8.  var chart;  
9.  $(function() {  
10.   chart = new Highcharts.Chart({  
11.    chart: {  
12.     renderTo: 'container',  
13.     defaultSeriesType: 'spline',  
14.     marginRight: 10,  
15.     events: {  
16.      load: getForm   
17.     }  
18.    },  
19.    title: {  
20.     text: '实时参数曲线'  
21.    },  
22.    xAxis: {  
23.     type: 'datetime',  
24.     tickPixelInterval: 150  
25.    },  
26.    yAxis: {  
27.     title: {  
28.      text: 'Value'  
29.     },  
30.     plotLines: [{  
31.      value: 0,  
32.      width: 1,  
33.      color: '#808080'  
34.     }]  
35.    },  
36.    tooltip: {  
37.     formatter: function() {  
38.                   return '<b>'+ this.series.name +'</b><br/>'+  
39.       Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+   
40.       Highcharts.numberFormat(this.y, 2);  
41.     }  
42.    },  
43.    legend: {  
44.     layout: 'vertical',  
45.     align: 'right',  
46.     verticalAlign: 'top',  
47.     x: -10,  
48.     y: 100,  
49.    borderWidth: 0  
50.   },  
51.    exporting: {  
52.     enabled: false  
53.    },  
54.    series: [{  
55.     name: '参数',  
56.     data:[]  
57.    }]  
58.   });  
59.    function getForm(){             
60.          jQuery.getJSON("find.do?command=rtView", null, function(data) {  //在rtView中返回json数据            
61.              //为曲线设置值        
62.              chart.series[0].setData(data);  
63.                
64.          });                 
65.      }        
66.      $(document).ready(function() {       
67.         //每隔1秒自动调用方法，实现图表的实时更新       
68.         window.setInterval(getForm,1000);        
69.     });    
70.     
71.  });  

 

后台：在rtView函数中

 

[java] view plaincopy

1. response.setHeader("Pragma","No-Cache");  
2.  response.setHeader("Cache-Control","No-Cache");   
3.  response.setDateHeader("Expires", 0);   
4.  //json  
5.  StringBuilder rtdataBuffer=new StringBuilder();  
6.    
7. / ArrayList list=new ArrayList();  
8.   
9.  SerialPortsIni spi = new SerialPortsIni();   //传感器传参数处理类，这里不做说明，就是产生数据的  
10.     //限制每页20点数  
11.  if(celist.size()>20){  
12.      System.out.println(celist.size()+"sssssssss");  
13.      celist.remove(0);  
14.     }  
15.       
16.  //      list.add(spi.getEnvdata().getLight());  
17.        System.out.println("$$$$$$$$$$$$$"+spi.getEnvdata().getLight());  
18.      //拼凑json  
19.        rtdataBuffer.append("[").append(new Date().getTime()).append(",").  
20.            append(spi.getEnvdata().getLight()).append("]");  
21.       
22.        celist.add(rtdataBuffer.toString());  
23.      //传参数向前台  
24.        response.getWriter().print(celist);