highchart即時曲線執行個體：highchart即時曲線，java web

   最近研究將感應器傳過來的資料以即時曲線的形式顯示在web前端，在網上找了又找，最終實現了準系統，拿出來和大家分享一下，對於新手來說很有協助~~

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);