Ajax请求服务器数据动态刷新HighCharts表格

$(function() {
	var realtime = new Array(10);
	var realvalue = new Array(10);
    $(document).ready(function() {
        Highcharts.setoptions({
            global: {
                useUTC: false
            }
        });
        var chart;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',type: 'spline',animation: Highcharts.svg,// don't animate in old IE               
                marginRight: 10,events: {
                    load: function() {}
                }
            },title: {
                text: 'Sensor\'s Dynamic Temperature'
            },subtitle: {
            text: 'Source: inteli405',x: -20
            },xAxis: {
                type: 'datetime',tickPixelInterval: 150
            },yAxis: [{
                title: {
                    text: 'Temperature'
                },plotLines: [{
                    value: 0,width: 1,color: '#808080'
                }]
            },{
                title: {
                    text: '摄氏度'
                },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: {
                enabled: false
            },exporting: {
                enabled: false
            },series: [{
                name: 'Sensor Data',data: (function() { // generate an array of random data                             
                    var data = [],time = (new Date()).getTime(),i;
                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,y: 0
                        });
                    }
                    return data;
                })()
            },{
                name: 'Sensor Data',y: 0
                        });
                    }
                    return data;
                })()
            }]
        }); // set up the updating of the chart each second                     
        setInterval(function() {
            //var x = (new Date()).getTime(),// current time         
            //y = Math.random();
            //series.addPoint([x,y + 1],true,true);
            //series1.addPoint([x,y - 1],true);
            var series = chart.series[0];
            var series1 = chart.series[1];
            $.ajax({
            url:"//192.168.199.187/statistic/Temperature/history",type:"GET",//这里是AJAX请求的方式
            dataType:"JSON",//如果你回发的内容是JSON格式的就用这个，否则用Text或其他
            //async: false,success:function(data)
            {
      	        var myobj = eval(JSON.stringify(data));
      	        var latest = 0;
      	  
                var unixTimestamp = new Date(myobj[latest].timestamp);
                var commonTime = unixTimestamp.toLocaleString();
          
                var value = myobj[latest].value;
          
                for(var i = 0; i < 1; i++)
                {
          	        unixTimestamp = new Date(myobj[i].timestamp);
          	        realtime[i] = unixTimestamp.toLocaleString();
          	        realvalue[i] = myobj[i].value;
                }
                
                
                
                var x = (new Date()).getTime(),y = realvalue[0];
                // current time         
                //var y = realvalue[0];
                series.addPoint([x,y],true);
                series1.addPoint([x,true);
                //alert(realtime[0]);
                //alert(realvalue[0]);
                //chart.series[0].addPoint([realtime[0],realvalue[0]]);
                //chart.series[1].addPoint([realtime[0],realvalue[0]]);
        },error:function(XMLHttpRequest,Error,F)
        {
        //出错后可以在这里给出提示，Error参数表示错误信息
        }
    });
        },3000);
    });
});

原文地址：https://www.jb51.cc/ajax/162534.html