首页>>Jquery文字>>实时更新数据的jQuery图表插件(2014-07-24)

实时更新数据的jQuery图表插件

实时更新数据的jQuery图表插件
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="container" style="width:700px;height:400px;margin:0 auto;"></div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function () {                                                                       
  3. $(document).ready(function() {                                                    
  4.     Highcharts.setOptions({                                                       
  5.         global: {                                                                 
  6.             useUTC: false                                                         
  7.         }                                                                         
  8.     });                                                                           
  9.                                                                                   
  10.     var chart;                                                                    
  11.     $('#container').highcharts({                                                  
  12.         chart: {                                                                  
  13.             type: 'spline',                                                       
  14.             animation: Highcharts.svg, // don't animate in old IE                 
  15.             marginRight: 10,                                                      
  16.             events: {                                                             
  17.                 load: function() {                                                
  18.                                                                                   
  19.                     // set up the updating of the chart each second               
  20.                     var series = this.series[0];                                  
  21.                     setInterval(function() {                                      
  22.                         var x = (new Date()).getTime(), // current time           
  23.                             y = Math.random();                                    
  24.                         series.addPoint([x, y], true, true);                      
  25.                     }, 1000);                                                     
  26.                 }                                                                 
  27.             }                                                                     
  28.         },                                                                        
  29.         title: {                                                                  
  30.             text: '随机生成的数字走势--1秒'                                             
  31.         },                                                                       
  32.         xAxis: {                                                                 
  33.             type: 'datetime',                                                    
  34.             tickPixelInterval: 100                                               
  35.         },                                                                       
  36.         yAxis: {                                                                 
  37.             title: {                                                             
  38.                 text: '随机生成的数字走势--1秒'                                                    
  39.             },                                                                   
  40.             plotLines: [{                                                        
  41.                 value: 0,                                                        
  42.                 width: 1,                                                        
  43.                 color: '#808080'                                                 
  44.             }]                                                                   
  45.         },                                                                       
  46.         tooltip: {                                                               
  47.             formatter: function() {                                              
  48.                     return '<b>'+ this.series.name +'</b><br/>'+                 
  49.                     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
  50.                     Highcharts.numberFormat(this.y, 2);                          
  51.             }                                                                    
  52.         },                                                                       
  53.         legend: {                                                                
  54.             enabled: false                                                       
  55.         },                                                                       
  56.         exporting: {                                                             
  57.             enabled: false                                                       
  58.         },                                                                       
  59.         series: [{                                                               
  60.             name: 'Random data',                                                  
  61.             data: (function() {                                                   
  62.                 // generate an array of random data                               
  63.                 var data = [],                                                    
  64.                     time = (new Date()).getTime(),                                
  65.                     i;                                                            
  66.                                                                                   
  67.                 for (i = -19; i <= 0; i++) {                                      
  68.                     data.push({                                                   
  69.                         x: time + i * 1000,                                       
  70.                         y: Math.random()                                          
  71.                     });                                                           
  72.                 }                                                                 
  73.                 return data;                                                      
  74.             })()                                                                  
  75.         }]                                                                        
  76.     });                                                                           
  77. });                                                                               
  78.                                                                                   
  79. });                 
  80. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_385.html