HighCharts 随机数动态曲线展示(动态数据实时展示)

2019PHP高薪工程师学习路线图....>>>

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,本文主要研究在随机数展示上的应用。

具体代码如下:

    <html>  
    <head>  
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
       <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>  
       <script>  
    $(function () {                                                                       
        $(document).ready(function() {                                                    
            Highcharts.setOptions({                                                       
                global: {                                                                 
                    useUTC: false                                                         
                }                                                                         
            });                                                                           
                                                                                          
            var chart;                                                                    
            $('#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 = (new Date()).getTime(), // current time           
                                    y = Math.random();                                    
                                series.addPoint([x, y], true, true);                      
                            }, 1000);                                                     
                        }                                                                 
                    }                                                                     
                },                                                                        
                title: {                                                                  
                    text: '实时随机数展示'   //主标题                                           
                },                                                                        
                xAxis: {                     //X轴                                             
                    type: 'datetime',                                                     
                    tickPixelInterval: 150                                                
                },                                                                        
                yAxis: {                     //Y轴                                             
                    title: {                                                              
                        text: '数据'                                                     
                    },                                                                    
                    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: {                                                                 
                    enabled: false                                                        
                },                                                                        
                exporting: {                                                              
                    enabled: false                                                        
                },                                                                        
                series: [{                                                                
                    name: '随机数',                                                  
                    data: (function() {                                                   
                        // 产生随机数                               
                        var data = [],                                                    
                            time = (new Date()).getTime(),                                
                            i;                                                            
                                                                                          
                        for (i = -24; i <= 0; i++) {  //显示范围为25个数据 ,可修改                                
                            data.push({                                                   
                                x: time + i * 1000,    //1000毫秒产生一个数据                                
                                y: Math.random()      //随机数产生函数                                
                            });                                                           
                        }                                                                 
                        return data;                                                      
                    })()                                                                  
                }]                                                                        
            });                                                                           
        });                                                                               
                                                                                          
    });    
      </script>  
    </head>  
          
    <body>  
       <div id="container" style="min-width:400px;height:400px;"></div>  
    </body>  
    </html>