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

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

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

web前端：

var data;
 Highcharts.setOptions({
  global: {
   useUTC: false
  }
 });
  
 var chart;
 $(function() {
  chart = new Highcharts.Chart({
   chart: {
    renderTo: 'container',
    defaultSeriesType: 'spline',
    marginRight: 10,
    events: {
     load: getForm 
    }
   },
   title: {
    text: '实时参数曲线'
   },
   xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
   },
   yAxis: {
    title: {
     text: 'Value'
    },
    plotLines: [{
     value: 0,
     width: 1,
     color: '#808080'
    }]
   },
   tooltip: {
    formatter: function() {
                  return '<b>'+ this.series.name +'</b><br/>'+
      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
      Highcharts.numberFormat(this.y, 2);
    }
   },
   legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -10,
    y: 100,
   borderWidth: 0
  },
   exporting: {
    enabled: false
   },
   series: [{
    name: '参数',
    data:[]
   }]
  });
   function getForm(){           
         jQuery.getJSON("find.do?command=rtView", null, function(data) {  //在rtView中返回json数据          
             //为曲线设置值      
             chart.series[0].setData(data);
             
         });               
     }      
     $(document).ready(function() {     
        //每隔1秒自动调用方法，实现图表的实时更新     
        window.setInterval(getForm,1000);      
    });  
  
 });

 

后台：在rtView函数中

 

  response.setHeader("Pragma","No-Cache");
   response.setHeader("Cache-Control","No-Cache"); 
   response.setDateHeader("Expires", 0); 
   //json
   StringBuilder rtdataBuffer=new StringBuilder();
   
 // ArrayList list=new ArrayList();
 
   SerialPortsIni spi = new SerialPortsIni();   //传感器传参数处理类，这里不做说明，就是产生数据的
      //限制每页20点数
   if(celist.size()>20){
       System.out.println(celist.size()+"sssssssss");
       celist.remove(0);
      }
      
   //      list.add(spi.getEnvdata().getLight());
         System.out.println("$$$$$$$$$$$$$"+spi.getEnvdata().getLight());
       //拼凑json
         rtdataBuffer.append("[").append(new Date().getTime()).append(",").
             append(spi.getEnvdata().getLight()).append("]");
      
         celist.add(rtdataBuffer.toString());
       //传参数向前台
         response.getWriter().print(celist);