HighCharts 随机数动态曲线展示(动态数据实时展示)详解编程语言

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>  

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8762.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论