highCharts图表应用-模拟心电图

最新推荐文章于 2024-09-20 10:40:49 发布

aichuxia4449

最新推荐文章于 2024-09-20 10:40:49 发布

阅读量587

点赞数

文章标签： json java 数据库

原文链接：http://www.cnblogs.com/hongzai/p/3210499.html

版权

通过前两章的学习，相信大家对highcharts已经有了初步的了解。这一章将通过一个例子来模拟Highcharts如何实现经常变化的数据显示。

比如说股票的涨停、实时篮球比分以及A选手和B选手的支持率。这样的例子在生活中有很多，就不一一列举了。

实现的思路主要还是通过setInterval()方法，隔几秒刷新数据,来实现动态数据的显示。废话不多说，直接上代码。

 
         $( 
         function 
         () { 
        
         // 设置全局的时区 
        
         Highcharts.setOptions({ 
        
         global : { 
        
         useUTC :  
         false 
        
         } 
        
         }); 
        
         new 
         Highcharts.Chart({ 
        
         chart : { 
        
         renderTo :  
         'gridTable2' 
         ,  
         // 放置图表的DIV容器对应页面的id属性 
        
         type :  
         'spline' 
         ,  
         // 图表类型line, spline, area, areaspline 
        
         // 事件 
        
         events : { 
        
         load :  
         function 
         () { 
        
         var 
         series =  
         this 
         .series[0]; 
        
         // 每隔1秒钟，图表更新一次，y数据值在0-100之间的随机数 
        
         setInterval( 
         function 
         () { 
        
         var 
         x = ( 
         new 
         Date()).getTime(); 
        
         var 
         y = Math.random() * 100; 
        
         series.addPoint([ x, y ],  
         true 
         ,  
         true 
         ); 
        
         }, 1000); 
        
         }, 
        
         } 
        
         }, 
        
         title : { 
        
         text :  
         '模拟心电图' 
         // 图表标题 
        
         }, 
        
         subtitle : { 
        
         text :  
         'XXXX' 
         // 副标题 
        
         }, 
        
         // x轴 
        
         xAxis : { 
        
         // X轴为日期时间类型 
        
         type :  
         'datetime' 
         , 
        
         // X轴标签间隔 
        
         tickPixelInterval : 50 
        
         }, 
        
         // y轴 
        
         yAxis : { 
        
         title :  
         '' 
         , 
        
         max : 100,  
         // Y轴最大值 
        
         min : 0 
        
         }, 
        
         // 右下角显示的LOGO 
        
         credits : { 
        
         text :  
         'demo' 
         ,  
         // 设置LOGO区文字 
        
         href :  
         'http://www.javakfz.com' 
         // 设置LOGO链接地址 
        
         }, 
        
         // 是否启用导出功能，默认为true 
        
         exporting : { 
        
         enabled :  
         true 
        
         }, 
        
         legend : { 
        
         enabled :  
         false 
        
         }, 
        
         // 当鼠标悬置数据点时的格式化提示 
        
         tooltip : { 
        
         crosshairs :  
         true 
         , 
        
         formatter :  
         function 
         () { 
        
         return 
         '心率 
        
         ' 
         + Highcharts.dateFormat( 
         '%H:%M:%S' 
         ,  
         this 
         .x) 
        
         +  
         ' 
        
         ' 
         + Highcharts.numberFormat( 
         this 
         .y, 2); 
        
         } 
        
         }, 
        
         plotOptions : { 
        
         column : { 
        
         dataLabels : { 
        
         enabled :  
         true 
        
         }, 
        
         pointPadding : 0.2, 
        
         borderWidth : 0 
        
         } 
        
         }, 
        
         // 设置默认数据 
        
         series : [ { 
        
         data : ( 
         function 
         () {  
         // 设置默认数据， 
        
         var 
         data = []; 
        
         var 
         time = ( 
         new 
         Date()).getTime(); 
        
         var 
         i; 
        
         for 
         (i = -19; i <= 0; i++) { 
        
         data.push({ 
        
         x : time + i * 1000, 
        
         y : Math.random() * 100 
        
         }); 
        
         } 
        
         return 
         data; 
        
         })() 
        
         } ] 
        
         }); 
        
         });